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

Cara membuat widget popular post yang menarik, Popular posts yaitu sebuah fitur gadget yang disediakan oleh blogger secara default untuk menampilkan postingan-postingan yang sedang populer dikunjungi oleh visitor dalam masa 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 gres pada Popular posts.

4. Isi semua form yang ada. Untuk display tampilan jumlah postingan populer, mampu dirubah menjadi 1 sampai 10. Dalam pola terpilih 5 postingan.

5. Klik Save untuk menyimpan.

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

6. Menuju menu Template.

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

8. Letakkan isyarat berikut sempurna diatasnya. (kodenya mampu dilihat pada postingan paling bawah)
9. Akhiri dengan Save Template.

Selesai. Silakan lihat perubahan widget popular posts blognya. Kaprikornus 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>

Share :

You may like these posts :

• 
  Cara Mengatur Posisi Widget Berada di Tengah atau Center
• 
  Cara Melihat Prakiraan Cuaca di Kotamu Melalui Blog
• 
  Bagaimana Cara Menambahkan Bing Translator di Blog ?
• 
  Cara Memasang Widget Komentar Terbaru Disqus