Widget / HTML Popular Posts

Assalamu'alaikum..selamat siang para sobat tentunya para webmaster sudah tau trik ini tapi untuk para pemula bisa diterapkan di blognya bagi yang berminat. Widget selain berguna untuk menaikan trafik pageview pada blog kita juga akan mempercantik tampilan.

Memasang widget Popular Post secara baik dan unik tentu akan menarik perhatian pengunjung untuk mengklik dan menambah waktu kunjungannya ke blog kita, sehigga bounce rate blog akan semakin kecil, dengan begitu nilai kita akan bertambah dimata search enggine maupun Alexa.

Hanya saja, widget bawaan blogger ini memiliki struktur tampilan yang kurang sedap. Apalagi dengan pengaturan yang rumit jika hendak merubahnya. Hal ini sukses membuat banyak blogger mengurungkan niatnya untuk memasang widget ini di blognya.

Disini kita akan membahas pemecahan masalah ini dengan mudah. Merubah dan Membuat Popular Post di Blogspot Lebih Ramping tak mesti harus berurusan dengan pengaturan di mode HTML, kita bisa merubahnya tanpa harus pusing dengan susunan script.

Ini contoh tampilan Popular Post yang akan kita buat. atau bisa lihat di Popular Posts di Blog saya ini

Namun sebelum membuatnya, Anda harus mengaktifkan dulu widget popular post ini di dasboard Anda. Caranya :

Masuk ke Tata Letak, lalu pilih Tambahkan Widget dan cari Entri Populer. 

Setalah itu centang thumbnail gambar, lalu Simpan. 

Jika telah aktif, kita masuk ke Cara Membuat Popular Post di Blogspot Lebih Ramping, ikuti cara-caranya berikut ini :

Pertama-tama copy script CSS dibawah ini.

* Popular Post Widget by Agus PayTren~

----------------------------------------------------------------- */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  outline:none;
}
.PopularPosts ul {
  margin:.5em 0;
  list-style:none;
  font:normal normal 11px/1.4 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
  color:#cc0056;
}
.PopularPosts ul li img {
  display:block;
  width:35px;
  height:35px;
  float:left;
}
.PopularPosts ul li {
  background-color:#ddeeff;
  border: 1px dashed;
  margin:1% .5em -5% 0;
  padding:.5em 1.5em .5em .5em;
   position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:Bold;
  font-size:120%;
  color:#3274d7;
  text-decoration:none;
}

Lalu login ke akun blogspot Anda. Pada tab disebelah kiri klik Template lalu Sesuaikan.

Pada tampilan pengaturan pilih Tingkat Lanjut, lalu Tambahkan CSS. Paste script CSS yang diatas kedalam kotak yang disediakan. Jika Anda telah banyak menambah script CSS, paste dibagian paling bawah saja.

Keterangan :

Anda bisa merubah ukuran dan jarak tampilan. Silahkan mengubah script sesuai keinginan. Salah satu contoh script yang bisa Anda rubah adalah background-color:#f3f3f3; pada bagian .PopularPosts ul li {. Rubahlah warga #f3f3f3 dengan yang Anda inginkan, jika ingin tampilannya putih saja ganti dengan kata white atau #fffff atau kalau transparant bisa #ff000000 dan Jika telah selesai dengan tampilan yang diinginkan silahkan klik Terapkan ke blog.

Kini tampilan Tulisan Terpopuler Anda akan berubah dari yang jaraknya jarang-jarang menjadi sedikit lebih hemat space. Lumayan kan hehehe... jika terkendala silahkan hub. saya atau komen dibawah ini..

selanjutnya Post tentang Widget / html / javascript Recent Post