Buat Widget Popular Posts di Blogmu jadi Berwarna-warni dan Menarik

Cara membuat widget popular post yang menarik, Popular posts adalah sebuah fitur gadget yang disediakan oleh blogger secara default untuk menampilkan postingan-postingan yang sedang populer dikunjungi oleh visitor dalam periode tertentu. Popular posts ini dikumpulkan dalam satu wadah berupa widget.

Secara default, blogger telah menyediakan widget popular posts ini. Namun banyak blogger yang mengangap tampilannya kurang menarik. Maka para developer atau pengembang template blog mulai membuat widget popular posts yang lebih menarik.

Artikel pilihan Manfaat dan Cara Penggunaan Header Tags pada Postingan Blog.

Lalu bagaimana cara membuatnya? Berikut tahap-tahap cara membuat widget popular posts yang menarik ini.

Cara membuat widget popular posts berwarna-warni dan menarik

1. Masuk dasboard blogger.

2. Pilih menu Layout.

3. Tambah gadget baru pada Popular posts.

4. Isi semua form yang ada. Untuk display tampilan jumlah postingan populer, bisa dirubah menjadi 1 hingga 10. Dalam contoh terpilih 5 postingan.

5. Klik Save untuk menyimpan.

Sampai pada tahap ini, widget postingan blog masih berbentuk sesuai default blogger. Untuk merubahnya sesuai contoh di atas, silakan lanjutkan tahap-tahap berikut.

6. Menuju menu Template.

7. Klik Edit HTML, lalu cari kode ]]></b:skin>.

8. Letakkan kode berikut tepat diatasnya. (kodenya bisa dilihat pada postingan paling bawah)
9. Akhiri dengan Save Template.

Selesai. Silakan lihat perubahan widget popular posts blognya. Jadi lebih menarik bukan?

Artikel menarik Atur URL Postingan Blog dengan Cara Ini.

Demikian tutorial cara membuat widget popular posts yang menarik pada blog. Semoga bermanfaat dan selamat mencoba.

Kode :

/*--- www.bloging-gampang.blogspot.com POPULAR WIDGET STYLE STARTS HERE---*/ #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 40px 0px 0px; 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} /*--- www.bloging-gampang.blogspot.com POPULAR WIDGET STYLE ENDS HERE---*/<style></span></div> </div> </div>