Buat Widget Popular Posts Di Blogmu Jadi Berwarna-Warni Dan Menarik

Cara menciptakan widget popular post yang menarik, Popular posts yaitu sebuah fitur gadget yang disediakan oleh blogger secara default untuk menampilkan postingan-postingan yang sedang terkenal dikunjungi oleh visitor dalam kala 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 menciptakan 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 menciptakan widget popular posts yang menarik ini.

Cara menciptakan widget popular posts berwarna-warni dan menarik

1. Masuk dasboard blogger.

2. Pilih hidangan Layout.

3. Tambah gadget gres pada Popular posts.

4. Isi semua form yang ada. Untuk display tampilan jumlah postingan populer, dapat 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 hidangan Template.

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

8. Letakkan aba-aba berikut sempurna diatasnya. (kodenya dapat 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 menciptakan 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>

Tweet