14.10.12

Tutorial : Widget Popular Post Warna-Warni

Author : Nabila Medan Time : 10/14/2012 12:21:00 PM Total Comment : 23 Label :

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ Dan Selamat Petang

1.Blogger Dashboard > Layout > Add A Gadget > Pilih Popular Post
2.Configure Popular Post
3.Sila UNtick pada image thumbnail dan snippet
4.Save!

Langkah Seterusnya!
1.Blogger Dashboard > Template > Edit HTML > Proceed > Tick Expand Widget
2.Ctrl + F , cari 
]]></b:skin>
3.Copy code dibawah ini dan paste diatas code tadi
/* Rainbow Popular Post by http://hzndi.blogspot.com*/#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 {background:#DF01D7;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 + li +li{background:#B041FF;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:#F52887;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{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 + 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{background:#33c9f7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}#PopularPosts1 ul li:first-child + li + li:after{content:"3"}#PopularPosts1 ul li:first-child + li{background:#ff764c; 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}
4.Preview dan Save!

Hasilnya Seperti Ini -

GOODLUCK :D

23 comments

Sunday, October 14, 2012 12:30:00 PM Delete! [Reply Comment]

Wuuuuu !! Best niee

Sunday, October 14, 2012 12:33:00 PM Delete! [Reply Comment]

Thanks for the tuto.. :D Saya sudah mencubanya.. Jadi..

Sunday, October 14, 2012 12:41:00 PM Delete! [Reply Comment]

hai , macam mana nak buat macam blockquote nabila ? berminat sgt !

Sunday, October 14, 2012 1:02:00 PM Delete! [Reply Comment]

thanks Nabila .. menjadi lah .. :)

Sunday, October 14, 2012 1:11:00 PM Delete! [Reply Comment]

wah nak try lah...tq share

Sunday, October 14, 2012 1:30:00 PM Delete! [Reply Comment]

knp x jd ala...rugi nyee

Sunday, October 14, 2012 1:31:00 PM Delete! [Reply Comment]

ala,,npe x jd? ruginye...

Sunday, October 14, 2012 2:15:00 PM Delete! [Reply Comment]

thanks..=)

Sunday, October 14, 2012 3:21:00 PM Delete! [Reply Comment]

nice sharing...bole try ni..
Pesta Layang-Layang Di Australia

Sunday, October 14, 2012 6:20:00 PM Delete! [Reply Comment]

Saya amik buat tuto ya ? :D creditkan awak :D

Sunday, October 14, 2012 7:39:00 PM Delete! [Reply Comment]

thanks kak :D dh jadi ~ weeee

Sunday, October 14, 2012 7:59:00 PM Delete! [Reply Comment]

Thnks :D

Sunday, October 14, 2012 8:49:00 PM Delete! [Reply Comment]

jadi !! but sy ada ubah2 sikit .
btw thanks :)

Monday, October 15, 2012 2:51:00 PM Delete! [Reply Comment]

nabila nak tnye lah .. pupolar post nie die akan jadi popular post berdasarkan ape erk ? ke randomly die tersenarai .. thanks :)

Saturday, October 20, 2012 2:58:00 PM Delete! [Reply Comment]

Salam , dh jadi ! thanks !! <3

Friday, November 23, 2012 11:33:00 AM Delete! [Reply Comment]

thnks jadik !!

Monday, November 26, 2012 7:29:00 AM Delete! [Reply Comment]

salam . knape popular post tu ade 9 ? saye nak 3 jea .

Friday, December 07, 2012 3:44:00 AM Delete! [Reply Comment]

da cuba, dan da jadi..gumawo

Sunday, December 09, 2012 11:14:00 PM Delete! [Reply Comment]

jadi!thanks :)

Monday, December 24, 2012 7:53:00 PM Delete! [Reply Comment]

t.kasih tutor ni dah jadi.:-)

Tuesday, January 22, 2013 8:22:00 PM Delete! [Reply Comment]

yeay ! dah jadik !

Sunday, February 03, 2013 11:06:00 PM Delete! [Reply Comment]

heppp. terima kasih tutor ni ;)

Sunday, December 15, 2013 6:15:00 PM Delete! [Reply Comment]

yeayy jd..thanks

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