Tampilan |
Memodifikasi Tampilan Popular Posts Seperti Template Evo Magz - Soree Bloggers semuanyaa! sebelumnya ane pernah bahas tentang Memodifikasi Tampilan Popular Post di Blog nah sekarang ane mau share lagi tapi ala Template Evo Magz nih.. udah pada tau tampilannye kan? noh yang belon pada tau ada diatas contohnye.. penasaran gimana cara buatnya? gampang kok cuma Cukup 1 Langkah aja loh.. Pertamaa kitaa..
2. Pilih Template ► Edit HTML
3. Cari kode ]]></b:skin> (Gunakan CTRL+F) Lalu, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
/* Custom CSS for Blogger Popular Post Widget */4. Langkah Terakhir, Simpan Template dan lihat hasilnya!
.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: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;
}
.profile-img{
display:inline;
opaciry:10;
margin:0 6px 3px 0;
}
Mudah bukan? tentunya dong kan ane udah bilang dari awal Sekian dulu ya gan tutorial ane tentang Memodifikasi Tampilan Popular Posts Seperti Template Evo Magz semoga bermanfaat buat agan semuanya! see u next post!
0 Response to "Memodifikasi Tampilan Popular Posts Seperti Template Evo Magz"
Post a Comment