Cara Membuat Popular Post Keren Ala Evo Mags

Baca Juga

GilangTekno - Cara Membuat Populer Post Keren Ala Evo Mags - Hai sob, kali ini saya mau membuat sebuah post yang berlabelkan blogging dengan judul Cara Membuat Populer Post Keren Ala Evo Mags. 

Dari judul post ini, mungkin sobat sudah tau apa yang mau saya buat. Buat sobat yang tidak tau apa itu Populer Post, Populer post adalah post yang memiliki paling banyak view atau penayangan di website atau blog kalian. Dengan menambahkan jenis widget ini, kalian dapat meningkatkan views website kalian. Jadi, langsung saja, ini dia Cara Membuat Populer Post Keren Ala Evo Mags.

Baca juga:

• Tutorial Cara Membuat Privacy Policy Buat Blog
• Tutorial Mempercantik Tampilan Kolom Komentar Di Blog

Langkah-langkah untuk membuat widget ini ada:

Pertama, 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;
}

Kedua, pilih Simpan Template kemudian buat widget baru dan pilih Populer Post dan jadilah Widget Populer Post seperti di bawah ini

Sekian dulu tutorial dari saya, semoga dapat bermanfaat untuk kalian.