Widget Popular Post Versi Warna Warni

Popular post merupakan satu widget yang gemar digunakan oleh setiap blogger. Umumnya widget popular post berguna untuk menarik pengunjung membaca entri yang menadapt rating paling tinggi dalam sesebuah blog. Namun begitu, tema popular dalam yang disediakan oleh blogspot tampaknya kurang menarik perhatian sehingga pengunjung blog tidak persan akan kewujudan widget popular post dalam blog anda.

Jadi untuk memberi cita rasa baru saya berikan tutorial paling mudah dalam membuat widget popular yang lebih menarik dan elegan. Sebab apa menarik ?

Keistimewaan Widget Popular Post

• Mempunyai pelbagai warna
• Valid HTML5
• Mudah dipasang dan digunakan.
• Ringan hanya menggunakan CSS saja.

Langkah Memasang Widget Warna Warni Di Blogspot

1. Seperti biasa, Log in dashboard > Design > Html

2. Salin kod di bawah ini :

#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{position:absolute;top:10px;right:-5px;order-radius:50%;background:#353535;width:40x;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:87%}
#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:10px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
.PopularPosts .item-title a{font: normal bold 36px Segoe UI;font-size:16px;
color: #706f5c;}
.PopularPosts .item-title a:hover{color:#c22400;text-decoration:none}
.widget-content.popular-posts li{font: normal normal 16px Segoe UI}
.item-snippet {height:2.5em; overflow:hidden}

4. Tampalkan kod ini di atas ]]></b:skin>.

5. Selesai.

Untuk melihat hasilnya, Anda hanya perlu tambahkan widget Popular Post yang telah disediakan oleh pihak blogspot.
Untuk kelihatan widget popular ini lebih kemas di blog anda, di syorkan setting widget Popular Post itu hanya memaparkan 5 post sahaja.

 sumber kod : www.sembangcyber.com