Pada popular posts bawaan blogger standard sudah cukup sederhana jikalau ditanya menurut saya secara pribadi namun, bisa kita bikin dengan kata sederhana keren. Untuk kesempatan ini saya akan berbagi cara membuat popular posts sederhana keren.

Lengkap dengan panduan gambar cukup dengan sedikit sentuhan pada template html blog kita. Contoh popular posts sederhana keren yang akan kita buat adalah seperti pada gambar dibawah ini.

Cara Membuat Popular Posts Sederhana Yang Keren Lengkap Panduan Gambar

Namun untuk membuatnya sama persis tanpa perbedaan dengan gambar dia atas itu tergantung lebar sidebar blog sobat, kalau ditanya work ... ya jelas work. Baca juga Cara membuat scroll naik turun pada blog lengkap dengan panduan gambar.

Tanpa panjang lebar kita akan mulai bagaimana cara membuat popular posts sederhana yang keren lengkap dengan panduan gambar. Caranya adalah sebagaimana di bawah ini.

Tahap awal,

Seperti biasanya masuk ke www.blogger.com kemudian pada dasbor klik ''Template'' dan klik lagi ''Edit HTML'' tepatnya seperti pada gambar dibawah ini.

Tahap ke dua,

Silakan cari kode ]]></b:skin> untuk mempermudah pencarian tekal Ctrl+F dan isikan kodenya pada kotak pencarian lalu enter. Terlihat tepatnya seperti pada gambar dibawah ini.

Tahap ke tiga,

Setelah menemukan kode ]]></b:skin> terlihat seperti pada gambar diatas, lalu masukkan kode berikut ini ''tepat di atas'' kode ]]></b:skin>.

Kodenya

/*--- General Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzBY8O4S91Cd1wdSwVIH88PeiVgVBQsQ8Y4e4TZxtpZS86Is9Gxe1L5_XM5dsjcSlL2mJ6n6O29iR_bDuXdZHK7D0ZeDMjDUMLh2Kx_qr46nZYa-e__cflPtuC2KlDmzJ9u_H8pcMXcMqd/s400/33.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);
list-style-type: none;
margin: 0px 0px 5px;
padding: 5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius: 10px 10px 10px 10px;
}
.popular-posts ul li:hover {
border:1px solid #666666;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Setelah menempatkan kode diatas, klik ''Save Template'' atau Preview untuk melihat terlebih dahulu sebelum di save. Sampai disini selesai sudah cara membuat Popular posts sederhana yang keren lengkap dengan panduan gambar.

Cara Membuat Popular Posts Sederhana Yang Keren Lengkap Panduan Gambar