Cara Membuat Popular Post Blog Simple dan Menarik
Posted by Ngurah Jaya Antara
on
0
Widget Popular post bawaan dari
blogger kalau kita lihat-lihat kurang menarik, kurang elegan. Apakah kamu ingin mengubah popular post menjadi
lebih Simple dan Menarik? Saya akan memberikan tutorialnya,
dijamin blog anda tidak akan bertambah berat tapi blog anda akan tetap menjadi
lebih menarik.
Cara Membuat Popular Post Blog Simple
dan Menarik:
1. Login dulu ke blogger.com
2. Pilih menu Layout -> add
gadget/tambah gadget/widget
3. Pilih gadget popular post
4. Atur seperti gambar dibawah ini,
ubah Most viewed menjadi "All time", hilangkan centang pada 'image
thumbnail dan 'snippet'
5. Simpan widget anda
6. Sekarang masuk ke menu Template
7. Backup dulu templatenya untuk
jaga-jaga
8. Klik edit HTML
9. Tekan Ctrl+F { Biar
Cepet }
10 Cari kode ]]></b:skin>
11. Kemudian letakkan kode berikut
ini diatas kode ]]></b:skin>
/* Popular Post by Ngurah Jaya Antara */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi_xCxV52ySYvWCTHU5M2jbgocIyITx_xBUssOnARhwH91y-kZg9OFHYstxK0oc_f4EJLA8dgKazi36-r5ZzWP8tPUR6RV6wuOknrbE0PRq0j58yei1SkdltxhK0ki4Pdem1nM06lzqQhB/s400/33.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);
list-style-type: none;
margin: 0px 0px 5px;
padding: 5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius: 10px 10px 10px 10px;
}
.popular-posts ul li:hover {
border:1px solid #666666;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
/*--- End Popular Posts by Ngurah Jaya Antara --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi_xCxV52ySYvWCTHU5M2jbgocIyITx_xBUssOnARhwH91y-kZg9OFHYstxK0oc_f4EJLA8dgKazi36-r5ZzWP8tPUR6RV6wuOknrbE0PRq0j58yei1SkdltxhK0ki4Pdem1nM06lzqQhB/s400/33.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);
list-style-type: none;
margin: 0px 0px 5px;
padding: 5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius: 10px 10px 10px 10px;
}
.popular-posts ul li:hover {
border:1px solid #666666;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
/*--- End Popular Posts by Ngurah Jaya Antara --- */
Anda dapat melakukan perubahan untuk
menyesuaikan tampilan default dari kode di atas:
- Untuk mengubah gambar bullet, gantilah link
gambar yang bercetak tebal pada kode di atas dengan URL bullet Anda.
- Untuk mengubah warna perbatasan dalam mode
aktif editlah bagian ini #dddddd
- Untuk mengubah warna perbatasan pada saat
ditunjuk mouse edit bagian ini #666666
12. Dan terakhir, simpan Template
Anda
Popular Post anda akan lebih menarik
dari sebelumnya. Demikianlah artikel mengenai Cara Membuat Popular Post Blog
Simple dan Menarik, semoga artikel ini bermanfaat.
Tagged as: TIPS & TRIK, Tutorial Blog
GET UPDATES
Jangan sampai ketinggalan update terbaru. Subscribe dan dapatkan update langsung via email
BACA JUGA