Popular post dengan nomor urut otomatis

Cara memasang popular post blogger

1. Pertama-tama masuk ke akun Blogger anda
2. Masuk ke Layout dan klik "Add a Gadget"
3. Pilih "Popular Posts" pada list yang ada
4. Anda harus menyesuaikan settingan popular post seperti gambar dibawah ini: hilangkan tanda ceklis pada "image thumbnail" dan juga "snippet". Serta gunakan 7-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.

Cara memperindah popular post

1. Pertama-tama masuk ke akun Blogger anda
2. Masuk ke bagian Template
3. Dan klik Edit HTML
4. Search for </b:skin>.  Click the black arrow to expand the code.
5. Simpan kode dibawah ini tepat diatas kode </b:skin>

/*--- Ujangyoyo 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: #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; }

• Untuk mengubah background nomor kotak, edit #292D30
• Kode #ffffff adalah kode warna dari nomor dalam kotak penomoran.
• Secara default, kode diatas akan menghasilkan bentuk Kotak. Untuk mengubahnya kedalam bentuk bulat, anda cukup memasukan kode : border-radius:15px; setelah kode box-shadow: 1px 2px 9px #666666;