Free Website Widgets Popular Posts Untuk Blogger

Widget Popular Posts di blogger biasanya selalu ditampilkan dengan gaya default oleh Blogger , dan juga bias kita tampilkan dengan gaya dam warna yang berbeda di blogger dengan sedikit mengedit template. Namun, sangat mudah untuk menyesuaikan Widget Popular Posts di Blogger , Anda hanya perlu mengedit kode acak  yang secara otomatis dibuat oleh Blogger ketika Anda menambahkan posting terbaru dari halaman Tata Letak Anda.

Free Website Widgets  yang berwarna yang akan membuat posting populer yang super indah. Widget Popular Posts ini diciptakan oleh orang lain, tapi saya telah memodifikasi sedikit , sekarang mari kita mulai bagaimana cara menambahkan Custum Widget Popular Posts di blogger. Setelah menambahkan widget ini ke blog Anda , posting populer di blog Anda akan melihat persis seperti yang Anda lihat di gambar.

Bagaimana Cara menambahkan Widget Popular Posts Untuk Blogger ?

Ikuti langkah-langkah berikut ini :

Masuk ke Dashboard Blogger anda

• Arahkan kursor ke tanda panah sebelah kanan atas dan Klik menu template Template -> Edit HTML

• Lalu cari  kode </b:skin> (caranya lihat gambar di bawah ini)

Jika Anda tidak terbiasa dengan halaman baru Blogger HTML, kamu hanya tinggal melihat gambar di atas bagaimana cara  untuk menemukan kode </ b: skin>, jika kamu menemukan kode <b:skin> ... </ b: skin> klik tanda panah di sebelah kiri dan semua kode css akan terlihat.

• Langkah selanjutnya adalah copy kode di bawah ini dan paste diatas kode </ b: skin>:

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 10px 0px -5px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; }
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px;}
#PopularPosts1 img {
border-radius:200px;
width:60px; height:60px;
margin-left:4px;
}

• Langkah terkhir adalah simpan template anda dan selesai....!

Lihat blog kamu untuk melihat Custum Widget Popular Posts Untuk Blogger  yang indah di sidebar. Jika kamu belum menambahkan Widget Popular Posts maka tambahkan dan pilih 5 posts yang ditampilkan.

demikianlah search engine optimisation tips kali ini semoga bermanfaat.

Ceria & Nikmati, jika kamu menghadapi masalah, maka beritahu saya dengan memberikan komentar pada posting ini. Selamat mencoba.. thank..