Cara Modifikasi Widget Popular Post di Blog

FARESPO - Jika anda adalah seorang blogger, khususnya yang menggunakan platform blogspot, tentunya anda sudah cukup ahli bukan mengotak-atik "jeroan" pada tampilan blog anda, terlebih lagi jika anda merupakan seorang yang telah berpengalaman dalam dunia blogging, namun bagi anda yang baru menekuni dunia blogging, inilah waktu yang tepat bagi anda untuk mengasah kepiawaian anda, karena siapa tahu nanti anda bisa menjadi salah satu master di dunia blogsphere, hehe.

Nah, bagi anda yang menggunakan platform blogspot, tentunya anda sudah mengetahui bukan berbagai macam widget yang telah disediakan oleh pihak blogspot pada halaman tata letak, sederhananya itu semua merupakan widget yang orisinil dan belum dimodifikasi, jadi jika anda ingin memodifikasi salah satu dari widget disana, anda bisa mengatur atau mengotak-atiknya lewat Edit HTML, tepatnya anda cukup menambahkan beberapa bait kode CSS3 saja, maka nanti tampilanya akan berubah sesuai dengan perintah dari kode CSS3 tadi.

Pada chapter modifikasi widget blog ini, saya ingin membahas mengenai salah satu modifikasi dari widget yang cukup penting di blogspot, yakni popular post, kegunaan widget ini adalah menampilkan artikel-artikel atau konten yang populer di blog anda dalam jangka waktu selamanya, 1 bulan, 1 minggu, dll. Nantinya kita akan memodifikasi widget popular post ini menjadi seperti rounded corners, atau berbentuk seperti oval yang memanjang.

Sebenarnya postingan ini juga sudah pernah saya bagikan sebelumnya tentang cara modifikasi widget popular post blogger, hampir sama juga seperti widget yang akan saya bahas ini, namun hanya berbeda dari segi tampilan saja, tujuanya adalah 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 kode ]]></b:skin> (gunakan CTRL+F).

5. Lalu letakkan kode berikut ini tepat 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 informasi terbaru tentang 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, semoga bermanfaat, dan selamat berkreasi, Happy Blogging!

Via Bloggertrix

Tweet