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 :

Tex Box, Hover Effect, Css3
Tex Box, Hover Effect, Css3
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
 .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 :
 <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.

Berlangganan update artikel terbaru via email:

28 Responses to "Tex Box Dengan Hover Effect Css3"

  1. wah keren nih sobat tutornya,,,,sip dan lanjutkan kawan. salam sukses

    ReplyDelete
    Replies
    1. Salam sukses juga sobat, thank atas kunjungannya

      Delete
  2. textbox ternyata bisa dikasih effect ya??
    terimakasih infonya sob :)

    ReplyDelete
    Replies
    1. Iya mas bisa, hehheheh, sama2 gan thank atas kunjungannya

      Delete
  3. wuih keren sob, nggak perlu lagi JS buat bikin efek2 keren, tapi kalau mw ganti warna sama bentuk misalnya, gimana caranya sob? :)

    ReplyDelete
    Replies
    1. yap betu, kalau mau diganti warna silakan tinggal di edit aja kode CSS nya mas.

      Delete
  4. Waaah keren gan tutornya :)

    ReplyDelete
  5. boleh nie tutorialnya sob, coba dlu, terima kasih

    ReplyDelete
  6. hallow sobat hadir lagi dimari ,,,masih seputar tex box sob makasih sudah berbagi.
    sukses selalu dan happy blogging

    ReplyDelete
    Replies
    1. Makasih banyak sob, atas kunjungannya, sukses juga buat mas cahyo

      Delete
  7. Keren text box nya sob, penampilan nya seperti terminal /cmd gitu! Nice :)

    ReplyDelete
    Replies
    1. @mas Daniel, hahhaha bisa aja ni mas, terimakasih atas kunjungannya, sukses selalu.

      Delete
  8. nambah css takut gemuk loadingnya :D .

    ReplyDelete
    Replies
    1. Bisa aja ni mizz, masukin css nya sambil diet aja mizz, hehehhhe

      Delete
  9. asyk dan keren da tutor baru lagi neh ... sip kang nanti saya coba dah

    ReplyDelete
    Replies
    1. ok mas silakan , terimakasih banyak atas kunjungannya

      Delete
  10. Replies
    1. Silakan mas, terimakasih banyak atas kunjungannya.

      Delete
  11. keren sob... boleh tak coba gak??

    ReplyDelete
  12. GOOD
    Gan Followers Dong Blogger Saya
    www.mikaruholic.blogspot.com

    ReplyDelete
  13. textarea,y keren..ijin pake ya sob...

    ReplyDelete
  14. Tutorial yang sangat menarik, terima kasih anda sudah share..Salam kenal. :-d

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel