Cara Membuat Widget Popular Post Menjadi Warna Warni di Blog

Baca Juga

Widget popular post merupakan salah satu widget penting di blog. Widget ini berfungsi untuk menampilkan beberapa postingan yang sering dikunjungi oleh pengunjung blog. Jadi, pengunjung bisa tau postingan apa yang sedang hot/populer di blog sobat.

Dengan widget ini pengunjung blog sobat akan menjadi tertarik mencoba membaca postingan yang sedang populer. Namun, supaya pengunjung dapat lebih tertarik, sobat bisa menghias widget popular post ini menjadi warna-warni.
Beberapa minggu kemarin, saya telah membagikan Cara Membuat Widget Label Cloud Blog Menjadi Warna - Warni. Nah, supaya blog sobat lebih colorfull kali ini saya akan membagikan tutorial mendesain widget popular post supaya lebih keren dengan membuatnya menjadi warna-warni. Yuk, disimak!

Cara Membuat Widget Popular Post Menjadi Warna Warni di Blogger

Langkah Pertama: Memasang Widget Popular Post di Blog

• Buka dashbor blogger, lalu pergi ke menu Tata Letak
• Klik Tambahkan Gadget, lalu pilih widget Entri Populer/Popular Post

• Silahkan konfigurasikan widget popular post sobat, sesuai selera masing-masing. Jika sudah selesai, klik simpan.

Dengan ini, sobat telah memasang widget popular post dengan tampilan default sesuai template blog sobat. Sekarang mari kita percantik menjadi warna warni menggunakan CSS.

Langkah Kedua: Menambahkan CSS di Blog

• Buka dashbor blogger, lalu pergi ke menu Tema
• Klik Edit HTML

• Cari kode ]]></b:skin> atau kode </style> (Supaya lebih mudah tekan Ctrl+F)
• Masukkan kode CSS ini, diatas kode tadi

 

.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 0 0 0 !important;
padding:10px 20px 10px 10px !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#000 !important;
text-decoration:none;
}
.PopularPosts .widget-content ul li {
 list-style-type: none;
}
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;
}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;
}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;
}
.PopularPosts ul li:nth-child(4) {background-color:#EF4836;
}
.PopularPosts ul li:nth-child(5) {background-color:#FF9201;
}
.PopularPosts ul li:nth-child(6) {background-color:#FDCB01;
}
.PopularPosts ul li:nth-child(7) {background-color:#DEDB00;
}
.PopularPosts ul li:nth-child(8) {background-color:#89C237;
}
.PopularPosts ul li:nth-child(9) {background-color:#44CCF2;
}
.PopularPosts ul li:nth-child(10) {background-color:#01ACE2;
}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}

Keterangan :
- Kode yang berwarna biru adalah warna popular post. Jadi, jika sobat kurang suka dengan warnanya silahkan ganti sesuai dengan selera sobat. Untuk kode warna, bisa dilihat disini

• Terakhir, klik Simpan.

Cukup mudah bukan?
Sekian dulu artikel dari saya kali ini. Jangan lupa follow Blog Mas Aldi untuk mendapatkan update artikel keren lainnya. Semoga bermanfaat.