Cara membuat popular post warna warni rata pinggir di sidbar

trikpos - 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

Silahkan ikuti tutorial berikut.


Baca juga : Membuat tab widget tiga kolom di sidbar

Cara pasang popular post warna warni rata pinggir di sidbar blog

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

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 warna tersebut
kode warna bisa lihat disini

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