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:
