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;
6. Save your template and you are all done!
EmoticonEmoticon