Cara Dan Metode Menciptakan Widget Popular Posts Jadi Warna-Warni

cara Dan Teknik Membuat Widget Popular Posts di Sidebar Blog Kaprikornus 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, kemudian klik "inspect element" ada deh.

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

pola dan cara tampilan Widget Popular Posts Warna-Warni menyerupai dalam ilustrasi gambar posting ini.

cara Dan Teknik Edit Widget Popular Posts Kaprikornus Warna-Warni

Brikut ini cara pasang Widget Popular Posts Warna-Warni yang pernah Template Simple CB, namun dilepas alasannya yaitu terasa "lebay" dan menyerupai iklan obat besar lengan berkuasa :)

1. Template > Edit HTML

2. Simpan instruksi berikut ini diatas instruksi ]]></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 dapat ganti warnanya sesuka Anda di bab kode background-color (Lihat: Kode Warna HTML).

3. Save Template!

Setting Popular Posts

Sekarang ke bab 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 bab image dan snippet menyerupai dalam gambar berikut ini:

4. Save!

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

Sumber http://www.contohblog.com/

Artikel Terkait

Cara Dan Metode Menciptakan Widget Popular Posts Jadi Warna-Warni

4/ 5

Oleh Unknown

Unknown Juli 23, 2016