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 !
0 Comments
Bagaimana Pendapat Anda ?