Cara Membuat Widget Popular Post Warna Pelangi

Cara Membuat Widget Popular Post Warna Pelangi - Widget artikel populer warna-warni dengan style belah ketupat ini ada juga yang menyebutnya Rainbow Popular Post dikarenakan warna backgroundnya yang seperti pelangi. Aslinya merupakan gadget popular post bawaan Blogger, hanya saja dilakukan penambahan kode CSS tertentu pada template sehingga tampilan widget bisa jadi lebih bagus dan keren sekaligus mempercantik tampilan blog sobat dong tentunya. Well sobat, silahkan simak cara pembuatan widget popular post dengan warna-warni pelangi dibawah ini.

Baik sobat langsung saja inilah Cara Memasang Rainbow Popular Post di blogger :

1.       Login ke dashboard blogger anda.

2.       Pilih menu Template > Edit HTML.

3.      Cari kode ]]></b:skin> pada template.

4.      Copy script dibawah ini dan paste tepat diatas kode ]]></b:skin> tadi.

/* Rainbow Popular Post Style Start */

#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: 12px; 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 +li +li{background:#d1ffff;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 + li + li +li{background:#c7f25f;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 {background:#f59095;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{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 +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{background:#ff00ff;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li{background:#5faff2;width:90%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li{background:#a9ed04;width:90%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li{background:#ffde4c; 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:3px 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}

/* Rainbow Popular Post Style End */

5.       Save / Simpan template anda.

6.       Kemudian untuk setting pada gadget Popular Post sobat harus mengaturnya seperti gambar dibawah ini. Hilangkan semua tanda centang (checklist) pada tulisan Tampilan.

7.       Nah kalau semua sudah dilakukan dengan benar, sekarang anda sudah memiliki widget artikel populer atau popular post keren dengan tampilan warna-warni pelangi.

8.       Silahkan mencoba mengutak-ngatik sendiri kode CSS diatas untuk merubah jenis atau ukuran font, warna background dan seterusnya. Namun jangan lupa backup dulu kode templatenya ya !

Cukup mudah bukan ternyata Cara Membuat Widget Popular Post Warna Pelangi di blogspot ini ? Tingggal copas kode css diatas pada template dan sobat sudah bisa langsung melihat hasilnya. Semoga bermanfaat dan happy blogging.