TUTORIAL - COLOURFUL POPULAR POSTS | norsheilasalleh.blogspot.com

TUTORIAL - COLOURFUL POPULAR POSTS

Assalamualaikum...

Kelmarin, aku baru je cuba-cuba edit blog. Daripada Simple Template kepada Denim Template. Finally berguna sangat ikut tutorial daripada adik Amaline Lee. Tapi aku nak share dengan korang camne nak buat Popular Posts! Yang tengah hot macam pisang goreng tu. hehe. Cuba-cuba tau :)


1) Layout >> Add a gadget >> Popular posts 
2) Most viewed : ikut suka nak bape lama punya hari
2) Show : Untick >> image thumbnail & snippet
3) Display up >> bubuh 5 posts pun dah cukup menarik hehe
4) Preview dan save !

Kemudian, follow tutorial lagi satu :-
1) Template >> Edit HTML >> Tick Expand Widget
2) Click CTRL + F dan cari kod ini
]]></b:skin>
3) Copy kod kat bawah ini atas kod yang dicari kat no 2 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, kalau ok sila save!

RUJUKAN
*CTRL+C (tekan serentak untuk copy kod)
*CTRL+V (tekan serentak untuk paste kod)
*CTRL+F (tekan serentak untuk cari kod)

credit : http://hzndi.blogspot.com & http://www.amalinalee.my

DICORET OLEH :

8 comments

February 17, 2013 at 2:35 PM

tq adik..nk cube lah jugak

February 17, 2013 at 4:16 PM

wah. hehe... rajin shiela edit2.. kalo saya ni berpenyakit sikit. rajin tu ikut musim. heh heh.

February 17, 2013 at 9:29 PM

mar suke la tgk sheila punye.kalo letak kat sidebar mcm kemas sikit kan, ptut ke mar tukar letak kat sidebar jgk hehe :)

February 17, 2013 at 9:50 PM

sama2 kasih kak nea. hee cuba jgn tak cuba ♥

February 17, 2013 at 9:53 PM

hee terajin, setiap bulan kalau boleh nak edit2, hehe! rajin ada makna ni maria huhu ♥

February 17, 2013 at 9:54 PM

terima kasih mar, hee. suka suki je edit ni.tapi alhamdullilah puas hati edit sendiri. hihi. mar punya pun cantik gak ♥

February 18, 2013 at 11:28 AM

tq share ye

February 18, 2013 at 12:20 PM

sama-sama kasih KA ♥

Post a Comment