Follow Us @soratemplates

Sunday, 5 July 2015

TUTORIAL: Scroll bar background comel

Assalamualaikum.
Tutorial ni dibuat sbb ada orang tanya dekat cbox. Heheh. Tengok gambar. So, kita pun alang-alang duduk rumah goyang kaki membuta je kejee ni kitaa pun buatlah tuto ni. Scroll bar tu bkn untuk cbox jee, tapi untuk blog archive, blog, blog list dan semua sekali scroll bar dalam blog.



Macam dalam gambar ni. Blog aku, cbox dan blog archive semua scrollbar dia jadik gitu kan? Tutorial tu menjadi kalau uolss guna chrome je. Rasanya kalau guna browser lain tak jadik kot. Bkn tak jadik sbb error ke apa. Tapi tak nampak pun scroll bar tu ada background. Kalau bukak kat chrome baru nampak. Dulu aku guna Mozilla tak nampak, then semalam aku try bukak kat Internet Explorer pun sama jaa tak nampak background tu. Jadi guna jelah chrome yedakk?

First sekali, cari code ni :

/* Header

Jumpa? Kalau tak jumpa cuba cari #header-wrapper { . Code yg tadi tu ada kat area situu jugak.

Then pastekan code kat bawah ni sebelum code /* Header

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment  { height: 0px; display: block; background: #fff; }
::-webkit-scrollbar-track-piece  { background: #FFFFFF; }
::-webkit-scrollbar-thumb { border-radius: 1px; height: 50px;
background-image: url(URL BACKGROUND); }
::-webkit-scrollbar-thumb:hover { background-color: #eee; }

MERAH: Warna background. Kalau yg aku bagi tu kaler putih. Kod warna boleh tengok SINI
BIRU: Background scroll bar yang korang suka. 


Kat atas ni code bagi blog aku. See? Kat mana nak paste semua? Lagi paham bila tengok gambar ni kan.

Kalau menjadi, bgtau laa! Hehee. Kalau tak jadi den tak dapek deh nolong. Sbb den sendiri dah bagi code yang den guna. Harap harap tutorial ni membantu. Kalau malas nak edit template, semalam aku ada buat freebies template washed denim kaler soft biru pink. Boleh tengok kat SINI. Template tu sudah sedia scroll bar guaa edit. Hehe

Okay Tataaaa !





4 comments:

  1. Thanks for the tutorial but does it works for Blogskins because I'm using classic template.

    ReplyDelete
  2. Jazakillahu khairan sebab kongsikan tutorial yang sangat berguna ni ^_^

    ReplyDelete
  3. @Siti FarhahnisBlogskins sy tak pasti laa awak. Hehe

    ReplyDelete
  4. awakk.. thanks sangat!! jadi, very useful for blogger newbie like me, do visit my blog.. banyak ikut tuto dari blog awaa.. http://infinitelifestory.blogspot.my/

    ReplyDelete

Penghantaran sebarang komen, permintaan, cadangan ATAU komunikasi lain yg lucah, sumbang, palsu, mengancam ATAU negatif dengan niat untuk menyakiti hati, menganiayai, mengugut ATAU mengganggu orang lain dengan ATAU tanpa mendedahkan identitinya adalah suatu kesalahan boleh didenda tidak melebihi 58 ribu ringgit atau dipenjarakan selama tempoh tidak melebihi 1 tahun ATAU kedua-duanya sekali.