Cara Menciptakan Popular Post Blog Simple Dan Menarik
Wednesday, 30 April 2014
Edit
Widget Popular post bawaan dari blogger jika kita lihat-lihat kurang menarik, kurang elegan. Apakah kau ingin mengubah popular post menjadi lebih Simple dan Menarik? Saya akan menawarkan 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 sajian Layout -> add gadget/tambah gadget/widget
3. Pilih gadget popular post
4. Atur ibarat gambar dibawah ini, ubah Most viewed menjadi "All time", hilangkan centang pada 'image thumbnail dan 'snippet'
5. Simpan widget anda
6. Sekarang masuk ke sajian 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 instruksi berikut ini diatas kode ]]></b:skin>
/* Popular Post by */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMvcS05vNzVfKg4L6WL7PO0WmpvL84Da8ItL1N9ICEZzAWqrJJh3BxAZzawRljU6KtESnov0yIpcPzp817jQdjY-xSdmf2iKBGdCSVsxfX5bnMtAk9Q0oDnQxmgjliYSHvDyVzQx-A6vah/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 --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMvcS05vNzVfKg4L6WL7PO0WmpvL84Da8ItL1N9ICEZzAWqrJJh3BxAZzawRljU6KtESnov0yIpcPzp817jQdjY-xSdmf2iKBGdCSVsxfX5bnMtAk9Q0oDnQxmgjliYSHvDyVzQx-A6vah/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 --- */
Anda sanggup melaksanakan perubahan untuk menyesuaikan tampilan default dari instruksi di atas:
- Untuk mengubah gambar bullet, gantilah link gambar yang bercetak tebal pada instruksi di atas dengan URL bullet Anda.
- Untuk mengubah warna perbatasan dalam mode aktif editlah bab ini #dddddd
- Untuk mengubah warna perbatasan pada dikala ditunjuk mouse edit bab 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, agar artikel ini bermanfaat.