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!
Related Posts
- Cara membuat Twitter Fans Box melayang Sumber: mytechcafe.blogspot.com Banyak web masters menggunakan media twitter sebagai media informasi blognya kepada pembaca. Twitter ...
- Cara membuat Efek Shadow (bayangan) pada text dan box Shadow adalah bayangan yang terbentuk berdasarkan arah cahaya yang datang. Mana mungkin sih ada orang yang tidak mengetahui apa itu bayangan (sh ...
- Menemukan dan menghapus Links Jelek (Unnatural Links) Anda mungkin telah membuat beberapa link untuk situs Anda dimulai dari pembuatannya. Tetapi backlink tetap merupakan faktor penting dalam peringka ...
- Percepat Loading blog dengan cara compress template Banyak developments baru yang muncul terus bergantian di bidang Web Development, banyak peluang baru sekarang tersedia untuk lebih mengoptimalkan ...
- 10 Best Desktop SEO Software to Optimize Your Site Whoever said you need to go to online services each time you want to look over at the Search Engine Optimization of your website? SEO is not a one ...
- 5 Style Keren Email Subscription / Newsletter widget Hari ini saya telah mengumpulkan beberapa buah widget newsletter atau email subcribe sederhana dari berbagai blog. Menyediakan Newsletter mengg ...
AD-BLOCKER DETECTED!
