Membuat Popular Posts blogspot lebih Efisien

Yang saya maksud adalah popular post yang disediakan blogspot akan bisa kita setting atau atur sesuka hati. Disini akan saya bagi sedikit tipsnya.
Karena kita tahu bahwa widget bawaan blogger ini memiliki struktur tampilan yang kurang sedap karena hanya menyediakan tampilan standar , Apalagi dengan pengaturan yang rumit jika hendak merubahnya. Hal ini sukses membuat banyak blogger mengurungkan niatnya untuk memasang widget ini di blognya.


Popular posts yang saya maksud adalah sebagai berikut :

Langkah pertama yang harus kamu lakukan adalah :

• Login dulu ke akun blogger mu ( Usahakan menggunakan bahasa Inggris ) ,lalu kamu klik " Layout" kemudian Pilih dan klik "Add widget  , kemudian cari dan pilih " popular posts " ,

• Setelah itu Customize / atur sendiri berapa jumlah postingan yang ingin kamu tampilkan , dkk  , contohnya seperti gambar dibawah ini  , kemudian klik "Save ":

• Lalu cari " Template " , disitu ada 2 pilihan antara "Customize" dan " Edit HTML"  dan kamu pilih " Customize" ( Lihat gambar dibawah ini :

• Lalu klik " Advanced" kemudian scroll kebawah dan pilih/ klik " Add CSS " ( lihat gambar dibawah ini :

• Kamu bisa ligat disana terdapat kotak kosong , kamu masukan kode CSS dibawah ini kedalam kotak tersebut :

/* Popular Post Widget by Kartini ~ 
----------------------------------------------------------------- */
.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:#000000;
}

.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 10%;
  width:45px;
  height:45px;
  float:left;
}

.PopularPosts ul li {
  background-color:#ffffff;
  margin:% .5em -5% 0;
  padding:.5em 1.5em .5em .5em;
   position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight;
  font-size:122%;
  color:inherit;
  text-decoration:none;
}

• lalu klik "Apply to Blog"

• Selesai

# Untuk Width / Height ( Panjang /tinggi ) kamu bisa ganti ukuran sesukamu.

Selamat mencoba