Cara Membuat Widget "Popular Post" Warna Warni

Cara Membuat Widget "Popular Post" Warna Warni ~ Mungkin kalian pernah melihat sebuah blog dengan desain Popular Post yang berwarna warni. Warna - warna ini ternyata dapat diubah sesuai selera kalian masing - masing, tinggal merubah kode warna yang diinginkan.


Desain warna - warni ini membuat blog terlihat meriah dan unik serta dapat membuat pengunjung betah berlama - lama di blog kita, kemudian dapat menambah nilai plus dari blog kita karena blog kita terlihat unik dari blog - blog biasanya.

Jika kalian menggunakan template bawaan atau dari pihak ketiga  yang mempunyai tampilan "popular post" biasa saja maka kalian dapat menempelkan kode berikut ini dengan mudah sehingga dapat membuat tampilan  "popular post" menjadi berwarna warni.

Cara Menambah Widget Popular Post di Blog

Sebagai langkah awal maka kalian harus login ke blogger, kemudian cari tata letak / layout tambahkan widget popular post dengan menekan "Add Gadget" pada side bar kemudian cari popular post. Pada pengaturan "Show" maka kalian pilih post title and conteng " image thumbnail " untuk gambar dapat dilihat dibawah :

Membuat Widget Popular Post Warna Warni

1. Setelah menambahkan widget Popular Post di blog maka untuk menampilkan warna - warninya maka langkah - langkah sebagai berikut:

 2. Masuk ke editor blog kalian, Pada Dashboard Blog cari Template yang terletak di sebelah kiri bawah, lalu kalian pilih  Edit html.

3. Cari kode ]]></b:skin> atau </style>, agar mudah mencarinya kalian tekan Ctrl + F didalam box edit html, kemudian ketikkan kode yang akan dicari tadi.

4. Tempelkan kode berikut diatas kode ]]></b:skin> atau </style>(kemungkinan besar kode populer post di blog kalian sudah ada, cari .popularpost kemudian ganti dengan kode berikut ini

/* 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 img { display:block; margin:0 .5em 0 0; width:50px; height:50px; float:left; } .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:before, .PopularPosts ul li .item-title a, .PopularPosts ul li a { font-weight:normal; color:#000 !important; text-decoration:none; } .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; } /* Set color and level */ .PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important} .PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important} .PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important} .PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important} .PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important} .PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important} .PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important} .PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important} .PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important} .PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important} .PopularPosts .item-thumbnail { margin:0 0 0 0; } .PopularPosts .item-snippet { font-size:11px; } .widget-content ul li{margin:0;padding:6px 0px;border-bottom:1px solid #ededed } .widget-content ul li:last-child{border-bottom:medium none !important } .widget-content ul li a{color:#333 } .widget-content ul li a:hover{color:#C80441 } .item-date {font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00 }

5. Simpan template kemudian kalian lihat di blog, jika widget popular post sudah berubah menjadi berwarna warni maka tandanya kalian sudah berhasil membuatnya.

Penutup

Demikian sedikit postingan tentang "Cara Membuat Widget "Popular Post" Warna Warni"  Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Semoga postingan ini dapat bermanfaat.

Mohon kiranya sobat dapat sharing dikolom Komentar dan klik Emoticon sehingga saya dapat memperbaiki bila ada hal yang belum kurang memuaskan. Terima Kasih Atas Kunjungannya, Saya pasti akan Kunjungi Balik.

Bagikan Artikel ini