Cara Membuat Popular Post Warna-warni di Blog - Populer post
adalah salah satu widget yang wajib dipasang dalam blog, hal ini bertujuan memperlihatkan beberapa artikel terbaik dan banyak yang dikunjungi dalam blog,
popular post juga salah satu widget penambah page view untuk blog anda, untuk
pemasangannya juga sangat mudah dan letaknya bisa dimana saja, karena popular
post merupakan widget default dari blogger. Seiring dengan perkembangan zaman,
modfikasi blog juga beraneka macam, ada yang widget dan thema sesuai dengan
blognya ataupun tidak. Nah, kali ini saya akan memberikan tips untuk membuat
popular post default menjadi warna-warni, pokoknya keren banget.. tampilan blog
kamu menjadi cantik, contohnya saja seperti ini:
Cara
Memasang Popular Post Warna-warni di Blog
Berikut
cara-cara yang harus dilewati untuk memasang popular Post di blog:
1. Sobat
harus punya blog dulu, jika sudah punya silahkan login dulu
2. pilih
menu “template” lalu pilih “edit html”
3. kemudian
cari kode ]]></b:skin> lalu letakkan kode di bawah ini tepat diatas
kode tadi.
/* Popular Post */.PopularPosts ul,.PopularPosts li,.PopularPosts li img, .PopularPosts li a,.PopularPosts li a img {margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none;}.PopularPosts ul {margin:.5em 0;list-style:none;color:black;counter-reset:num;}.PopularPosts ul li {background-color:#eee;margin:0 10% .4em 0 !important;padding:.5em 1.5em .5em .5em !important;counter-increment:num;position:relative;}.PopularPosts ul li img {display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left;}.PopularPosts ul li:before,.PopularPosts ul li:before {content:counter(num) !important;display:block;position:absolute;background-color:#333;color:#fff !important;width:22px;height:22px;line-height:22px;text-align:center;top:0px;right:0px;padding-right:0px !important;}.PopularPosts ul li .item-title a, .PopularPosts ul li a {color:#444 !important;text-decoration:none;}.PopularPosts ul li:nth-child(1) {background-color:#E1F3FD;margin-right:1% !important}.PopularPosts ul li:nth-child(4) {background-color:#FEF6E1;margin-right:1% !important}.PopularPosts ul li:nth-child(2) {background-color:#EDE3F2;margin-right:1% !important}.PopularPosts ul li:nth-child(3) {background-color:#EFF8DD;margin-right:1% !important}.PopularPosts ul li:nth-child(9) {background-color:#FEF6E1;margin-right:1% !important}.PopularPosts ul li:nth-child(5) {background-color:#FEE4E3;margin-right:1% !important}.PopularPosts ul li:nth-child(6) {background-color:#E1F3FD;margin-right:1% !important}.PopularPosts ul li:nth-child(8) {background-color:#EFF8DD;margin-right:1% !important}.PopularPosts ul li:nth-child(7) {background-color:#EDE3F2;margin-right:1% !important}.profile-img{display:inline;opaciry:10;margin:0 6px 3px 0;}.PopularPosts ul li:nth-child(10) {background-color:#FEE4E3;margin-right:1% !important}.PopularPosts .item-thumbnail {margin:0 0 0 0;}.PopularPosts .item-snippet {font-size:11px;}
4. Silahkan Save dan lihat hasilnya.
Gimana?.. sekarang tampilan Popular Post kamu sudah menjadi keren dan menarik para pengunjung blog. silahkan dicoba. semoga bermanfaat.
Artikel Terkait:
