Tutorial: Popular Post Yang Cantik & Kemas

       Nak tak popular post yang macam ni? Selalunya kita nampak yang warna warni, kan? Ada jugak popular post yang warna berselang-seli. Yang aku punya ni, totally warna yang seragam, sebab aku tak suka sangat banyak-banyak colour. Tu yang aku ubah tu. 

       Heheh (sorry saya memang pengubah sikit). Tapi basecode ni daripada Nabila Medan. Jadi jangan copy ya? Kesian dia. Aku ubah part warna, font, size font, border radius je. Yang basecode memang totally dia. Ok, lets check it out.

1. Dashboard > Layout > Add a Gadget > Popular Post

2. Sila untick Image thumbnail dan jugak Snippet.

3. Save. Ok tak habis lagi gais, sabar jap. Hihi

4. Pergi ke Template > Edit HTML > Tekan anak panah kat number 11 tu > 

5. CTRL + F, dan carik code ni

]]></b:skin>

6. Jumpa? Kalau dah, copy code kat bawah ni 

/* Rainbow Popular Post by Nabila Medan and reedit by Eyja Masliza*/
#PopularPosts1 ul li a:hover{
font-style: normal; font-weight: bold; color:#ffffff;text-decoration:none}
#PopularPosts1 ul li a {
-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #000000; display: block;
font-family: 'Itim';
font-size: 16px; font-style: justify; 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{
font-family: 'Itim';
position:absolute;top:10px;right:5px;border:2px solid #fff;background:#fceaef;-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; text-align:center; border-radius:0px 25px 0px 0px; color:#F7819F}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {
background:#F7819F;width:90%}
 #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{
content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{
background:#F7819F;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 +li +li{
background:#F7819F;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{
content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{
background:#F7819F;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{
content:"7"}
 #PopularPosts1 ul li:first-child + li + li + li + li + li +li{
background:#F7819F;width:90%}
 #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{
content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li{
background:#F7819F;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{
content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{
background:#F7819F;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{
content:"4"}
 #PopularPosts1 ul li:first-child + li + li{
background:#F7819F;width:90%}
 #PopularPosts1 ul li:first-child + li + li:after{
content:"3"}
 #PopularPosts1 ul li:first-child + li{
background:#F7819F; width:90%}
#PopularPosts1 ul li:first-child + li:after{
content:"2"}
#PopularPosts1 ul li:first-child{
background:#F7819F;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:0px 30px 0px 30px;border:2px solid #ffffff;padding:10px;}

7. Dan pastekan code yang dah copy tadi atas ]]></b:skin>

8. Warna kuning: warna font bila cursor dihalakan.

9. Warna hijau: warna tajuk entri anda,

10. Warna turqoise: font yang digunakan.

11. Warna jingga: background color untuk number

12. Warna purple: border radius untuk kotak number

13. Warna pink: border untuk taju entry anda.

14. Warna merah: tu semua warna background untuk tajuk-tajuk entries anda.

15. Boleh Preview dulu, dah tengok cantik kena dengan warna anda suka, click Save Template.

Nota Pink: Boleh tanya kat komen kalau tak tahu :)