Tutorial cara membuat popular post keren responsive

Cara membuat popular post keren responsive -  Membuat blog agar lebih responsive lagi adalah suatu keharusan buat  para blogger untuk mendapatkan peringkat terbaik di mesin pencari.

Dan pada kesempatan kali ini saya akan berbagi ilmu, bukan ilmu hitam ya😂😂. Melainkan cara untuk membuat gadget populer post yang menarik tapi dengan tampilan yang responsive tentunya. Jika sebelumnya saya sudah memberikan tutorial Cara membuat popular post ala evo magz. Tapi pada kali ini saya akan memberikan tutorial membuat populer post yang responsive dan keren ala template Sang SEO.

Cara membuatnya pun sangat  mudah sobat, jika belum tau dengan tampilannya, sobat bisa lihat screenshotnya di bawah ini.

Dan berikut cara membuat popular post ala Sang SEO yang sangat responsive

Cara membuat popular post keren responsive Sang SEO

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 css di bawah ini sebelum/diatas kode ]]></b:skin> atau </style>. Gunakan "CRTL+F" agar lebih mudah untuk mencari kode tersebut

/*Custom Popular Post*/
.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{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;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;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

5. Terakhir, sobat jangan lupa tinggal klik Simpan

Nah itulah cara untuk membuat popular post keren nan responsive layaknya template Sang SEO yang memiliki struktur yang responsive, dengan memasang kode diatas, tampilan blog sobat sekarang akan menjadi lebih menarik.

Tutorial cara membuat popular post pelangi seperti evo magz

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.