Monday, January 21, 2013

Cara Membuat Efek Hover Pada Judul Postingan Blog

Memberi Efek Hover Pada Judul Posting, pada kesempatan kali ini saya ingin berbagi Ilmu tentang cara Memberi Efek Hover Pada Judul Posting, untuk mempercantik tampilan blog sobat, efek hover ini akan muncul pada setiap judul postingan yang sobat postingkan langkah langkah untuk membuatnya cukup mudah, 

contohnya seperti ini

[Image: hover.bmp]

Cara:
1. masuk dalam dasbor bloger
2. terus klik rancangan-->edit html (jangan lupa ceklist kotak kecil atas)
3. cari kode </head>
4. masukkan kode berikut dan taruh diatas kode </head> 

Quote:<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>
5. simpan dan lihat hasil kerja sobat sekarang
*budayakan download tema lengkap 
Jika ingin mengganti warna hover tinggal ganti kode yang di beri warna merah, kreasikan warna sobat di bawah ini

Colour Generator

Copy kode Hex dan R saja ^_^ 
Hex: untuk mengganti kode #FF133F
R: untuk mengganti kode #666

Semoga membantu Haha:Haha:Haha:

4 comments:

  1. makasih , sangat bermanfaat...

    lihat punya saya ya....

    http://yuby-idea.blogspot.com/

    ReplyDelete
  2. mantap gan artikelnya.. cantik sekali setelah dicoba...
    sukses selalu...

    ReplyDelete