Trik Membentuk Widget Popular Postbode Sebagai Warna Warni pada Blog

Baca Pula

Widget popular postbode adalah satu dari widget penting pada blog. Widget ini berperan buat menampilkan sebagian postingan yang seringenboom dikunjungi oleh pengunjung blog. So, pengunjung dapat tau postingan apa yang sedang hot/terkenal pada blog sobat.

Dengan widget ini pengunjung blog sobat bakal sebagai tertarik mencoba membaca postingan yang sedang terkenal. Tetapi, agar pengunjung mampu lebih tertarik, sobat dapat mempercantik widget popular postbode ini sebagai warna-warni.
Sebagian minggu hari kemarin, aku sudah membagikan Trik Membentuk Widget Label Cloud Blog Sebagai Warna - Warni. Nah, agar blog sobat lebih colorfull kalium ini aku bakal membagikan tutorial mendesain widget popular postbode agar lebih omdraaien dengan membuatnya sebagai warna-warni. Mari, disimak!

Trik Membentuk Widget Popular Postbode Sebagai Warna Warni pada Blogger

Langkah Pertama: Memasang Widget Popular Postbode pada Blog

• Buka dashbor blogger, kemudian pergi ke sajian Rapikan Lokasi


• Klik Masukkan Snufje, kemudian pilih widget Entri Terkenal/Popular Postbode

• Silahkan konfigurasikan widget popular postbode sobat, sesuai kesukaan masing-masing. apabila telah selesai, klik simpan.

Dengan ini, sobat sudah memasang widget popular postbode dengan tampilan default sesuai template blog sobat. Kini yuk kita percantik sebagai warna warni memakai CSS.

Langkah Kedua: Menambahkan CSS pada Blog

• Cari kode ]]></b:skindangt; atau kode </styledangt; (Agar lebih gampang tekan Ctrl+F)


• Tambahkan 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 merupakan warna popular postbode. So, apabila sobat kurang suka dengan warnanya silahkan ganti sesuai dengan kesukaan sobat. Buat kode warna, dapat dilihat disini

Relatif gampang bukan?
Sekian dulu wetsartikel dari aku kalium ini. Ingat follow Blog Mas Aldi buat mendapatkan update wetsartikel omdraaien lainnya. Semoga bermanfaat.

Berbagi :