Jumat, 15 Maret 2013

Tips Mempercantik blog

Selamat datang sobat bilgrezt, semoga semuanya dalam keadaan sehat tidak kurang suatu apa. Disini Saya akan berbagi tips dan trik blog tentang cara mempercantik widget popular post bawaan blogger.
Widget popular post ini tampilannya masih standar bawaan dari blogger, namun dengan sedikit modifikasi maka tampilannya akan menjadi lebih menarik untuk di lihat.
Nah berikut ini tutorial untuk membuat widget popular post bawaan blogger biar menarik. Silahkan simak baik2 sambil minum kopi juga boleh hehe,,,,,,

*. Login dulu ke Blogger sobat.
*. Menuju ke layout.
*. Kemudian klik Add a gadget dan pilih gadget "Popular Post" dari beberapa pilihan yang ada.
*. Dan setinglah seperti gambar di bawah ini. ( Sobat pilih most viewed dengan menandai 'All time', serta hilangkan centang pada 'image thumbnail' dan 'snippet' ).
*. Dan simpan widget Anda tadi.



Proses menambahkan widget popular post ke blog sudah selesai, namun tampilannya masih standart bawaan blogger. Untuk merubah tampilannya kita menuju ke proses berikutnya.

Proses mengedit tampilan widgetpopular post.

*. Sobat masuklah ke editing template blog sobat.
* Saya sarankan untuk mem-backup dulu template sobat sebagai antisipasi nantinya jika ada kesalahan.

*. Kemudian klik edit HTML.
*. Sobat cari kode ini ]]>/b:skin>. *. Kemudian letakkan kode di bawah ini di atasnya kode ]]>/b:skin>.

/*Popular Posts*/ .popular-posts ul{padding-left:0px;} .popular-posts ul li { background: url(" http://4.bp.blogspot.com/-7CHpNrL3BIY/UQFD2sPq6LI/AAAAAAAAI8E/Jibvq813XCE/s400/33.gif ") no-repeat scroll 5px 8px rgb(255, 255, 255); list-style-type: none; margin: 0px 0px 5px; padding: 5px 5px 5px 20px!important; border: 1px solid #dddddd ; border-radius: 10px 10px 10px 10px; } .popular-posts ul li:hover { border:1px solid #666666 ; } .popular-posts ul li a:hover { text-decoration:none; }



Setelah selesai nanti tampilannya akan seperti ini



Lumayan beda bukan? Sobat juga bisa mengganti image dan warna background sesuai selera, untuk background tinggal ganti #666666 ganti dengah kode warna lain terserah.

2 komentar:

Zee Dudulz Sang Fenomena mengatakan...

nyimak gan,,mantab tutornya
di tggu kunbal'a

Semut Merah mengatakan...

Makasih sob kunjungannya, ok nanti kunbal :D