Cara Membuat Popular Post Berwarna Pada Blog

Desain popular post yang satu ini mungkin sudah pernah sobat jumpai di blog yang pernah sobat kunjungi. Nah kali ini saya akan membagikan caranya agar blog sobat pun memiliki popular post seperti itu. Loh kenapa adminnya tidak pakai? Di blog saya yang satu ini tidak saya terapkan,dikarnakan popular post dari template blog bawaan ini sudah bagus. Itu berkat jasa mas sugeng :D,sekali lagi makasih mas. Namun diblog saya yang lain sudah saya terapkan kok,dan tampilannya pun dinamis dan mewah. Lihat gambar dibawah ini :

Berikut cara membuat popular postnya :

1.   Silahkan login ke akun blogger sobat.
2.   Masuk ke menu "Template".
3.   Ketik Ctrl+f,lalu sobat cari kode ]]></b:skin>
4.   Sobat copy code/script di bawah ini,tepat di atas code 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: 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 */

5. Simpan.

Tweet