Cara Membuat Widget Popular Posts Jadi Warna-Warni

Cara Membuat Widget Popular Posts di Sidebar Blog Jadi Warna-Warni

SEJUMLAH template blog menggunakan Widget Popular Posts di Sidebar Warna-Warni. Ada merah, kuning, hijau, di langit yang biru kayak lagu pelangi-pelangi. Ada merah, kuning, kelabu, merah muda, dan biru sepreti di lagu balonku.

Mau? Gampang. Intip aja kodenya dengan klik kanan Widget Popular Posts Warna-Warni di blog mana saja, lalu klik "inspect element" ada deh.

Terbaik, klik kanan halaman blognya, klik "View Source Code", lalu Ctrl+F dan ketik PopularPosts. langsung kelihatan kodenya, tinggal Copas saja.

Contoh tampilan Widget Popular Posts Warna-Warni seperti dalam ilustrasi gambar posting ini.

Cara Edit Widget Popular Posts Jadi Warna-Warni

Brikut ini cara pasang Widget Popular Posts Warna-Warni yang pernah CB pasang di widget popular post Template Simple CB, namun dilepas karena terasa "lebay" dan mirip iklan obat kuat :)

1. Template > Edit HTML

2. Simpan kode berikut ini diatas kode ]]></b:skin> atau </style> 

/*Custom 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 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none;font-size:14px}
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

Note:

Anda bisa ganti warnanya sesuka Anda di bagian kode background-color (Lihat: Kode Warna HTML).

3. Save Template!

Setting Popular Posts

Sekarang ke bagian Layout (Tata Letak).

1. Klik "Edit" di Widget Popular Posts yang sudah dipasang. Kalo belum dipasang, ya.. pasang dulu dong!

2. Pilih angka atau jumlah popular post yang mau ditampilkan

3. Jangan centang apa pun di bangain "Show". Lepas semua centang di bagian image dan snippet seperti dalam gambar berikut ini:

4. Save!

Demikian Cara Membuat Widget Popular Posts Warna-Warni di Sidebar Blog. Good Lukc & Happy Blogging! (http://www.contohblog.com).*