Popular Posts | Personalisasi Tampilan Widget Popular Post Pada Blogspot

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

Ikuti langkah-langkah berikut untuk merubah Tampilan Widget Popular Post yang sesuai dengan keinginan kita Pada Blogspot;

• Pastikan, kamu telah menambahkan widget popular posts pada blogmu terlebih dahulu. Sementara nikmatin dulu tampilannya yang ancur itu...

• 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.

Moga bermanfaat and Happy Blogging!

Posted in: Blogging,Blogspot,Edukasi,Popular Posts,Tips triks,Tutorial,Widget