Cara Membuat Widget Popular Post Keren di Blogspot

Hay sahabat blogger, kali ini saya akan membagikan sebuat tips SEO Blog yang akan membuat blog sobat semua terlihat keren dan banyak disukai oleh pengunjung tentunya, kenapa tidak karena kali ini kita akan membuat sebuah widget popular post yang keren dan menarik di blog dan ini juga merupakan sebuah optimasi blog.

Screenshot.

Keuntungan terbesar dari widget ini adalah bahwa kita tidak perlu menginstal Javascript apapun yang menurut saya bikin ribet, yang perlu kita lakukan adalah menambahkan script CSS yang sudah disesuaikan dengan CSS Popular Post Bawaan Blogspot, artinya kita hanya akan mengubah tampilan untuk membuatnya menyatu sempurna dengan Popular Post Bawaan blog Anda.

Baiklah Tips dan trik untuk Cara Membuat Widget Popular Post Keren di Blogspot kali ini sangat mudah, sobat blogger dijamin bisa untuk memasangnya. yuk, simak tutorial cara memasang widget popular post keren dibawah ini:

Menambahkan Widget Popular Post ke Blog
1. Login dulu ke Blogger >> Layout

2. Klik Add a gadget dan pilih gadget "Popular Post" dari daftar yang disediakan blogger
Setinglah persis seperti gambar di bawah ini!

Screenshot 2

Cara Membuat Popular Post Keren di Blog
1. Langsung Pilih Template >> Klik Edit HTML.
2. Cari kode ]]></b:skin> (gunakan CTRL+F).
3. Kemudian letakkan kode berikut ini tepat diatas ]]></b:skin>

#PopularPosts1 ul{ list-style:none; counter-reset:li; padding:8px 0px 1px; left:-7px; width: 220px; margin-left: 25px; } #PopularPosts1 li{ position:relative; margin:0 0 10px 0; padding: 3px 2px 0 17px; left:-5px; width:220px; } #PopularPosts1 ul li{ background: #eee; position: relative; display: block; padding: .4em .2em .4em 2em; *padding: .2em; margin: .5em 0; background: #ddd; text-decoration: none; border-radius: .3em; transition: all .3s ease-out; } #PopularPosts1 ul li:before{ content: counter(li); counter-increment: li; position: absolute; top: 50%; margin: -1.3em; height: 2em; width: 2em; line-height: 2em; font-size: 15px; color: #fff; /* text color of numbers */ background: #FB8835; /* background color of numbers */ border: .2em solid #fff; /* border color */ -webkit-box-shadow: 0 8px 5px -7px #888; -moz-box-shadow: 0 8px 5px -7px #888; box-shadow: 0 8px 5px -7px #888; text-align: center; font-weight: bold; border-radius: 2em; position: absolute; left: 0; transition: all .3s ease-out; } #PopularPosts1 ul li:hover{ background: #eee; } #PopularPosts1 ul li:hover:before{ transform: rotate(360deg); } #PopularPosts1 ul li a{ font: 12px Georgia, serif; /* font size of post titles */ text-shadow: 0 -1px 2px #fff; color: #444; display:block; min-height:25px; text-decoration:none; text-transform: capitalize; } #PopularPosts1 ul li a:hover{ color: #444; }

4. Save dan lihat hasilnya.
Ket:width: 220px; adalah lebar untuk widget popular post, sobat bisa menyesuaikan dengan lebar sidebar blog sobat.

Gimana mudah kan, begitulah tips Cara Membuat Widget Popular Post Keren di Blogspot dengan sangat mudah dan semua sobat bisa melakukannya tanpa ribet dan bisa dilakukan dalam beberapa menit saja.