Cara Membuat Populer Post Rainbow



Membuat Popular Post Rainbow. Jika Anda mempunyai website atau blog tentunya widget popular post sangat penting untuk dicantumkan di halaman homepage atau lebih tepatnya di bagian sidebar. Keuntungannya supaya visitor blog  dapat dengan mudah mengetahui artikel yang banyak di buka atau dikunjungi di blog sobat. Para master blogger tentunya terus melakukan inovasi supaya popular post ini kelihatan lebih menarik. Salah satunya popular post rainbow, dikatakan demikian karena memiliki banyak warna yang cukup menarik. Jika Anda berminat memasangnya, Silahkan ikuti tutorial berikut ini:


Cara Membuat Populer Post Rainbow

1. Login ke akun blogger
2. Masuk ke menu Templates > Edit HTML
3. Cari kode ]]></b:skin> copi-kan kode berikut tepat diatasnya


/* 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: 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 +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: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}
/* Rainbow Popular Post Style End */


4. Klik Pratinjau  kemudian Simpan Template

5. Lihat hasilnya 

Demikian Tutorial singkat tentang Cara Membuat Populer Post Rainbow, Jika anda tertarik memasangnya Silahkan coba sendiri di blog anda, Selamat mencoba. Terima kasih
10 Komentar di Blogger
Silahkan Berkomentar Melalui Akun Facebook
Silahkan Tinggalkan Komentar Anda

10 komentar:

Yanuar Catur said...

Mantep gan tipsnya...

Bagus Hermawan said...

mantep mas infonya, dengan begitu bisa jadi lebih menarik :)

Unknown said...

bagus sekali ini infonya,, saya coba dulu ya sob,,terimakasih sudah berbagi..

Unknown said...

wah kalo saya pilih yang bawaan blogger aja bo, lebih ringan :D

Sunandar said...

wah keren2.. simpen dulu ya gan scriptnya :)

Anonymous said...

Keren bang ....

adattifa Blog said...

saya pernah pasang ni om tapi saya udah copot lagi

dunia maya said...

keren mas,,,
izin save,,, kpan" saya cba

Masasha said...

Wah bungkus ah ... bagus ini ..

Anonymous said...

wah keren itu gan, nice post :-)
.
kunbal>> http://lensaglobe.blogspot.com

Post a Comment

Maaf, komentar anda akan di moderisasi terlebih dahulu
1. Berkomentarlah dengan kata-kata sopan dan tidak menyinggung
2. No sara, No spam, No junkers