Cara Membuat Popular Post Widget Seperti Warna Pelangi

 Sebelum saya berbicara lebih lanjut mengenai postingan kali ini mungkin sudah banyak sekali para blogger yang menuliskan tentang postingan semacam ini, tapi ada baiknya juga apabila saya sendiri ikut serta membagikannya untuk para blogger yang belum tahu dan ingin mempercantik tampilan blognya. Yaps.. , sekarang kita menuju ke topik pembahasan yakni tentang cara Membuat Popular Post Widget Seperti Warna Pelangi. Widget warna-warni dengan tampilan seperti ketupat ini ada yang sering menyebutnya dengan Rainbow Popular Post lantaran warna backgroundnya yang seperti pelangi. Benar kan..? seperti yang terlihat pada gambar dibawah.

Dan sebenarnya ini merupakan widget popular post bawaan Blogger, cuma saja dengan memakai trik penambahan kode CSS tertentu pada template blog sehingga tampilan widget bisa jadi lebih bagus dan keren sekaligus mempercantik tampilan blog kita..
 Silahkan simak cara pembuatan widget popular post dengan warna-warni pelangi dibawah ini.

1. Login ke dashboard blogger sobat.

2. Pilih menu Template > Edit HTML.

3. Carilah kode ]]></b:skin> pada template. Tapi jika sobat susah mencarinya silahkan tekan Ctrl + F.

4. Kemudian 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. Simpan template anda.

6. Lanjutkan untuk mensetting pada gadget Popular Post sobat harus mengaturnya seperti gambar dibawah ini. Hilangkan semua tanda centang / checklist pada tulisan Tampilkan.

Nah jika kita sudah melakukan semuanya dengan benar, maka kita sudah memiliki widget artikel populer atau popular post yang cukup keren dengan tampilan warna-warni seperti pelangi.

Key,,, demikian seklas tentang Cara Membuat Popular Post Widget Seperti Warna Pelangi ini saya share, mudah-mudahan bisa bermanfaat. Terima Kasih.D

Selamat Mencoba !

Sumber : www.joisetrick.us/2013/06/cara-membuat-popular-post-widget.html

Video Embed

The Twins Tiru Gaya Bruno Mars

Anak kecil Tiru Gaya Wonder Girls

No Doubt- Do't Speak Lirik Terjemahan

You and me

Kau dan aku

We used to be together

Kita dulu bersama-sama

Everyday together always

Setiap hari selalu bersama

I really feel That I'm losing my best friend

Kusangat amat kehilangan sahabatku

I can't believe This could be the end

Tak bisa kupercaya ini kan berakhir

It looks as though you're letting go

Ini seakan kau yang mengakhiri

And if it's real Well I don't want to know

Apakah ini nyata? Aku tak ingin tahu

[Chorus:]

Don't speak

Jangan katakan

I know just what you're saying

Aku tahu persis yang kau katakan

So please stop explaining

Maka berhentilah menjelaskan

Don't tell me cause it hurts

Jangan katakan padaku karna itu menyakitkan

Don't speak

Jangan katakan

I know what you're thinking

Aku tahu apa yang kau fikirkan

I don't need your reasons

Aku tak butuh alasanmu

Don't tell me cause it hurts

Jangan katakan padaku karna itu menyakitkan

Our memories

Kenangan kita

Well, they can be inviting

Mereka bisa membawa

To somewhere altogether

Semuanya ke suatu tempat

Mighty frightening

Sangat menakutkan

As we die, both you and I

Saat kita mati, kau dan aku

With my head in my hands

Dengan kepala digenggaman

I sit and cry

Duduk dan menangis

[Chorus:]

It's all ending

Segalanya kan berakhir

I gotta stop pretending who we are...

Ku harus berhenti berpura-pura tentang siapa diri kita

You and me I can see us dying...are we?

Kau dan aku, kubisa melihat kita mati... Akankah?