Skip to content Skip to sidebar Skip to footer
Cara Membuat Popular Post Keren di Blog

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.

Cara Membuat Popular Post Keren di 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 :
  1. Klik Layout
  2. Pilih Add Gadget Pada Sidebar (otomatis akan memunculkan menu gadget blogger)
  3. Pilih Popular Posts
Cara Membuat Popular Post Keren di Blog

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 Pertama

/*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}
.PopularPosts ul li:nth-child(1){background-color:#111;}.PopularPosts ul li:nth-child(2){background-color:#222;}.PopularPosts ul li:nth-child(3){background-color:#333;}.PopularPosts ul li:nth-child(4){background-color:#444;}.PopularPosts ul li:nth-child(5){background-color:#555;}
.PopularPosts ul li:nth-child(6){background-color:#666;}.PopularPosts ul li:nth-child(7){background-color:#777;}.PopularPosts ul li:nth-child(8){background-color:#888;}.PopularPosts ul li:nth-child(9){background-color:#999;}.PopularPosts ul li:nth-child(10){background-color:#aaa;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}.PopularPosts .item-snippet{font-size:11px}
Popular Post Keren Keren Warna-warni
popular post style 1


Popular Post Style Kedua

/*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}
/* Wdit 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}
Popular Post Keren Keren Warna-warni
popular post style 2

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}
Popular Post Keren Keren Warna-warni
Popular Post style 3

Popular Post Style Ke Empat

/* Popular Post */
.popular-posts ul {padding-left: 0px;counter-reset: popcount;}
.popular-posts ul li:before {list-style-type: none;margin-right: 15px;padding: 0.3em 0.6em;counter-increment: popcount;content: counter(popcount);font-size: 16px;background: #292D30;color: #ffffff;position: relative;font-weight: bold;font-family: georgia;float: left;border: 2px solid #dddddd;box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {border-bottom: 1px dashed #dddddd;}
.popular-posts ul li:hover {border-bottom: 1px dashed #696969;}
.popular-posts ul li a {text-decoration:none; color:#5A5F63;}
.popular-posts ul li a:hover {text-decoration:none;}
Popular Post Keren Keren Warna-warni
Popular Post Style 4

Popular Post Style Ke Lima

/*Popular Post Blogger*/
.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 0 0 0 !important;padding:10px 20px 10px 10px !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;font-family:arial, sans-serif !important;
font-size:12px;font-weight:bold !important;display:block;position:absolute;top:-5px;right:-5px;border-radius:16px;background-color:#333;color:#fff !important;width:28px;height:28px;line-height:28px;text-align:center;padding-right:0px !important;border:2px solid #fff;}
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;}
.PopularPosts .item-thumbnail {margin:0 0 0 0;}
.PopularPosts .item-snippet {font-size:11px;}
Popular Post Keren Keren Warna-warni
Related Post Style 5

Cara Memasang Popular di Blogger [Blogspot]

Untuk memasang salah satu jenis tampilan Popular Posts diatas, caranya sangatlah mudah yaitu
  1. Hapus terlebih dahulu kode CSS popular post sebelumnya pada template Anda.
  2. Copy salah satu jenis style CSS populat post diatas yang Anda sukai
  3. Selanjutnya, Masuk ke akun blogger ➤ Pilih Theme ➤ Lalu Edit HTML
  4. Cari Kode ]]></b:skin> Kemudian pastekan kode CSS Widget Popular Post yang Anda pilih tepat diatasnya
  5. 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
Load Comments
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Box

strong em u strike
pre code pre code spoiler
embed

Berlangganan via Email