Cara Membuat Widget Popular Posts Jadi Warna-Warni - Hallo guys,mimin mau share nih Tutorial Blog di Blogrenanda, Pada sharing Tutorial Blog kali ini yang berjudul Cara Membuat Widget Popular Posts Jadi Warna-Warni, saya telah menyediakan Tutorial Blog lengkap seperti Cara Membuat Widget Popular Posts Jadi Warna-Warni . mudah-mudahan isi postingan tutorial yang mimin tulis ini dapat anda pahami. okelah, ini dia tutorialnya.

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).*

Demikianlah Artikel Cara Membuat Widget Popular Posts Jadi Warna-Warni

Sekian Tutorial dari Blogrenanda Cara Membuat Widget Popular Posts Jadi Warna-Warni, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan dari BlogRenanda.

Cara Membuat Widget Popular Posts Jadi Warna-Warni

Anda sedang membaca artikel Cara Membuat Widget Popular Posts Jadi Warna-Warni dan artikel ini url permalinknya adalah https://blogrenanda.blogspot.com/2016/07/cara-membuat-widget-popular-posts-jadi.html Semoga artikel ini bisa bermanfaat.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: