Cara Membuat Popular Post Ala Evo Magz

Cara Membuat Popular Post bernomor Ala Evo Magz - Pada cara di postingan ketiga YOUDHA adalah cara yang masuk ke label Desain yang kita bahas kali ini. Cara Membuat Popular Post bernomor Ala Evo Magz ini mempunyai desain yang menarik dan cukup unik. Karena dibekali bernomor dan juga warna yang beraneka macam.

BACA JUGA :

• Cara (AMPUH!!!) Mendapatkan Banyak Traffic Ke Blog

• Cara Dapatkan Traffic Melimpah dari GooglePlus+

• Cara Pasang Komentar Disqus di Blog Valid HTML5

Cara Membuat Popular Post Ala Evo Magz

Berikut inilah caranya

Buka Blogger > Template > Edit HTML > Letakkan CSS kode di bawah ini di atas kode ]]></b:skin> atau </style>

/* 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 0 0 0 !important;
padding:10px 20px 10px 10px !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;
font-family:arial, sans-serif !important;
font-size:12px;
font-weight:bold !important;
display:block;
position:absolute;
top:-5px;
right:-5px;
border-radius:16px;
background-color:#333;
color:#fff !important;
width:28px;
height:28px;
line-height:28px;
text-align:center;
padding-right:0px !important;
border:2px solid #fff;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#228aff;
}
.PopularPosts ul li:nth-child(2) {background-color:#9b59b6;
}
.PopularPosts ul li:nth-child(3) {background-color:#40c186;
}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;
}
.PopularPosts ul li:nth-child(5) {background-color:#ea5743;
}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;
}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;
}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;
}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;
}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;
}
.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;
}

Langkah selanjutnya, SIMPAN TEMPLATE

Kemudian coba Buat Gadget Popular Post di Tata Letak!
Simpan

Untuk mengubah warna anda bisa mengubahnya dengan cara mengganti kode warna yang ada di kode CSS diatas yang didahului #...

Demikian cara Cara Membuat Popular Post Ala Evo Magz, semoga bermanfaat.