Saat blogger mengeluarkan widget Popular Posts di tahun 2011, banyak orang senang akan hal itu dan berusaha untuk mengeditnya agar terlihat lebih keren lagi. Popular post adalah sekumpulan postingan yang banyak dikunjungi atau dibaca oleh pengunjung berdasarkan hari, minggu, bulan, atau selama-lamanya menurut perhitungan google analytic. Widget popular post sangat berguna bagi blog karena dapat menambah jumlah page views dan mempermudah pengunjung dalam mengexplorasi blog anda. Hari ini kita akan belajar tentang bagaimana membuat/mengedit popular post dengan menggunakan CSS3 agar lebih indah lagi. Yang akan kita masukan hari ini adalah penomoran pada list popular post. Seperti halnya screenshot di samping atau anda dapat melihat langsung contohnya di popular posts blog saya. Sebelum melanjutkan jangan lewatkan untuk membaca post saya sebelumnya :
Anda dapat mengedit nomor tersebut dengan berbagai bentuk bangun, tetapi yang akan saya bahas kali ini dalam bentuk bulat dan kotak. Untuk menambahkan efek ini cukup mudah, hanya dengan memasukan kode CSS3 ke dalam template anda, kodenya murni CSS3 tanpa java script yang memberatkan loading blog anda. Syarat awalnya anda harus memasang terlebih dahulu popular post blogger di blog anda. Ok, mari kita menuju ke topik pembahasannya, ikuti step by stepnya dengan teliti agar dapat terpasang dengan baik.
Cara memasang popular post blogger
- 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 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.
5. Save jika sudah selesai.
Cara memperindah popular post
Sekarang Anda perlu mengubah gaya default dan mengubah tampilan popular post dengan desain yang kita inginkan dengan menggunakan gaya kustom. Yang dibawah ini adalah cara membuat nomor list dengan bentuk kotak.
- Pertama-tama masuk ke akun Blogger anda
- Masuk ke bagian Template
- Dan klik Edit HTML
- Search for </b:skin>. Click the black arrow to expand the code.
- 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;
}
Customalisasi:
- Untuk mengubah background nomor kotak, edit #292D30 dan lihat kumpulan kode warna DISINI
- 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;
Last Words
Bagaimana hasilnya? sangat keren dan mudah sekali memasangnya bukan? Jadi kesimpulannya, semoga tutorial kali dapat membuat blog anda semakin indah dan jumlah pageviews blog bertambah. Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI dan jika mau copas, cantumin dong Url postingan ini ya !
Sekian post tentang Cara memperindah Popular Posts dengan Nomor Urut Otomatis. Saya telah mencoba yang terbaik untuk membuat tutorial ini sesederhana mungkin untuk dapat anda pahami. Jika Anda masih menghadapi masalah untuk Cara memperindah Popular Posts dengan Nomor Urut Otomatis. Maka jangan ragu untuk bertanya kepada saya. Tinggalkan komentar di bawah posting ini dan saya pasti akan membalas Anda jika ada waktu yang memungkinkan. Maaf bila ada salah-salah kata, semoga tulisan ini dapat bermanfaat bagi anda. Tetap terhubung dengan Ujangyoyo karena akan ada postingan baru yang lebih menarik. Happy Blogging friends!
AD-BLOCKER DETECTED!
