Cara membuat widget popular post warna warni rata pinggir di sidbar

triknews - Cara membuat popular post atau entri populer warna-warni di sidbar blog sangat lah mudah kok, kita cukup pasang widget popular post yang sudah disediakan oleh blogger dan setting sedikit kemudian tambahkan kode css pada laman edit html , dan popular posts ini nantinya akan terlihat rapi, desain warna-warninya rata pinggir ,karna pada kebanyakan tutorial tentang pembuatan popular post di internet tampilan widget popular postnya hampir semua lebar di atas dan mengecil turun kebawah , lihat gambar

Tampilan popular post warna-warni rata pinggir

Tampilan popular post warna-warni menyempit kebawah

Cara pasang popular post warna warni rata pinggir di sidbar blog

Pastikan kamu sudah login ke blogger, jika sudah login maka langkah selanjutnya adalah:

Baca juga : Cara Modifikasi indeks label cloud warna warni

1. Pertama pastikan anda sudah pasang widget poular post
2. Kemudian pergi ke editor template [ edit html ]
3. Copy kode css berikut dan paste
diatas kode  ]]></b:skin> atau </style>

/*Popular Post Trikpos*/
.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:normal 13px Fjalla One, Helvetica, Arial, sans-serif;
color:#086D72 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
display:block;
position:absolute;
background-color:#FFFFFF;
color:#000000!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:#20F415;margin-right:0% !important}
.PopularPosts ul li:nth-child(2) {background-color:#12F89C;margin-right:0% !important}
.PopularPosts ul li:nth-child(3) {background-color:#10AFF9;margin-right:0% !important}
.PopularPosts ul li:nth-child(4) {background-color:#0B89FE;margin-right:0% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FCA22C;margin-right:0% !important}
.PopularPosts ul li:nth-child(6) {background-color:#F631ED;margin-right:0% !important}
.PopularPosts ul li:nth-child(7) {background-color:#F962C9;margin-right:0% !important}
.PopularPosts ul li:nth-child(8) {background-color:#64F7A1;margin-right:0% !important}
.PopularPosts ul li:nth-child(9) {background-color:#ECD788;margin-right:0% !important}
.PopularPosts ul li:nth-child(10) {background-color:#B1F60E;margin-right:0% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:12px;
}

Terkahir simpan template dan lihat hasilnya
catatan ;
jika anda ingin merubah warna sesui warna yang kalian sukai silahkan ganti kode-kode warna.

kode warna bisa lihat disini

Demikian penjelasan kami mengenai Cara membuat widget popular post warna warni rata pinggir di sidbar Semoga bisa menjadi referensi serta bermanfaat bagi anda.