Cara membuat widget popular post warna-warni di Blog

Widget merupakan suatu hal yang sangat penting yang harus dipasang diblog, karena widget sendiri sangat bermanfaat untuk mempercantik dan memperindah suatu blog. selain itu, widget juga dapat dimanfaatkan untuk memberi informasi bagi pengunjung atau visitor. Sebenarnya Widget ada berbagai jenis tergantung widget mana yang akan dibutuhkannya, bahkan diblog juga sudah menyediakannya berbagai widget gratis mulai dari yang paling sederhana(praktis) sampai yang paling rumit. Biasanya widget yang dipasang juga akan mempengarui loading pada blog.

Nah, pada kesempatan kali ini saya tidak akan menjelaskan tetang berbagai widget pada blog melainkan saya akan menjelaskan tentang widget Popular post dengan tampilan yang berwarna warni seperti contoh gambar dibawah ini :

Widget Popular Post dengan warna-warni menunjukan beberapa artikel yang paling populer atau sering dikunjungi pada suatu blog dengan background atau tampilan yang berwarna. Fungsinya yaitu untuk memikat mata pengunjung agar mereka mau mengklik dan melihat artikel yang sedang populer dengan background yang tidak biasanya, hal itu juga akan menaikan trafik pageview pada blog kita.

terus gimana sih, cara membuatnya ?

Oke, saya akan memberitahu caranya, langsung saja simak langkah-langkah berikut ini :

Pertama pasang widget popular post

- Masuk ke blogger (Tata Letak > Tambahkan Gadget > Entri Populer > Simpan).

Kedua Tambahkan Kode HTML

- Masuk ke blogger (Template > Edit HTML > Masukan kode dibawah ini diatas kode ]]></b:skin)

/* Popular Post Widget */

.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 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:#000;
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:0;
right:0;
padding-right:0!important
}

/* Set color and level */
.PopularPosts ul li:nth-child(1){background-color:#DEDB00;margin-right:1% !important}
.PopularPosts ul li:nth-child(2){background-color:#FDCB01;margin-right:2% !important}
.PopularPosts ul li:nth-child(3){background-color:#FF9201;margin-right:3% !important}
.PopularPosts ul li:nth-child(4){background-color:#44CCF2;margin-right:4% !important}
.PopularPosts ul li:nth-child(5){background-color:#01ACE2;margin-right:5% !important}
.PopularPosts ul li:nth-child(6){background-color:#3923D6;margin-right:6% !important}
.PopularPosts ul li:nth-child(7){background-color:#FF6699;margin-right:7% !important}
.PopularPosts ul li:nth-child(8){background-color:#FD7FAA;margin-right:8% !important}
.PopularPosts ul li:nth-child(9){background-color:#A51A5D;margin-right:9% !important}
.PopularPosts ul li:nth-child(10){background-color:#FF2626;margin-right:10% !important}
.PopularPosts .item-thumbnail{
margin:0 0 0 0;
}

.PopularPosts .item-snippet{
font-size:11px
}

Nb : 
- Warna merah diatas bisa anda ganti dengan kode-kode warna yang anda ingingkan,
- Warna biru bisa anda hilangkan atau bisa anda otak-atik sendiri, kegunaanya yaitu margin right untuk menjorokan kekiri atau menepikan kekiri dengan ukuran 1% dan seterusnya sampai 10%.

Demikian tentang Cara membuat widget popular post warna-warni di Blog yang bisa saya sajikan, apabila ada yang belum jelas bisa ditanyakan melalui kotak komentar. Semoga postingan ini bisa bermanfaat bagi anda