Membuat Popular Post dengan Efek Hover menggunakan CSS

Postingan kali ini membahas tentang tutorial membuat Popular Post dengan menggunakan efek hover menggunakan kode CSS, hasil tampilannya seperti terlihat pada blog ini (sebelah side bar), elegan bukan hehehe.

Caranya sebagai berikut.

• buka akun blogger anda
• Masuk ke menu Layout >> Add Gadget >> Popular Post (itu jika anda belum menggunakan widget artikel populer, kalau sebelumnya dah ada abaikan step ini) lalu buat dengan pilihan seperti pada gambar dibawah ini:

• lalu save
• terus masuk ke menu edit HTML, jangan lupa centang Expand Template Widget 
• Cari kode ]]></b:skin>
• Copy kode dibawah ini lalu paste di atas kode  ]]></b:skin> tadi

.popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDB_K1Z6AMTwxYNAC2rQRD1qV00A2UwWz0ukMJX93aBg2U3IC35eZlibZeRCv14QauDnvsBMrl0ZV31erbegIWs9sKHcUwZYolyj5SdOIgzmRyCcBISXE6wbQ-9FmEoRyEMxqoFuHWbB4/s1600/rb+cancel+icon...jpg) no-repeat scroll 5px 10px; list-style-type: none; margin: 0 0 5px 0px; padding: 5px 5px 5px 33px !important; border: 1px dashed #dddddd; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .popular-posts ul li:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe3wVPjWylYRozFzH2lRZVVEkAFTMbRVp9i86xVD3VmB19wKxbHwvFOh0JLAV3VNNvoM6laHMTKZYj9oV97wX9yhm2mgfMdQp7Vp6r6E2PIw5eMB3suvrD2emGUTVUH2MUrkVgF5c43Lc/s1600/rb+mark+icon...jpg) no-repeat 2px; border: 2px solid #b60000; -moz-border-radius: 8px; -webkit-border-radius: 8px; } .popular-posts ul li a:hover { text-decoration:none; }

• Selesai 

WAJIB BACA!

Sebuah Penghasilan Online paling realistis dan anti SCAM, bukan bisnis online tapi kerja online. Kerja Online cuma dengan mengetik kode captcha, anda digaji dollar. Silahkan baca postingan kerja online ketik captcha klik disini

Share artikel ini :

Labels: Blogging

Artikel Terkait

• Share Postingan Otomotis ke Jejaring Sosial Facebook dan Twitter
• Membuat Kotak Pesan Keren di Blog
• Membuat Popular Post dengan Efek Hover menggunakan CSS
• UPDATE: Google Tidak Jadi Redirect blogspot.com ke blogspot.co.id Untuk Wilayah Indonesia
• Cara Agar Blogspot.com Tidak Redirect Otomatis ke Blogspot.co.id
• Blogspot.com Beralih ke Blogspot.co.id Untuk Wilayah Indonesia
• Cara Membuat Footer 3 Kolom di Blogger
• Membuat Komentar Facebook dan Blogger Berdekatan
• Membuat Pesan Peringatan di Blog
• Menghapus Auto Readmore yang Dobel di Blogger