6.3.13

Tutorial : Popular Post Mine Version

Author : Nabila Medan Time : 3/06/2013 06:17:00 PM Total Comment : 13 Label :




1. Dashboard > Layout > Add a Gadget > Popular Posts
2. Untick pada image thumbnail dan snippet
3. Save!


Langkah seterusnya...
4. Dashboard > Template > Edit HTML > Tick Expand Widget
5. Search code ]]></b:skin>
6. Copy code yang nabila beri dan paste sebelum code ]]></b:skin>
7. Preview dan save!

Code :
/* Rainbow Popular Post by Nabila Medan */#PopularPosts1 ul li a:hover{font-style: italic; font-weight: bold; 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: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; text-align:center; border-radius:0px 0px 25px 0px; color:#fff}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#febed7;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:#bbb;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:#febed7;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:#bbb;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:#febed7;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:#bbb;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#febed7;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#bbb;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#febed7; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#bbb;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;padding:10px;}

13 comments

Wednesday, March 06, 2013 6:51:00 PM Delete! [Reply Comment]

Thanks kak Nabila Medan. Macam mana plk nak buat sidebar macam kak Nabila? cantik

Wednesday, March 06, 2013 8:07:00 PM Delete! [Reply Comment]

nanti nak cuba juga la

Wednesday, March 06, 2013 8:21:00 PM Delete! [Reply Comment]

nak cuba la NM...thanks! :)

Wednesday, March 06, 2013 8:47:00 PM Delete! [Reply Comment]

@NUR ASMA' BINTI MUHAMAD SAH sama-sama. Insya-Allah nanti ya :)

Wednesday, March 06, 2013 8:47:00 PM Delete! [Reply Comment]

@Ainim Suju silakan :D

Wednesday, March 06, 2013 9:18:00 PM Delete! [Reply Comment]

done !

Wednesday, March 06, 2013 10:39:00 PM Delete! [Reply Comment]

Comel la..
tapi cam tak sesuai nak letak kat blog saya... huhuhuhuhu
but thanks for sharing..
very nice thing to share... :)

Friday, March 08, 2013 5:39:00 PM Delete! [Reply Comment]

shad guna tutor ni,, tq. hehe

Saturday, March 23, 2013 3:56:00 PM Delete! [Reply Comment]

cantik..saya ikut tutor ni....moga maju jaya... :)

Monday, April 22, 2013 7:07:00 PM Delete! [Reply Comment]

cik siti da try...menjadi!! thanks ^^

Saturday, May 25, 2013 12:47:00 PM Delete! [Reply Comment]

Thanks for this Tuto, Kak Nabila Medan! Menjadi!

Wednesday, November 20, 2013 4:51:00 PM Delete! [Reply Comment]

akak buat tuto ni ye dik..tuka kod kaler :)

Friday, November 29, 2013 12:44:00 AM Delete! [Reply Comment]

Scha guna eh! TQ!

Post a Comment
Related Posts Plugin for WordPress, Blogger...