Cara Membuat Widget Popular Post Warna Warni

Cara Membuat Widget Popular Post Terbaru
Sebagai langkah awal sobat adalah:

• Login ke blogger >> masuk ke Tata Letak/Dashboard >> Pilih Layout/Template >> Pilih Tambahkan Gadget/Add a Gadget >> Pilih Popular Post/Entri Populer.
• Kemudian Sesuaikan Pengaturan sesuai keinginan sobat seperti pada gambar di bawah ini.

Cara Membuat Widget Popular Post Warna Warni

Selanjutnya kita akan mewarnai Widget Popular tadi menjadi indah.

• Masuk Ke Editor Template caranya: Dashboard Blogger >> Template >> Edit HTML.
• Cari Kode ]]></b:skin> atau </style>. Agar mudah, gunakan ctrl+f (klik dulu didalam box template editor).
• Paste kode css berikut ini diatas kode ]]></b:skin> atau </style> (kemungkinan besar pada template obat sudah ada css popular post, cari .popularpost dan paste/ganti dengan kode di bawah ini:

/* Popular Post By FaridAlamri.blogspot.com */
.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:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:normal;
color:#000 !important;
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:0px;
right:0px;
padding-right:0px !important;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.widget-content ul li{margin:0;padding:6px 0px;border-bottom:1px solid #ededed
}
.widget-content ul li:last-child{border-bottom:medium none !important
}
.widget-content ul li a{color:#333
}
.widget-content ul li a:hover{color:#C80441
}
.item-date {font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00
}

• Tulisan Berwarna Merah itu ganti dengan kode warna yang sobat inginkan
• Tulisan Berwarna Hijau Untuk Mengganti Margin
• Simpan Template nya dan lihatlah hasilnya.

Bagaimana apa sobat sudah bisa membuatnya ? pasti bisa gak mungkinlah gak bisa,
sekian untuk postingan mengenai Cara Membuat Widget Popular Post Warna Warni di blog.
Terimah kasih sudah mau percayai tutorial yang ada di blog ini.