Tidak seperti texbox pada umumnya yang menjenuhkan dan membosankan maka textbox ini terkesan menarik karena dibuat dengan efek hover apalagi ditambah atau dibangun dengan CSS3.
2. Pilih Template » Edit Html
3. Jangan lupa centang Expand Template Widget.
4. Tekan Ctrl+F kemudian cari code ]]></b:skin>
5. Copy paste code di bawah ini dan letakkan di atas code ]]></b:skin>
/* TextBox */
.junedalbughisybox{
color: white;
background-color: black;
width: 500px;
margin: 5px 5px;
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;
}
.junedalbughisybox:hover{
background-color: CornflowerBlue ;
}
.junedalbughisybox:active{
background-color: darkgreen ;
}
Cara penggunaan pada postingan adalah sebagai berikut:
Catatan:<div class="junedalbughsiybox" style="font-family: "Courier New",Courier,monospace;">
LetakanTulisan Atau Kode Disini</div>
- Untuk tulisan yang berwarna merah silahkan ganti dengan tulisan yang sobat inginkanKlik link Demo untuk melihat hasilnya
Semoga tutorial kali ini dapat membantu memperindah tampilan postingan blog sobat.
Salam Blogging…!!!
SUMBER : http://junedalbughisy.blogspot.com/2013/04/cara-membuat-textbox-dengan-efek-hover.html