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
Baca juga : Cara Modifikasi indeks label cloud warna warni
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.
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
- Pertama pastikan anda sudah pasang widget poular post
- Kemudian pergi ke editor template [ edit html ]
- 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.
trims sharenya... pada template yg lama saya pernah nyoba.. keren
ReplyDeleteEmang keren mas :)
DeleteWidgetnya persis kayak punya blog saya kang, emang keren kang he..he...
ReplyDelete