Widget popular post atau artikel populer dalam blog dapat meningkatkan jumlah pageview sebuah blog. Hal ini disebabkan karena pengunjung yang datang mungkin saja tertarik dengan artikel populer tersebut dan kemudian akan tertarik untuk melihatnya. Apabila kawan meletakkan 10 artikel terpopuler pada blog kawan maka kemungkinan besar kawan akan mendapat 10 tambahan pageviews dari 1 oarng pengunjung. Namun, hal tersebut bukanlah sesuatu yang pasti atau dengan kata lain seorang pengujung yang datang akan secara pasti mengklik popular post kawan. Tergantung juga, seberapa menarik tampilan dari judul artikel tersebut atau seberapa relevan artikel yang mereka ingin baca dengan artikel populer tersebut.
Popular post / artikel populer adalah artikel yang banyak dilihat oleh pengunjung. sehingga tampilannya pun perlu diperhatikan guna meningkatkan pageview artikel yang lain. Contoh tampilan popular post seperti gambar diatas sangat mudah untuk membuatnya. Jika berminat silahkan simak dan ikuti langkah-langkahnya berikut ini:
3 Langkah Mudah Memasang Popular Post Warna - Warni:
#1. Silakan masuk pada akun blogger Kawan
#2. Kemudian masuk Tata Letak, Tambahkan Gadget, dan pilih Entri Populer, lalu atur dengan judul sesuai yang dinginkan (1) lanjut ke paling banyak dikunjungi pilih setiap saat (2) agar tampilan popular post bisa menampilkan judul dan gambar (3) serta pilih berapa artikel yang akan ditampilkan di popular post sesuai keinginan kawan (4) dan terakhir silahkan klik Simpan (5) untuk lebih jelas lihat gambar dibawah.
#3. Selanjutnya silahkan tambahkan CSS dibawah ini pada template kawan, simpan diatas kode ]]></b:skin> atau </style> untuk lebih memudahkan dalam pencarian kedua kode tersebut silahkan gunakan ctrl + F setelah ketemu silahkan paste CSS nya dan klik Simpan
/*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}
Dan sekarang kawan sudah mempunyai tampilan popular post yang unik, keren, serta berwarna - warni dan lebih menarik pastinya. Sekian penjelasan singkatnya semoga bermanfaat dan Terimakasih sudah berkunjung jika ada hal yang masih mengganjal dan ada yang ingin menambahkan hal-hal lain untuk pembuatan popular postnya silahkan tinglkan komentar kawan. Salam Teman Berbagi. :)
