Tutorial cara membuat popular post keren responsive

Baca Juga

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.