0 Cara Membuat Tex Box Dengan Hover Effect Css3

Selamat siang sobat blogger setelah senelumnya kita membahas tentang Membuat Widget TOP Comentator kali ini Kolom Tutorial™ akan mencoba sebuah tutorial sederhana dengan teknik CSS Hover effect, Tutorial kita kali ini adalah tentang pembuatan Tex Box Dengan Hover Effect Css3, freviewnya kurang lebih seperti pada gambar dibawah ini :


elamat siang sobat blogger setelah senelumnya kita membahas tentang Membuat Widget TOP Comentator kali ini Kolom Tutorial™ akan mencoba sebuah tutorial sederhana dengan teknik CSS Hover effect, Tutorial kita kali ini adalah tentang pembuatan Tex Box Dengan Hover Effect Css3, freviewnya kurang lebih seperti pada gambar dibawah ini :

VIEW A DEMO

Dan sobat mari kita lanjut ke tutornya : 

1. Seperti biasa Login ke Akun Blogger sobat

2. Klik Template Klik Edit HTML
3. Jangan Lupa Centang Expand Widget Template
4. Cari kode ]]></b:skin> dan letakan kode CSS dibawah tepat diatas kode


CSS

 .KTboxmessage
{
color: white;
background-color: black;
width: 500px;
margin: 5px 60px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}

.KTboxmessage:hover
{
background-color: CornflowerBlue ;

}
.KTboxmessage:active
{
background-color: darkgreen ;
} 

5. Klik Save

Keterangan :

Untuk Penulisan dalam postingan atau widget gunakan kode :

Html 

<div class="KTboxmessage" style="font-family: &quot;Courier New&quot;

,Courier,monospace;">LetakanTulisan Atau Kode Disini</div>  

Ok soba, selamat berkreasi sekian artikel tentangmembuat Tex Box Dengan Hover Effect Css3, happy blogging and enjoy.