2 Mengubah Tampilan Widget Popular Posts

Do you want to share?

Do you like this story?

Widget popular posts pada sidebar memiliki fungsi yang sangat penting bagi blog maupun website. Dengan widget tersebut, para pengunjung akan dengan mudah menemukan artikel mana saja yang paling menarik pada blog kita. Untuk itu kali ini kita akan membahas bagai mana cara memasang widget popular posts dan cara mengubah tampilannya agar lebih enak dilihat oleh pengunjung. :D

  Memasang widget popular posts       

Pada tahap pertama, cara memasang widget kurang lebih adalah sebagai berikut:

• Masuk ke Blogger > Layout > Add a Gadget
• Pilih widget Popular Post
• Kemudian atur konfigurasinya sesuai insting ^^, contoh: 

•   Klik Save

Pada tahap ini proses pemasangan widget telah selesai. Setelah pemasangan, sekarang saatnya untuk merubah tampilan widget Popular Posts agar terlihat lebih menarik.

 Mengubah tampilan widget popular posts    

• Kembali ke Blogger > Template > Edit HTML
• Cari kode ]]></b:skin> pada template anda (untuk lebih mudah tekan Ctrl+f ).
• Selanjutnya pastekan kode CSS berikut di atasnya.

/*--- Popular Post --- */

 .PopularPosts .item-thumbnail {
 padding: 3px;
 border: 0px solid #999;
 background-color: #fff;
 }

 .PopularPosts img {
 height: 40px;
 width: 40px;
 padding:2px;
 -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);
 }

 .PopularPosts .widget-content ul li {
 list-style: none;
 width:314px;
 padding:2px;
 }

• Klik Save Template

Selesai.. Widget yang sudah diganti kurang lebih akan terlihat seperti gambar di bawah.

 Penting :    

.PopularPosts img adalah tag untuk menentukan ukuran gambar sedangkan width:314px; adalah ukuran lebar widget, silahkan ganti sesuai tampilan blog anda.

Semoga artikel kali ini bisa bermanfaat buat semuanya. Selamat mencoba dan semoga berhasil. ^^

Tweet
Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Trik Tutorial di inbox anda: