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