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 


 والسلام


23 comments:

  1. Muhd FadlinJuly 2, 2011 at 11:37 PM

    thanks ye! memang menjadi lah.. :)

    ReplyDelete
  2. Muhd FadlinJuly 2, 2011 at 11:41 PM

    yay.. jadi.. thanks.. :)

    ReplyDelete
  3. Ermizi MuhamadJuly 2, 2011 at 11:52 PM

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

    ReplyDelete
  4. Atika AulaJuly 3, 2011 at 12:06 AM

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

    ReplyDelete
  5. Atika AulaJuly 3, 2011 at 12:06 AM

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

    ReplyDelete
  6. AmyZanaJuly 3, 2011 at 10:08 AM

    hohohoho. thank you! :)

    ReplyDelete
  7. mimi_atiaJuly 9, 2011 at 10:47 AM

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

    ReplyDelete
  8. SyieraDahhariJuly 9, 2011 at 4:46 PM

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

    ReplyDelete
  9. farna♥July 9, 2011 at 9:28 PM

    thank you !! :D

    ReplyDelete
  10. SurayalalalaJuly 11, 2011 at 11:02 AM

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

    ReplyDelete
  11. AnonymousJuly 17, 2011 at 8:50 PM

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

    ReplyDelete
  12. AnonymousJuly 17, 2011 at 9:04 PM

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

    ReplyDelete
  13. AisyahJuly 23, 2011 at 3:37 PM

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

    ReplyDelete
  14. ieda =.=July 26, 2011 at 11:34 AM

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

    ReplyDelete
  15. UnknownAugust 14, 2011 at 9:51 PM

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

    ReplyDelete
  16. DEE 1A September 26, 2011 at 6:37 PM

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

    ReplyDelete
  17. nasha sanzaOctober 8, 2011 at 9:23 PM

    thanks!!!

    ReplyDelete
  18. عين شاميميNovember 12, 2011 at 12:16 PM

    mekaceh! :)

    ReplyDelete
  19. AnonymousNovember 13, 2011 at 2:44 PM

    mcm manerw nk letak border ?? <3

    ReplyDelete
  20. azzwaniamirDecember 11, 2011 at 3:41 PM

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

    ReplyDelete
  21. deena ninaDecember 15, 2011 at 8:48 AM

    temkiu ea ,. da jadikk ,.

    ReplyDelete
  22. Anis StellaDecember 31, 2011 at 3:29 PM

    Terima kasih wat turorial ni :)

    ReplyDelete
  23. wany chemey :DFebruary 20, 2012 at 5:45 PM

    maceh da jd :)

    ReplyDelete

Jom komen..Syukran (✿◠‿◠)