cara mengubah tampilan popular post full colour
cara mengubah tampilan popular post full colour
tampilan widget popular post di blog sobat garing..??
terlihat monoton..??
nah buat yang tanganya suka gatel pengen ngoprek, langsung yok kita oprek tampilan popular post nya
biar full colour and fresh looking..he he
hasilnya seperti ini sob
Caranya sangat mudah
1. login dahulu ke akun blogger anda
2. masuk ke Dashboard==>Template==> edit html
3.carilah kode ini
]]> atau kode
/* 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;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:bold;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:0;right:0;padding-right:0!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}
4. copy code diatas dan paste diatas kode ]]>
atau kode ; tadi5.kemudian simpan template
6. refreshlah/reload lah halaman blog sobat.
apakah tampilan label blog sobat masih standar ataukah sudah berubah..??
dan apabila sobat ingin mengubah tampilan popular post tersebut kembali keasal/tampilan popular post standar,
cukup hapus kode diatas seperti semula.
semoga tutor singkat dari admin , tentang cara mengubah tampilan popular post full colour
bisa bermanfaat buat sobat blogger semua
salam
Tag : cara mengubah tampilan popular post full colour,cara mengubah tampilan popular post biar keren, Cara Membuat Popular Post Jadi Menarik
0 comments:
Post a Comment