Tuesday, 13 May 2014

Memodifikasi Tampilan Popular Posts Seperti Template Evo Magz


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

1. Masuk ke Blogger

2. Pilih TemplateEdit 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 */
.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;
4. Langkah Terakhir, Simpan Template dan lihat hasilnya! 

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! 

bangbil.com adalah sebuah personal blog. Seorang blogger yang masih merangkap sebagai pelajar. Temui aku di Sosial Media :

Berlangganan via Email

Berlangganan artikel terbaru dari blog ini langsung via email.