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.

Subscribe to receive free email updates:

5 Responses to "Cara Membuat Popular Post Warna-Warni Keren"

  1. Simple amat caranya ya gan makasih bro :) di cuba dlu ya

    ReplyDelete
  2. Caranya mudah dan hanya copas. Thanks mas yogi

    ReplyDelete
  3. Nice info gan, asal gak berat aja ane ikutin

    ReplyDelete