Cara Bikin / Membuat Tampilan Populer post Lebih Keren dan Menarik

Pada artikel saya kali ini tentang bagaimana merubah atau membuat tampilan populer post atau post terpopuler default bawaan blog menjadi lebih keren dengan urutan nomer dan thumbnail/gambar, seperti yang saya terapkan pada widget blog saya dan bisa anda lihat di samping kanan artikel ini, yang saya beri judul "Hot Topik" .Bagaimana? keren kan?,hehe

oke lanjut saja ke pokok pembahasan, saya akan share bagaimana cara menerapkan nya, silahkan di simak baik-baik di bawah ini.

Jika belum ada widget populer post nya bisa memasang nya terlebih dahulu, supaya lebih jelas nya saya beri gambaran saja :

• Pertama-tama masuk ke akun Blogger anda
• Masuk ke Layout dan klik "Add a Gadget"
• Pilih "Popular Posts" pada list yang ada
• Anda harus menyesuaikan settingan popular post seperti gambar dibawah ini:

 

hilangkan tanda ceklis pada "image thumbnail" dan juga "snippet". Serta pilih 7 sampai 9 post yang akan tampil pada postingan, karena akan lebih bagus seperti itu. Terlihat nyaman dan clean. Sebenernya anda bisa menampilkan gambar dan snippet pada popular post, hanya saja akan terlihat tidak menyatu, kurang rapi dan anda harus mengedit lagi kode CSS3nya untuk merapikannya.

•  Lalu save jika sudah selesai

Berikut nya Cara meletak kan kode css nya pada </b:skin> 

1. Masuk ke dashboard
2. klik template lalu edit Html
3. Cari kode </b:skin> untuk mempermudah bisa tekan Ctrl dan F secara bersamaan lalu enter

Simpan kode di bawah ini tepat di atas nya:

/*--- Pepin Nono Popular Posts --- */
    .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: #106FE4;
    color: #ffffff;
    position: relative;
    font-weight: normal;
    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;
    }

Catatan :

1. Untuk mengubah background nomor kotak, edit #106FE4; bisa lihat di sini 
2. Kode #ffffff adalah kode warna dari nomor di dalam kotak.
3. Secara default, kode diatas akan menghasilkan bentuk Kotak. Untuk mengubahnya kedalam bentuk bulat atau oval , anda bisa memasukan kode : border-radius:15px; setelah kode box-shadow: 1px 2px 9px #666666; 
4. Terakhir simpan/save template sobat dan lihat hasil nya.

Sekian tutorial singkat dari saya, semoga bermanfaat dan bisa jadi referensi ya,.

Salam.