Nah, bagi anda yang memakai platform blogspot, tentunya anda sudah mengetahui bukan banyak sekali macam widget yang telah disediakan oleh pihak blogspot pada halaman tata letak, sederhananya itu semua merupakan widget yang asli dan belum dimodifikasi, jadi kalau anda ingin memodifikasi salah satu dari widget disana, anda dapat mengatur atau mengotak-atiknya lewat Edit HTML, tepatnya anda cukup menambahkan beberapa bait aba-aba CSS3 saja, maka nanti tampilanya akan berubah sesuai dengan perintah dari aba-aba CSS3 tadi.
Pada chapter modifikasi widget blog ini, aku ingin membahas mengenai salah satu modifikasi dari widget yang cukup penting di blogspot, yakni popular post, kegunaan widget ini yaitu menampilkan artikel-artikel atau konten yang terkenal di blog anda dalam jangka waktu selamanya, 1 bulan, 1 minggu, dll. Nantinya kita akan memodifikasi widget popular post ini menjadi menyerupai rounded corners, atau berbentuk menyerupai oval yang memanjang.
Sebenarnya postingan ini juga sudah pernah aku bagikan sebelumnya tentang cara modifikasi widget popular post blogger, hampir sama juga menyerupai widget yang akan aku bahas ini, namun hanya berbeda dari segi tampilan saja, tujuanya yaitu untuk menyuguhkan banyak opsi dan pilihan modifikasi yang cocok dengan tampilan blog anda.
Cara Modifikasi Widget Popular Post di Blog
1. Login ke Blogger.
2. Pilih Template.
3. Klik Edit HTML.
4. Cari aba-aba ]]></b:skin> (gunakan CTRL+F).
5. Lalu letakkan aba-aba berikut ini sempurna diatas ]]></b:skin>.
/* Kode CSS Modifikasi Popular Post Start */
.farespo-popular-posts ul{padding-left:0px;}
.farespo-popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.farespo-popular-posts ul li a {
font-style: italic;
}
.farespo-popular-posts ul li:hover {
border:1px solid #d10202;
-moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.farespo-popular-posts ul
li a:hover {
text-decoration:none;
}
.farespo-popular-posts .item-thumbnail img {
height:40px;width:40px;
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);
}
.farespo-popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;}
/* Kode CSS Modifikasi Popular Post End */
6. Klik "Save/Simpan" Template.
7. Sekarang menuju ke halaman Tata Letak / Layout.
8. Klik Add / Tambahkan Gadget.
9. Pilih Entri Populer / Popular Posts.
10. Hilangkan centang pada opsi "cuplikan/snippet".
11. Klik "Save/Simpan", dan selesai.
Demikian warta terbaru perihal Cara Modifikasi Widget Popular Post di Blog, simak juga artikel dan ulasan menarik lainya seputar tips trik dan tutorial blog tentang Membuat Menu Navigasi (Navbar) Blue Thin di Blog, agar bermanfaat, dan selamat berkreasi, Happy Blogging!
Via Bloggertrix
Sumber http://farespo.blogspot.com
