Tutorial cara membuat popular post pelangi seperti evo magz

Baca Juga

Cara membuat popular post ala evo magz - Membuat blog agar tampil lebih menarik pasti sudah menjadi dambaan dari sebagian para blogger diluaran sana, tidak terkecuali dengan sobat yang saat ini sedang membaca artikel ini.

Nah disini saya akan memberikan tutorial untuk merubah tampilan popular post atau entri popular menjadi keren banget yang sudah diterapkan oleh mas sugeng di template andalannya evo magz.

Jika sobat masih belum tau dengan bentuk dan model dari entri populer ala evo magz, sobat bisa lihat gambaran screenshot di bawah ini :

Gimana untuk caranya mas?

Oke langsung saja saya jelaskan di bawah ini:

Cara membuat popular post warna-warni evo magz

Caranya sangat mudah sekali sobat, yang perlu sobat lakukan adalah sebagai berikut :

1. Sobat login dulu ke blogger.com

2. Sobat pilih menu template

3. Pilih tombol "Edit HTML" yang ada didalam menu template

4. Kemudian sobat pasang kode di bawah ini sebelum/diatas kode ]]></b:skin> atau </style>. Gunakan "CRTL+F" agar lebih mudah untuk mencari kode tersebut

/* Popular Post Widget  EVO MAGZ*/
.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;
} 

5. Terakhir, sobat jangan lupa tinggal klik Simpan

Nah itulah cara untuk membuat popular post warna-warni layaknya template evo magz buatan mas Sugeng, dengan memasang kode diatas, tampilan blog sobat sekarang akan menjadi lebih menarik.

Demikian dulu artikel kali ini, semoga bermanfaat dan silahkan dicoba di blog sobat. Sekian dan terima kasih.