Cara Membuat Popular Post Warna-Warni Keren

Cara membuat widget popular post warna-warni - Ketemu lagi bersama Mas YogiKeling SITE yang kali ini akan memberikan tutorial yang baru tentang cara membuat popular post keren berwarna. Awal mula saya membuat tutorial ini karena saya mengunjungi suatu blog dan melihat widget popular post yang menarik mata saya untuk melihat. Seperti pada gambar diatas. Lalu rentang beberapa hari ada kawan saya yang bertanya bagaimana sih cara membuat widget popular post tidak membosankan dilihat. Ahaaa, pertanyaan yang tepat untuk langsung dijawab heehhe:)

Untuk membuat widget popular post berwarna kita tinggal memberikan sebuah cssnya saja, dengan syarat kita sudah memasang widget popular post terlebih dahulu. Oh iya widget popular post itu sama saja dengan widget entri populer ya kawan.

Lalu bagaimana cara membuat/memasangnya.

Simak tutorial cara membuat widget popular post berwarna dibawah ini :

1. Login ke dashboard blogger kalian

2. Masuk ke menu Tata Letak - Tambahkan Gadget - Pilih Entri Populer. Pilih dimana kalian akan meletakan widget popular post tersebut. Saya sarankan disidebar kanan/kiri.

Lalu atur seperti gambar dibawah ini.

  

3. Jika sudah simpan. Belum selesai, kita belum memasukan cssnya

Baca Juga : Cara Cepat Menambahkan CSS di Blog

Memasukan CSS Warna-Warni :

1. Masuk ke menu Tema - Sesuaikan - Tingkat Lanjut - Tambahkan CSS

2. Copy scriptnya dibawah ini dan pastekan disitu ya.

.label-size a:hover{background:#555;} 

.label-size a:hover:before{border-color:transparent #555

 transparent transparent;}

.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:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;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;bottom:0;right:0;padding-right:0!important}

/* Pengaturan Warna */

.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}

Ohiya, jika kalian ingin mengganti warna popular post tersebut, ganti kode yang berwarna merah dengan kode HTML warna yang kalian suka.

3. Jika sudah Terapkan ke blog dan lihat hasilnya.

Sekian tutorial Cara Membuat Popular Post Warna-Warni Keren diblog. Semoga blog kalian makin kece ya kwkwkw. Sampai bertemu di artikel yang lainnya.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn