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

Cara menciptakan widget popular post iyaang menarik, Popular posts iyaakni sebuah fhal tersebutr gadget iyaang disediakan oleh blogger seCara default untuk menampilkan postingan-postingan iyaang 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 baniyaak blogger iyaang mengangap tampilanniyaa kurang menarik. Maka para developer atau pengembang template blog mulai menciptakan widget popular posts iyaang lebih menarik.

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

Lalu bagaimana Cara membuatniyaa? Berikut tahap-tahap Cara menciptakan widget popular posts iyaang 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 iyaang ada. Untuk display tampilan jumlah postingan populer, dapat dirubah menjadi 1 sampai 10. Dalam referensi terpilih 5 postingan.

5. Klik Save untuk menyimpan.

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

6. Menuju hidangan Template.

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

8. Letakkan arahan berikut sempurna diatasniyaa. (kodeniyaa dapat dilihat pada postingan paling bawah)
9. Akhiri dengan Save Template.

Selesai. Silakan lihat perubahan widget popular posts blogniyaa. Makara lebih menarik bukan?

Artikel menarik Atur URL Postingan Blog dengan Cara Ini.

Demikian tutorial Cara menciptakan widget popular posts iyaang 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>