Cara merubah tampilan widget popular posts versi evo magz template

tehn-iksederhana - Cara merubah tampilan widget popular posts versi evo magz template - Popular post atau artikel populer merupakan salah satu widget yang harus dimiliki sebuah blog ataupun website, karena widget ini menampilkan beberapa artikel populer yang tentu saja dimaksudkan untuk menarik perhatian pengunjung untuk membacanya, seperti widget lainnya widget popular post bisa kita pasang di blog terutama blogspot namun yang sedikit membedakan tampilan widget popular post urang menarik karena memang dari sananya tidak dimodif oleh pembuat template blogspot.

Jika anda ingin mengganti widget popular post anda dengan desain yang lebih menarik saya sarankan untuk menggantinya dengna widget popular post versi template evo magz seperti yang sedang saya pakai ini.

Caranya gimana ?

Caranya anda tinggal memasukkan kode dibawah ini ke struktur kode html blog anda, jika anda bingung cara memasang nya silahkan baca panduan nya dibawah ini.

Cara merubah tampilan widget popular posts versi evo magz template

Langkah 1# Copy kode dibawah ini, jika tidak bisa dicopy ambil kode nya disini..

/* 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;
}

Langkah 2# Setelah kode diatas dicopy, kemudian paste ke bagian html blog sobat caranya anda login ke blogger pilih template lalu edit html, lalu letakkan kode diatas tepat diatas kode ]]></b:skin> setelah itu klik simpan.

Jika berhasil maka hasilnya seperti gambar diatas, selamat mencoba and good luck.