Popular post adalah sebuah widget yang menampilkan beberapa post yang paling banyak dikunjungi atau dibaca. Widget popular post tersedia diblogger secara gratis, tetapi desainnya itu sangat sederhana. Eits ada banyak cara untuk kita memperbagusnya, salah satunya dengan menambah sebuah kode css. Sekarang yang akan saya tunjukan adalah bagaimana memperbagus widget popular post ini. Jika anda tertarik ikuti step-step selanjutnya dan nanti hasilnya akan seperti gambar disamping ini..
Pertama, tambahkan popular post di blog anda (jika belum memasangnya). Ikuti step berikut:
→ Masuk ke Blogger
→ Selanjutnya masuk ke Layout
→ Lalu Add A Gadget
→ Pilih Popular Posts dari daftar gadget dan setting seperti gambar dibawah ini atau terserah anda.
→ Save
Kedua, memasukan kode CSS ke dalam template anda :
→ Pergi ke Templates
→ Masuk ke Edit Html
→ Temukan kode ]]></b:skin> (gunakan fungsi CTRL+F)
→ Copy Kode Dibawah Dan Paste diatas ]]></b:skin>.
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj225o8458kOXBGoNu0vPqySCqnU1z4pKxH6MBojQEXp7mCczWZIdkgowZDAPXxlhPw1NGQDrsqr1_WhH02lu4hwAm6HvtO6-88-YLZNDzIQEo8ppgwJSeYFYTjLUAHRbiCN9KZZuOMOvs/s1600/1.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:2px solid #6BB5FF;
background:#FFFFFF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
color:#78B6F4;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
→ Mengganti hover background (efek warna jika disentuh) #FFFFFF.
→ Untuk Mengubah Warna Link dari Judul, Ganti #78B6F4.
→ Yang berwarna / berlatar biru muda adalah url gambar icon pinggir
→ Save Template dan lihat .. blog agan semakin keren aja :D
Sekian Post tentang Mengedit Popular Posts Blogger dengan CSS3, semoga bermanfaat...! :)
