Membuat Widget Entri Populer Keren di Blog - Entri populer merupakan widget yang menampilkan daftar artikel blog yang paling sering dibaca dan dilihat di blog anda. Widget entri populer juga bisa menambah ke-eleganan blog selain untuk memudahkan pengunjung mengetahui post yang paling populer.
Sebenarnya dari platform blogger sendiri telah menyediakan fitur entri populer tetapi tampilannya hanya tampilan standar, namun dengan menambahkan sedikit kode css kita bisa mempercantik tampilan entri populer tersebut. Simaklah tutorial berikut untuk membuat widget entri populer yang keren.
Langkah-lankahnya sebagai berikut
1. Login ke blogger
2. Masuk ke tab tata letak > pilih tambah gadget > entri populer > atur yang ditampilkan hanya judul, thumbnail dan cuplikan jangan ditampilkan agar kode cssnya bekerja
3. Kemudian klik simpan
4. Lalu masuk ke tab template > klik edit html
5. Setelah muncul kotak edit html, cari kode ]]></b:skin> (agar lebih mudah gunakan ctrl+f)
6. Setelah ketemu copy-paste kode dibawah ini tepat diatas kode ]]></b:skin>
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}7. Klik pratinjau terlebih dahulu agar tidak terjadi kesalahan, setelah yakin kode terpasang dengan benar, klik simpan
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-raius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
Nah begitulah cara untuk Membuat Widget Entri Populer Keren di Blog, bagaimana mudah bukan? untuk tips dan trik blogger lainnya bisa anda lihat di RizkyYNWA.Blogspot.com.wassalamu'alaikum
thanks atas artikelnya..
ReplyDeleteblognya sudah saya follow jika berkenan follow balik yah :)
ReplyDeleteachmadrizali.blogspot.com
Mantap.. kunjungi juga
ReplyDeleteLike & Comment
http://classix-education.blogspot.com/
ok thank sob
ReplyDeleteGak ada demo nya ya sob! :)
ReplyDeletemampir gan
ReplyDeletehttp://apapunituzar.blogspot.com/
THANK YOU FOR INFORMATION, Speak Your Mind
ReplyDeletekrim pembesar pantat
pelangsing badan herbal
spray tahan lama
obat pembesar penis
obat penambah sperma
obat pembesar payudara
jual cialis
perangsang wanita
kianpi pil asli
link bagi anda yang ingin cari alat bantu
kondom getar
vagina getar
vagina senter
vagina getar goyang
celana pembesar
alat pemanjang penis
penis bendera
penis isi air
kapsul penggetar
penis getar
penis jumbo manual
terimakasih banyak gan, sangat bermanfaat sekali artikelnya..
ReplyDeletehttp://acemaxsshop.com/obat-penyakit-varikokel-tradisional/