Cara mudah membuat widget Populart Posts menjadi berwarna-warni

Baiklah sobat pada malam ini saya akan berbagi sebuah artikel sederhana kepada anda para pecinta blogger yaitu artikel yang berkaitan dengan widget populart posts pada blogger. Nah sesuai dengan judul artikel di atas bahwasannya pada saat ini saya akan berbagi tips atau cara bagaimana cara membuat widget populart posts pada blogger menjadi warna warni sebelum kita memulai ke TKP pernahkan anda membuka salah satu situs blog yang ada di indonesia dan pernah melihat widget populart posts nya yang berwarna warni seperti gambar di bawah ini? Ya pastinya sudah pernah bukan saya juga sering melihat widget populart posts berwarna warni seperti itu mungkin juga kelihatan menarik ya karena berwarna warni akan tetapi widget berwarna warni itu biasanya bawaan dari sebuah template blogger yang di gunakan widget populart posts berwarna warni itu biasanya ada di template "Kang Seo" template yang di buat oleh kang mousir, dengan keunikan dari widget populart posts ini maka dari itu banyak orang yang menggunakan template ini karena terlihat unik dan menarik memiliki widget populart posts yang berbeda dari template lainnya. Akan tetapi pernahkah anda berpikir atau berkinginan ingin membuat widget populart posts berwarna warni seperti itu di template blog anda masing-masing? mungkin sebahagian orang memang memiliki niat serperti bisa membuat widget populart posts warna warni di template masing-masing dan masih kebingunan belum tahu bagaimana cara membuatnya maka dari itu mungkin banyak niat dari sobat yang di urungkan atau belum ke sampaian, Nah dari situlah saya memiliki ide bahwa saya ingin berbagi informasi kepada sobat semua para pecinta blogger bagaimana cara membuat widget populart posts menjadi berwarna warni bagi sobat yang ingin membuat widget populart posts menjadi berwarna warni di template anda masing-masing anda bisa mengikuti langkah-langkahnya di bawah ini dengan seksama ingat jangan ada langkah-langkah yang terlewatkan jika ada mungkin akan terjadi kegagalan saat anda membuat widget populart posts ini akan tetapi cara membuatnya cukuplah mudah sobat tidak sesulit yang di pikirkan, Baiklah tanpa berbasa basi lagi langsung saja kita mulai ke TKP

Langkah-langkahnya :


1. Masuk ke akun blogger anda masing-masing
2. Jika sudah anda pilih Menu Template/Edit HTML

template-deferon-5

3. Setelah itu anda salin kode CSS di bawah ini dan letakkan di atas kode : ]]></b:skin> atau </style>

Kode CSS


/* Custom CSS for Blogger 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;
font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
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;
padding:.5em 1.5em .5em .5em;
counter-increment:num;
position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
font-weight:bold;
font-size:120%;
color:inherit;
text-decoration:none;
}

.PopularPosts ul li:before {
content:counter(num);
display:block;
position:absolute;
background-color:black;
color:white;
width:30px;
height:30px;
line-height:30px;
text-align:center;
top:50%;
right:-10px;
margin-top:-15px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
}

/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

4. Jika sudah Simpan Template yang baru saja di Edit tadi dan langsung saja sekarang lihat hasilnya
5. Gimana sobat mudah bukan membuat widget populart posts menjadi berwarna warni hehehe ya begitulah caranya sobat sekian dari saya terimakasih
Cara mudah membuat widget Populart Posts menjadi berwarna-warni