Cara Membuat Post Hover di Blog Dengan CSS

Assalamualaikum Wr.Wb. Pada Tutorial Blog Sebelumnya Blog Sharing Ilmu Pengetahuan Sudah Menjelaskan Pada Sobat Semua Tentang Bagaimana Cara Membuat Menu Drop Down Horizontal Melayang Di Blog.Tetapi Pada Tutorial Blog Kali Ini Saya Akan Menjelaskan Pada Sobat Semua Tentang Bagaimana Cara Membuat Post Hover di Blog Dengan CSS .Tentu Sobat Semua sudah tau apa itu hover? oh ada yang tidak tau. Hover adalah efek yang diterima suatu objek saat di sentuh mouse/kursor, misalnya ketika link saat di sentuh mouse. Nah kalau post itu ada bagian posting, muali dari background, tulisan, semuanya tentang posting deh. Sekarang kita akan mencoba menggabungkan hover dan post dengan CSS3. Seperti apakah jadinya? kurang lebih seperti ini

Demo

Sudah lihat demonyakan?itu sangat simple, anda masih bisa mengembangkannya lagi dengan imajinasi anda sendiri hehe. Oke jika anda tertarik langsung saja ke Steb.By.Step

1. Login ke blog anda > Design > Edit HTML
2. Cari kode </head>
3. Letakan kode berikut di atas kode tadi

<b:if cond="data:blog.homepageUrl == data:blog.url"> <style>
    .hentry:hover {
     background:#ddd -moz-linear-gradient(top,  #ddd,  #818181);background:-webkit-gradient(linear, left      top, left bottom, from(#818181), to(#000));
    color:#FFFFFF;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    }
    .hentry:hover a:link,#posts-list .hentry:hover a:visited {
    color:#FFFFFF;
    }
</style></b:if>

4. Kalau anda mengerti kode CSS boleh ko itu di utak-atik
5, Save Termplates.

Sekian post saya kali ini, semoga bermanfaat saya akhiri wassalam

Artikel Terkait :

Diposting oleh learning di 15.22