Cara Membuat Popular Post Keren di Blog

Popular post merupakan widget wajib pada setiap website. Dengan mengaktifkan pengkodean pada popular post maka otomatis postingan terpopuler pada blog kita akan ditampilkan. Jumlah popular post yang dimunculkan merupakan jumlah yang sesuai dengan pengaturan yang sudah di lakukan pada saat penambahan di layout blogger.

Tampilan menarik dari popular post bisa menjadi salah satu daya tarik tersendiri pada tema blog. Ini juga bisa menjadi salah satu strategi yang baik untuk membuat visitor blog berlama-lama pada blog kita sehingga CTR blog semakin tutun dan tentunya ini akan sangat baik untuk peringkat blog.

Jenis style popular post yang paling sering kita jumpai biasanya menggunakan thumbnail [gambar], berwarna-warni dan biasanya para design blogger menambahkan angka atau nomor agar tampilannya semakin menarik.

Nah, bagaimana dengan Anda, apakah mulai bosan dengan tampilan popular post Anda yang sekarang dan ingin merubahnya. Mungkin beberapa style postingan populer blogger dibawah ini bisa menjadi alternatif yang bagus untuk Anda. Yang pasti, tampilannya keren dan SEO Friendly.

Cara Membuat Popular Posts di Blogspot

Jika pada template yang Anda gunakan belum ada widget popular post atau Postingan Populernya, maka silakan tambahkan telebih dahulu pada blogger Anda. Berikut ini caranya.
Login ke akun Blogger terlebih dahulu kemudian :

Klik Layout
Pilih Add Gadget Pada Sidebar (otomatis akan memunculkan menu gadget blogger)
Pilih Popular Posts

Popular Post Warna-Warni Keren dan Responsive

Berikut ini beberapa style popular post yang bisa Anda terapkan pada template blogspot Anda, yang pasti dengan tampilan yang keren dan responsive.

Popular Post Style Ketiga

/* 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 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:normal;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;}
.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;}
.widget-content ul li{margin:0;padding:6px 0px;border-bottom:1px solid #ededed}
.widget-content ul li:last-child{border-bottom:medium none !important}
.widget-content ul li a{color:#333}
.widget-content ul li a:hover{color:#C80441}
.item-date {font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00}

Cara Memasang Popular Post di Blogger [Blogspot]

Untuk memasang salah satu jenis tampilan Popular Posts diatas, caranya sangatlah mudah yaitu

Hapus terlebih dahulu kode CSS popular post sebelumnya pada template Anda.
Copy salah satu jenis style CSS populat post diatas yang Anda sukai
Selanjutnya, Masuk ke akun blogger ➤ Pilih Theme ➤ Lalu Edit HTML
Cari Kode ]]></b:skin> Kemudian pastekan kode CSS Widget Popular Post yang Anda pilih tepat diatasnya
Klik Save Theme lalu lihat hasilnya

Demikian tutorial blogger kali ini tentang Cara Memasang Popular Post Keren di Blog dengan tampilan yang menarik. Semoga bisa diterapkan dengan baik di blog Anda. Terima kasih