10 June 2011

Tutorial : Cantikkan Scroll Bar


tutorial untuk harinih scroll bar . diminta oleh kak mirara . nak tengok contoh , tengok atas nih yea . picture tu.
p/ : hanya untuk pengguna yang ada GOOGLE CHROME


1. Dashboard>Design>Edit html>Tick Expand Widget Templates

2. cari code nih :
]]></b:skin>
3. copy code nih :
::-webkit-scrollbar {
height:12px;
width: 12px;
background: #D9D9D9;
}
::-webkit-scrollbar-thumb {
background-color: #F2F5A9;
-moz-border-radius: 10px;
border-radius: 10px;
}
4. paste sebelum code nih ]]></b:skin>

5. merah - background scroll bar
    hijau - warna yang scroll tu

6. kalau nak letak gambar , copy code nih gantikan dengan yang tulisan hijau tu
background-image:url(URL BACKGROUND);
 7. nak letak border pon boleh , copy code nih paste selepas border-radius tu
border: 1px solid #000000;
krdt : nazihah 


60 comments:

aneyda said...

thx ya.. cantik sgt.. XD

Nur Ikhma said...

thanks for this tuto :)

S A Y A said...

nanti kite try ! :) thanks !

Nurhafizah p i j a said...

@aneyda wlcm :)

Nurhafizah p i j a said...

@Nur Ikhma wlcm :)

Nurhafizah p i j a said...

@S A Y A try la :D . wlcm ^^

missunguviolet said...

napa saya buat tak boleh ??? :(

nur faTihaH hAfiZha said...

jenjalan cni..dapat tuto nih..thanx..da jadik..hehe =)

Nurhafizah p i j a said...

@missunguviolet gune google chrome ?

Nurhafizah p i j a said...

@nur faTihaH hAfiZha wlcm :)

only-hana said...

x jdi pon .. da gne google chrome

Nurhafizah p i j a said...

@only-hana ltk tak code tu ?

Raii Nana said...

maceh kak! tuto ini MEMANG OHHSEMMM!

Nurhafizah p i j a said...

@Raii Nana wlcm :)

only-hana said...

@Nurhafizah p i j a
da letak

KA ♡ said...

knp tak jadi ? O.o Dah gune Google Chrome

Nurhafizah p i j a said...

@only-hana try buat sekali lg . ltk dkt tmpt yg betul .

Nurhafizah p i j a said...

@KA ♡ jmpk x code yg kena cari tu ?

sangat setia said...

xjd. . . :( da 2x wat.

Nurhafizah p i j a said...

@sangat setia try letak code tu selepas code yg kena cri tu ]]>

KA ♡ said...

Sudah , Kite dah ikut step dea . Bile save dea tak jadi .

Nurhafizah p i j a said...

@KA ♡ em , ble tak save jd eh ?

BellaHuneyCappucino said...

xbole pun :'(

Wani Ahmad said...

Terima kasih :'D

Eyka Aikha said...

@Nurhafizah p i j a
nape tak bole..

Nurhafizah Mohd Noor said...

@Eyka Aikha ikot tuto btol2 .

Nurhafizah Mohd Noor said...

@Wani Ahmad sama2 [=

ieyra zaza said...

THANKS..
JADI LAH

Eyka Aikha said...

@Nurhafizah Mohd Noorxleh pon lah.. dah 4 kali buat tp xdapat.. :(

Nurhafizah Mohd Noor said...

@Eyka Aikha try letak selepas ] ] > < / b : s k i n >

Zulaikha Amira said...

Suka suka suka :DDD Thanks kak :)

Nurhafizah Mohd Noor said...

@Zulaikha Amira wlcm ^^

atyn nayn said...

jadi! :) thanks 4 dis tuto k ^^

maryam bakri said...

nak try buat pasni :)

ami syafiqah said...

ta mnjdy pon :(

Nurhafizah Mohd Noor said...

@ami syafiqah try btol2 .

✿ ayen ✿ said...

thanks akak ! menjadi . cute sngt ! love u akak !

A Little Girl said...

Thanks ! Daa jadi .

! SyiNUar ! said...

akak..Kt atas code ]]> ada tnda } ..cm mna ?? nk ltk kod akk bg 2 kt mna?? tlg2

◕‿◕ kim Dieba said...

menjadi lha ! tengkiuu

arina hanis said...

ahhhh THANK YOU sgt2.. dh bertahun teringin nk scroll mcm ni! sayang awk! :D

comot comel said...

Tak jadik pun --'
gune GOOGLE CHROME lew ni --'

AisKrim said...

klau guna template denim mmg tak boley ke ? npe tak boley buad ?

Noor Najwa said...

comel sgt ! thanks

Adeeba said...

thank yew .. tuto awk wat sya fhm ...

Puteri Nurina said...

Guna tuto nih . Thanks a lot :DD

fatimah said...

thanks kak!

QasEhIlya said...

kak .. sye x phm la .. susah nyerr .. plizz la ajar ..

Luruns said...

tak jadi . tak jadi . wuuu :( gune chrome neh

Wendy William said...
This comment has been removed by the author.
❤ cikk AiDa ❤ 。^◕‿◕^。 said...

tq yer tut0rial nyer .. dh jdy . . :)

shafinaz rosli said...

thanks 2 the tuto.. dah jadik dah.. :)

Dura Vanilla said...

yeay \^^/ dah jadik!! :) thanks

amir faiz said...

thank.... cantik sangat

Aria Zhafirah said...

thank u.. realy helpful. :)

nor kamilia said...

thanks akak :) comel sangat

Anonymous said...

thanks kak :) akak bnyak bantu saya :)

meow kiki said...

thanks tuto..menjadi :)

eiyda zana said...

]]>
kak.. kalo yg part no dua tuh.. stil ta phm lha..

SyakirahZahrah said...

tq,menjadilah..cuma background scrollbar je yg colourbputih..tapi x pe cantik...tqvm