|
|
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
:))
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
~x(
:-t
b-(
:-L
x(
=))
