Cara Buat Popular Post Widget Keren Responsive di Blogger ~ NaruZAF

Hallo gayss, gimana kabarnya? Kali ini saya akan berbagi cara membuat Popular Post Widget keren responsive untuk blogger. Tentunya para blogger sangat membutuhkan widget popular post, karena manfaatnya sangat banyak jika di pasang di blog kita. Keuntungan memasang widget popular post sangat banyak, misal keuntunganya dapat membantu pengunjung mengetahui postingan terbaru berdasarkan waktu bisa setiap minggu, hari, dan sepanjang waktu.

Pada tutorial kali ini saya membagikan popular post dengan style elegan dan responsive. Feature popular post pada tutorial ini adalah adanya thumbnail dan angka. Karena popular post sangat berguna dan di butuhkan dan pastinya anda tidak sabar untuk mencoba. Maka langsung aja kita simak tutorialnya.

Cara Buat Popular Post Widget

Langkah awal seperti biasa. Kita buka blog kita lalu pilih Template > Edit HTML.
Setelah masuk mode HTML. carilah kode ]]></b:skin> ATAU </style>
Jika sudah menemukan kode tersebut copy kode di bawah ini tepat di atas kode yang saya sebutkan tadi.

 /* CSS Popular Post */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}
.PopularPosts ul{list-style:none;font-family:'Oswald',Sans-Serif;font-size:13px;color:#919392;margin:.5em 0}
.PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0;     border: 1px solid silver;padding: 2px;}
.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear;    font-family: Open Sans;}
.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear;    border-radius: 10%;font-size: 18px;    padding: 5px;}
.PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab;    border-bottom:1px solid #EFEFEF;transition:all .5s linear;}
PopularPosts ul li:last-child{border-bottom:none;}
.PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;}
.PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;}
.PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;}
.PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;}
.PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear;    font-family: Open Sans;}
.PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}

Terakhir tingal simpan template. Lalu lihat apakah berhasil.
Oh ya jangan lupa setting seerti screenshot di bawah ini.

Dengan adanya Popular Post Widget di Blog semoga pelangan anda semakin mudah untuk menjelajah di blog anda. Demikian tutorial Cara Buat Popular Post Widget Keren Responsive di Blogger yang bisa saya bagikan ke kalian semua. Semoga berhasil.
#Salam Blogger
#Happy Blogging

Catatan : Jika di template anda sebelumnya sudah tepasang CSS Popular Post harap di hapus dulu lalu ganti dengan yang baru.

Jika masih bingung saat memasang popular post widget, silahkan berkomentar di kolom komentar.