Cara Membuat Popular Post Keren Seperti Blog Nagalogia - Popular post adalah widget yang terdapat pada blog, setiap blog memiliki fitur popular post nya tersendiri, fungsinya cukup sederhana, dengan popular post para pengunjung bisa mengetahui postingan apa saja yang sedang populer pada sebuah blog. Keuntungan memakai popular post adalah bisa menambah page view dikarenakan setiap postingan yang cukup populer dapat menarik perhatian visitor sehingga dapat membuat visitor berlama-lama di blog kamu.
Dalam postingan ini saya ingin memberikan tutorial membuat popular post keren seperti blog ini, sebenarnya popular post ini terinspirasi dari web detikcom dan saya modifikasi sedikit. Berikut adalah penampakannya.
1. Oke. Pertama-tama kamu buka dashboard blogger masing-masing, selanjutnya ke Tema Edit HTML.
2. Lalu, tekan CTRL+F untuk mencari kode
/*Widget Popular Post nagalogia.blogspot.com */
#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:72px;display:block;transition:all .3s ease-in-out}#PopularPosts1 ul li{padding:8px 0 4px!important;margin:0;list-style:none;border-bottom:1px solid #fff;font-size:12px;line-height:normal}#PopularPosts1 ul li:first-child{border-top:none}#PopularPosts1 ul li:last-child{border-bottom:none}#PopularPosts1 a:link,#PopularPosts1 a:visited,#PopularPosts1 a:active{font-size:15px;color:#272727!important;display:block;font-weight:500;padding:0!important;margin-left:45px;line-height:1.2em}#PopularPosts1 a:hover{color:#B80103!important;text-decoration:none}.PopularPosts h2{padding-right:.4em;padding-left:1em}.popular-posts ul{padding-left:0;counter-reset:trackit}.popular-posts ul li{border-bottom:1px solid #fff;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all 0.25s linear 0s;counter-increment:trackit}.PopularPosts ul li:before{content:counters(trackit,".");padding:5px 12px 15px 10px;font-size:18px;font-style:italic;font-weight:700;color:#fff;float:left;margin-right:10px;width:13px;height:13px;border-radius:100%;background:linear-gradient(90deg,#1e88e5 0%,#5e35b1 75%,#3949ab 100%);-webkit-linear-gradient(90deg,#1e88e5 0%,#5e35b1 75%,#3949ab 100%)-moz-linear-gradient(90deg,#1e88e5 0%,#5e35b1 75%,#3949ab 100%);display:block}.PopularPosts li:first-child{border-top:1px solid #fff}.PopularPosts li:nth-child(odd){background:#fff}.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}.PopularPosts a:link,.PopularPosts a:visited{color:#2b2b2b;font-size:.9rem}.PopularPosts a:hover{color:#c00}#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}
3. Langkah terakhir, simpan template sobat.4. Selanjutnya masuk ke Tata Letak, setelah itu tambah widget popular post, thumbnail gambar dan cuplikan jangan dicentang, lihat gambar di bawah, selanjutnya simpan, maka lihat hasilnya.
![]() |
Konfigurasi Popular Post |
5. Ohya, kode CSS untuk popular post yang lama silahkan dihapus.
Yah, itulah sedikit tutorial Cara Membuat Popular Post Keren Seperti Blog Nagalogia, semoga bermanfaat, jika ingin bertanya silahkan berkomentar.