Thursday, March 3, 2011

Tutorial : Letak Scroll pada Widget

Requested from my sister =)

Okay, scroll macam mane yang Sarah maksudkan ey?
Yang macam dalam gambar kat bawah ni, sila tengok :D


ha, kan ade scroll kat tepi tu.

Sarah buat kat semua bloglist kat blog Sarah & kat blog archive sekali sebab ia menjimatkan ruang dekat sidebar, Sarah suke kemas2 okay, itu memang Sarah, hihi. Unsur perasan di sini. :P

Cakap banyak tak gune, camne nak buat ek?

Okay macam biasa, sign in akaun blogger then from dashboard => Design => Edit HTML.

Untuk keselamatan, takut tak jadi nanti, Download Full Template dulu okay :)

First, dalam coding yang menari2 kat skrin PC / laptop tu, sila cari widget id yang korang nak wujudkan scroll tu.

Katakanlah, Sarah nak buat untuk bloglist BFFs' Sarah tu, so Sarah tekan Ctrl+F then taip "BFFs'".

Nampak tak? Yang Sarah highlight kan sebaris tu.
Okay, yang dalam kotak merah tu is widget id bagi bloglist BFFs' Sarah.
Widget id = BlogList3

Dah ade widget id, baru kite boleh proceed to our next step,
search pulak code



Jumpe tak? Cari sampai jumpe sebab mesti die ade, hihik. cari b:template-skin dulu kalau nak senang.

Okay, code kat bawah ni korang copy then masukkan dalam notepad@wordpad dulu.


#BlogList3{
height:210px;
overflow:auto;
}

BlogList3 tu widget id Sarah, korang paste widget id korang kat situ.

Saiz kotak scroll pulak boleh ubah kat 210px tu, buatlah 180px ke, 300px ke, ikut citarasa :)

Faham sampai sini? Tak faham tanye.

Then siap dah letak widget id korang,
copy sume kod pastu paste kat sebelum kod
tadi.

Tengok Sarah punye, banyaaaakk! Hehe
3 bloglists, 1 blog archive =P

Preview dulu tengok jadi @ tak pastu bile dah jadi, baru boleh save, okay?

Selamat mencuba!
Ade pape kemusykilan tanye je, kot2 Sarah boleh tolong & sorry kalau tutorial ni serabut. Huhu.

Kredit to : Teknik Buat Blog


Photobucket
Share:

6 buddy (ies):

wnsi said...

thanks sarah..nah...rm10....haha

uwmaisarah said...

welcome kak cik!
oloooo, rm10?
byknyeee! heee~

Miss D'ya said...

tak dapat cari la kod ]]>

mcm mne ne??

http://miss-dya.blogspot.com

uwmaisarah said...

miss d'ya :
tak jumpe ek? try cari "template-skin" pun xde ke?

erin jo said...

Thanks jadi :)

uwmaisarah said...


erin jo,

my pleasure :)