Cara Memberi Efek Hover Pada Tulisan

By Unknown

Rabu, 19 Oktober 2011

Kali ini saya akan terangkan bagaimana cara membuat hiasan pada tulisan seperti tag line dengan hover. Maksudnya judul atau tulisan dalam posting andaakan kita berikan hiasan dan interaktif kursor saat mouse anda menyentuhnya. Pembuatannya bukan seperti pembuatan judul yang bisa tampil berbayang pada umumnya. Di sini kita akan membuat secara manual, atau kita dapat memilih pada bagian mana yang ingin diberikan variasi tampilannya. Sekarang ikuti cara pembuatannya.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>

<style type='text/css'>
h3{font-family:veranda !important; font-style:italic !important}
.post h3{color:#666; border-left:10px solid #666; border-right:10px solid #666; padding:3px 5px 3px 20px; border-radius:15px; -moz-border-radius:15px; box-shadow:0px 0px 13px #666; -webkit-box-shadow:0px 0px 13px #666; -moz-box-shadow:0px 0px 13px #666}
.post h3:hover{color:#FF133F; border-left:10px solid #FF133F; border-right:10px solid #FF133F; box-shadow:0px 0px 13px #FF133F; -webkit-box-shadow:0px 0px 13px #FF133F; -moz-box-shadow:0px 0px 13px #FF133F}
</style>

Selanjutnya klik Save Template
Bila anda ingin memberikan hiasan hover pada postingan anda silahkan masuk ke modus HTML pada saat anda berada di posting area anda. Berikan kode seperti di bawah ini.

<h3>Letakkan tulisan yang ingin diberikan efek hover di sini</h3>

Selanjutnya klik Publish dan lihat hasilnya.
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Share :

Facebook Twitter Google+