Home » » Tutorial Scrollbar Blog

Tutorial Scrollbar Blog


بسم الله الرحمن الرحيم

Tutorial, Tutorial Blog, Tutorial Scrollbar, Scrollbar, Cara nak Cantikkan Scrollbar Blog

Assalamualaikum

Hari tu ada orang tanya saya macam mana nak ubah scroll kat tepi blog tu..yang macam gambar kat atas ni. Ok, sekarang saya tunjukkan eh..

1. Design-> Edit HTML-> Klik expand widget template

2. Cari kod ni tekan ctrl+f   ]]></b:skin>

3. Copy pulak kod ni dan letakkan di atas kod tadi

::-webkit-scrollbar {
height:14px;
width: 14px;
background: KOD WARNA;
}
::-webkit-scrollbar-thumb {
background-color: KOD WARNA;
-moz-border-radius: 10px;
border-radius: 10px;
}

KOD WARNA yang pertama tu adalah background scroll
KOD WARNA yang kedua ialah warna scroll tu.
Kalau nak kod warna..cari kat sini >TEKAN<
Height dan weight tu pun boleh diubah-ubah ikut kesesuaian

4. Kalau nak ubah background daripada warna kepada gambar, tukarkan kod background jadi macam ni

background: url(URL GAMBAR);

URL GAMBAR ni pula kawan-kawan boleh cari gambar dan upload di photobucket. Ambil direct link. Tak pun, ambil je la url gambar ape-ape pun yang kawan-kawan suka. 

5. Klik preview dulu..kalau jadi, tekan save.

Selamat Mencuba 


 والسلام



Syukran kerana sudi membaca..boleh Like dan Share entri ini

23 luahan hati:

Muhd Fadlin Firdaus Chan said...

thanks ye! memang menjadi lah.. :)

Muhd Fadlin Firdaus Chan said...

yay.. jadi.. thanks.. :)

Muhd Aizie said...

salam . saya dah try buat, kenapa tak jadi? ;(

Atika Aula said...

@Muhd Fadlin Firdaus Chan
u r welcome (^__^)

Atika Aula said...

@Muhd Aizie
myb template awak berbeza agaknye..2 yg tak boleh~

AmyZana said...

hohohoho. thank you! :)

SHAMIMI ATIA YUSRI said...

tQ2..heheh..cantikk!! superbb..

*assyiera* said...

assalamualaikum owner :)
saye gune tuto ini.
tenkiu taw. cantek~

farna♥ said...

thank you !! :D

yaya dluver said...

Terima kasih kak atika :) , kak mcm mne nak buat yang dekat tepi tu yg shout , follow , dashboard & facebook tu gambar boboiboy ngn yaya tu ?

`kid☆ginger` said...

thank u so much. dah lame dah cari someting like this :DD

`kid☆ginger` said...

thanks. tp macam mana nak buat dashed atau border? saya xnak masukkan gambar. (:

Aisyah said...

kat atas ]]> .. tu maksud nye ape ?? nk letak kt mne ?? x fhm la.. :(

syieda_joy said...

syieda sudah berjaya buat. thanks tuto n tuan tuto ^_^

MissCt a.k.a MuqDeq said...

Bru wat.. Hehe..
Jd.. tQ.. :)

mAzLiN said...

mintak kebenaran nak copy leh tak =) thank,,,,,,

nasha sanza said...

thanks!!!

littleKhalifah said...

mekaceh! :)

Anis Syafiqah said...

mcm manerw nk letak border ?? <3

Azwazawany Amir said...

kenapa saya buat x jadi??boleh bantu tak??

deena nina said...

temkiu ea ,. da jadikk ,.

Nurul Anisah said...

Terima kasih wat turorial ni :)

wany chemey :D said...

maceh da jd :)

Related Posts Plugin for WordPress, Blogger...

ShareThis

Copyright Control : Atika Aula