Tweet |

Seperti halnya pada tutorial kali ini akan dibahas tentang cara memodifikasi populer posts yang disediakan oleh blogger tanpa harus mengotak-atik javascript pada blog.
1. Menambahkan Default Populer Posts pada Widget
Saatnya anda memasang modifikasi Populer Posts pada widget blog anda dengan langkah seperti ini.- Login Blogger dengan akun anda;
- Pilih Rancangan;
- Klik tab Tambahkan Elemen (Gadget);
- Pilih Populer Posts Blogger;
- Simpan Gadget.

2. Menambahkan kode CSS pada Template
untuk memodifikasi tampilan Populer Posts Default Blogger, anda harus meng-copy paste kode CSS berikut sebelum tag ]]></b:skin>.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJdb8MeCHUXgmc5E8YQQ8JOljZ-pVIIHegoh89EwWFjFTrOfC5J4e4OnC5jz-4lhhfXAAH_o1qpEZjke33rXwaprXgHT0LUoYt9YU-UBciQU-KQvPtW59pYmFR95Wnw7rQDApmQGWhits/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ECECEC;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
Catatan :
- Untuk mengganti image bullet anda silakan ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJdb8MeCHUXgmc5E8YQQ8JOljZ-pVIIHegoh89EwWFjFTrOfC5J4e4OnC5jz-4lhhfXAAH_o1qpEZjke33rXwaprXgHT0LUoYt9YU-UBciQU-KQvPtW59pYmFR95Wnw7rQDApmQGWhits/s400/261.gif
- #ECECEC merupakan background yang bisa anda ganti sendiri.
- Untuk mengganti border-nya bisa anda lihat ini #6BB5FF







5 comments:
mantab tutorialnya
wah.. terima kasih.. berguna sekali.. :)
woww...
keren banget kang..
mohon izin untuk di pakai n di bookmark ^O^
ternyata widget popular posts bisa dimodif ya... langsung coba dullu deh kang fathur
@Sekolah : Ya iyalah, masak ya iya donk... hehehe, smoga berhasil
Komentar anda selalu kami dihargai. Kami akan mencoba untuk menjawab pertanyaan anda secepat mungkin.
Post a Comment