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. Aslinua merupakan gadget popular post bawaan blogger, hanya saja dilakukan penambahan kode CSS tertentu pada template sehingga tampilam 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-warna pelangi dibawah ini

Baik sobat, langsung saja inilah cara memasang rainbow popular post di bloger:

• login ke dashboard blogger anda
• pilih menu template> edit HTML
• cari kode ]]></b:skin> pada template
• copy script dibawah ini dan paste tepat diatas kode ]]></b:skin> tadi

 /*Rainbow Popular post StyleStart*/
#PopularPosts1 ul li a:hover{color:#fff,text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust; auto;-webkit-text-stroke-widht; 0px; color:#333333; display: block;font-family:Georgia, "Times New Roman", Times, serif. font-size: 12px; font-style; normal; font-fariant: normal; font-weight: normal; letter-spacing; normal; lne-height; 18px; margin; 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding; 0px; text-align: -webkit-auto; text-decoration: none!impportant; text-indent: 0px; text-transform: none; white-space: normal; windows: 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 */

• save/ simpan template anda
• kemudian untuk setting pada gedget popular post sobat hasur mengaturnya seperti gambar dibaeah ini, hilangkan semua tanda centang (checklist) pada tulisan tampilan

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

• silahkan mencoba mengutak-atik sendiri kode CSS diatas untuk jenis atau ukuran font warna background dan seterusnya. Nmun jangan lupa backup dulu kode templatenya

sekian dari saya,
semoga dapat membeeri manfaat kepada pembaca

Posted by Kang Syahid on Kamis, 20 Juni 2013 - Rating: 4.5

Title : CARA MEMBUAT WIDGET POPULAR POST WARNA PELANGI
Description : Cara membuat widget popular post warna pelangi-Widget artikel populer warna-warni dengan style belah ketupat ini ada juga yang menyebutnya R...

Tweet