Cara Membuat Widget Popular Post Warna Warni Pada Blog-

Widget Popular Post Warna Warni Pada Blog- Membuat Widget Popular Post Warna Pelangi

Bagi anda yang menginginkan widget popular post warna warni seperti blog-blog kekinian, pada kesempatan ini Admin akan berbagi trik bagaimana caranya mendapatkan widget popular post warna warni pada blog. Sebenarnya widget ini sudah ramai digunakan pada awal tahun 2015, namun Admin sendiri baru saja mencobanya di pertengahan tahun 2016 dikarenakan popular post yang terdapat di blog ini sudah agak lama dan tidak kekinian. :D
Langsung saja bagi anda yang menginginkan widget popular post warna-warni pada blog dapat mengikuti tutorial berikut ini :

1. Masuk Blogger anda
2. Buka pada bagian tata letak kemudian pilih tambahkan widget baru > popular post.
3. Pada tahap ini popular post yang tampil adalah versi bawaan dari blogger.
4. Kemudian sekarang masuk ke editor template. Buka Dashboard > Template > Edit HTML
5. Setelah muncul kotak box template, klik kemudian tekan CTRL + F
6. Cari tulisan ]]></b:skin> atau </style> 

7.  Kemungkinan setiap template saat ini sudah terdapat popular post, maka dari itu cobalah terlebih dahulu mencari  kode popular post dengan perintah .popularpost pada CTRL + F. Jika memang sudah tersedia, ganti dengan kode di bawah ini.
Masukkan kode berikut di atas kode tersebut.:

/* Popular Post */

.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

}

CATATAN :

Kode dengan warna merah adalah warna dari setiap poin dari popular post. 

Kode dengan warna biru adalah persen panjang dari setiap poin dari popular post. 

 Jika anda menginginkan panjang dari setiap poin di popular post sama, maka ubahnya nilainya menjadi 0%.

Selesai. Sekarang simpan template dan cek tampilan popular post anda.