[Tutorial] Customize Scroll Bar II

Assalamualaikum for muslims and hye for non-muslim :)

Preview;

Hi. My name is Liyana. I'm Running Man die hard fans. Kang Gary's big fan. Monday Couple lover. Oyeahhh. I'm 20 years young. I like chocolate. I like Jun and Junsu (Appa Odiga). The're soooooo damn cute!

So, here's the codes:

::-webkit-scrollbar{
width:11px;
height:11px;
}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment{
height:11px;
width:11px;
display:block;
border:1px solid plum;
}
::-webkit-scrollbar-button:end:increment{
background:#F1CBFF;
}
::-webkit-scrollbar-button:start:decrement{
background:#F1CBFF;
}
::-webkit-scrollbar-track-piece{
background:white;
}
::-webkit-scrollbar-thumb{
background-color:#F1CBFF;
border:1px solid plum;
}

[Tutorial] Customize Scrollbar III

Assalamualaikum to muslim and hi to non-muslim :)

I just wanna share this codes to all of you :) Btw, thanks for droping by^^

1. Dashboard > Edit HTML/Template

2. Copy this code and paste above </style> tag //for Classic Template users or ]]></b:skin> //for template designer users.

::-webkit-scrollbar-button:start:decrement  {
height:10px;
width:10px;
display:block;
background:#CD9A9A;
border: 1px solid white;
}
::-webkit-scrollbar-button:end:increment  {
height:10px;
width:10px;
display:block;
background:#CD9A9A;
border: 1px solid white;
}
::-webkit-scrollbar {
height:10px;
width: 10px;
background: #fff;
}
::-webkit-scrollbar-thumb {
background-color: #CD9A9A;
border: 1px solid #fff;
}

# You can change the height and width and the background colour :)

Lots of Love,

Yana♥

[Tutorial] Customize Scroll Bar II

# Click picture to zoom in #

Request dari asa, dia tanya cemana yana buat scroll bar tu jadi camtu, ade black solid line kat belakang tu. Actually yana tak reti nak explain cemana. But, nak senang cite, ikut step macam kat bawah nie :
1. Blogger.com > Dashboard > Template
2. Ctrl + F search code :

::-webkit-scrollbar {

3. Kat bawah2 tu kan ade anak2 dia. Then lastly ada code }. Letak code kat bawah nie SELEPAS code } tadi tu :

::-webkit-scrollbar-track-piece  {
background-color: #000; border: 5px solid #fff; }

#yang biru tu boleh tukar ikut warna yang korang nak #yang merah tu korang boleh adjust ikut size scrollbar-thumb korang tu. Contoh kalau size scrollbar-thumb korang 11px, korang letak la 5px kalau nak dia jadi seimbang kiri kanan untuk border dia tu. Err, paham tak? Adeih -.-
4. Dah selesai semua, save la template korang tu.

p/s : Korang try and error la. Yana pun tak reti sangat nak explain nie. Huhu. Btw, selamat mencuba!^^ Tak paham pape tanya je la. InsyaAllah yana tolong :)

Lots of Love, Yana♥

[Tutorial] Customize Scrollbar

Salam and hello peeps~

Tadi yana bukak formspring yana. Then ade orang tanya pasal scroll bar kat blog yana nie. Untuk tidak mengecewakan hati si penanya itu, yana pun buat la tutor tu hari nie. *perghh! ayat takleh blah weyh! =='*

This one :

# Click picture to zoom in #

1. Dashboard > Design> Edit HTML

2. Ctrl + F search for this code

]]></b:skin>

3. Dah jumpa? Copy code nie dan paste sebelum code tadi.

::-webkit-scrollbar {
height:12px;
width: 12px;
background: #000000;
}
::-webkit-scrollbar-thumb {
background-color: #FFFFFF;-moz-border-radius: 10px;
border-radius: 10px;
}

Code warna biru tu untuk background scroll bar tu. Korang boleh rujuk >sini<
Yang warna merah tu pulak yang scroll tu. Korang boleh tukar warna yang korang nak ataupun boleh letak gambar yang korang nak.

4. Kalau nak letak gambar, code merah tu korang gantikan dengan code nie.

background-image:url(URL IMG);

URL IMAGE tu korang boleh letak image yang korang nak.

5. Kalau nak tambah border pun boleh je. Letak sebelum code } ye?

border: 1px solid #000000;

6. Then preview. Kalau dah puas hati just Save! :)