Assalamualaikum wr.wb , bertemu lagi dengan saya selaku admin blog Ki-rik , pada pertemuan kali ini saya akan membahas Cara Membuat Popular Post Berwarna Seperti Template Evomagz Terbaru ,
Pernah lihat popular post berwarna seperti gambar di atas? ya, itu adalah Screen Shot dari popular post yang sangat mirip dengan Template Evomagz versi terbaru.
Untuk proses pembuatannya sangat mudah cukup tempel tempel saja , Namun meskipun cuma tempel tempel tetapi banyak blogger indonesia yang tidak tahu cara membuat/memasang popular post berwarna seperti mas sugeng .
Apabila anda sudah penasaran dengan cara pembuatannya , berikut cara pembuatan Popular Post Berwarna :
- Buka www.blogger.com
- Masuk ke Template>Edit HTML
- Cari kode ]]></b:skin>
- Jika sudah ketemu masukkan kode di bawah ini tepat di atas 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 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:#A51A5D;
}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;
}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;
}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;
}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;
}
.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;
}
Selesai,, Bagaimana? sudah bisa ? sudah berwarna???
Demikian sedikit tutorial dari saya tentang Cara Membuat Popular Post Berwarna Seperti Template Evomagz Terbaru .
