Kamis, 22 Desember 2011

Popular Posts (Personalisasi Tampilan Widget Popular Post Pada Blogspot)

tampilan popular post
Widget entri populer atau popular post pada blog adalah widget bawaan dari blogspot yang bisa kita pasang di blog. Sayangnya secara default tampilan widget ini sangat terlihat amburadul. Untuk itu kita perlu sedikit mempersonalisasi tampilan widget popular posts tersebut agar lebih indah dipandang mata. Dan tentunya sesuai dengan tampilan blog kita.

Perhatikan perbedaan tampilan widget popular posts sebelum dan sesudah di personalisasi

Sebelum di personalisasi Setelah di personalisasi
tampilan popular post 2
tampilan popular post 3
Ikuti langkah-langkah berikut untuk merubah Tampilan Widget Popular Post yang sesuai dengan keinginan kita Pada Blogspot;
  • Pastikan, Anda telah menambahkan widget popular posts pada blog Anda terlebih dahulu.
  • Expand Widget Template dan letakkan kode CSS berikut diatas kode ]]></b:skin>
#Tampilan-populer {
font-size: 11px;
overflow: hidden;
margin-top: 5px;
padding : 0; }
#Tampilan-populer ul {
width: auto;
overflow: hidden;
list-style-type: none;
padding: 0;
margin: 0; }
#Tampilan-populer li {
padding: 3px;
margin: 0 0 5px;
list-style-type: none;
float: left;
height: auto;
overflow: hidden;
background-color:#eaeaea;
border:1px dotted #ccc;
line-height: 12px;
text-indent: 0px;}
#Tampilan-populer li a {
margin-left: 0; }
#Tampilan-populer li a img {
margin-top: 0;
float: left; }
  • Selanjutnya anda cari kode <div class='widget-content popular-posts'> dan ganti kode <ul> yang ada dibawahnya dengan kode:
    <div id='Tampilan-populer'>
    <ul class='populer'>
  • Terakhir, cari kode </ul> yang pertama kali ditemukan setelah kode <div class='widget-content popular-posts'> diatas. Jika sudah ketemu, letakkan kode </div> dibawah kode </ul> tersebut.
  • Simpan template kamu untuk melihat hasilnya.
Catatan:
  • Pastikan untuk mem-backup template sebelum melakukan pengeditan. Sekedar jaga-jaga jika terjadi error.
  • Tampilan bisa kamu sesuaikan lagi dengan keingginan kamu. Cabalah mengutak-atik value kode CSS yang telah diletakkan diatas ]]></b:skin> tadi.
Sumber: (http://www.iskaruji.com)

0 komentar:

Poskan Komentar

 
Copyright © . RALEOPA_Q - Posts · Comments
Theme Template by BTDesigner · Powered by Blogger