Nabihah Ahmad: Scroll Bar Comel








NABIHAH A
nabihahj0urnal.bs.my



FOLLOW DASHBOARD

Monday, 6 February 2012

Scroll Bar Comel


Bismillahirrahmanirrahim,
Assalamualaikum w.b.t

Hari ni Bieha tetibe rajin nak buat tutorial.. Tutorial ni untuk buat scroll bar berwarne/ background macam Bieha punye tuh. Ni langkahnye:

Scroll bar background

1. pegi Edit HTML>cari kod ni :
/* Header
----------------------------------------------- */
2.Then,copy kod bawah ni and paste di atas kod tadi :
::-webkit-scrollbar {
height:20px;
width: 20px;
background: #F9D9FF;
border:1px solid #000000;}
::-webkit-scrollbar-thumb {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieC1eok6zup_4n-0pdnYN2aNZnbOfKh4IujHtjsfbBCHeYIgVZUVfHje12sYgMjD1BPZJ8yoFAdJ8S-fEJdxkZJiPvFGgGNsIl7Zx-VPbt5VN0uYiumPJHfV00PSwWCHkLCbLPb2hkEpg/s320/unakotakpurple.jpg);
-moz-border-radius: 10px;
border-radius: 10px;
border:1px solid #000000;}
 3.Die akan jadi macam ni:
::-webkit-scrollbar {
height:20px;
width: 20px;
background: #F9D9FF;
border:1px solid #000000;}
::-webkit-scrollbar-thumb {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieC1eok6zup_4n-0pdnYN2aNZnbOfKh4IujHtjsfbBCHeYIgVZUVfHje12sYgMjD1BPZJ8yoFAdJ8S-fEJdxkZJiPvFGgGNsIl7Zx-VPbt5VN0uYiumPJHfV00PSwWCHkLCbLPb2hkEpg/s320/unakotakpurple.jpg);
-moz-border-radius: 10px;
border-radius: 10px;
border:1px solid #000000;}
/* Header
----------------------------------------------- */
4. Then preview. Kalau jadi save la!

Scroll bar color :

1. pegi Edit HTML>Search kod bawah ni :

/* Header
----------------------------------------------- */
 2. Then, copy kod bawah ni and paste atas kod tadi:

::-webkit-scrollbar {
height:20px;
width: 20px;
background: #FFFFFF;
border:1px solid #000000;}
::-webkit-scrollbar-thumb {
background-color : #000000-moz-border-radius: 10px;
border-radius: 10px;
border:1px solid #000000;}
3. Die akan jadi camni :
::-webkit-scrollbar {
height:20px;
width: 20px;
background: #FFFFFF;
border:1px solid #000000;}
::-webkit-scrollbar-thumb {
background-color: #000000-moz-border-radius: 10px;
border-radius: 10px;
border:1px solid #000000;}
/* Header
----------------------------------------------- */
4. Then preview. Kalau jadi save la!

#Oren untuk warne scroll bar
#Hijau untuk warne border scroll bar
#Purple korang letaklah background url yang korang nak

Untuk kod warne korang tekan SINI
PERHATIAN!!
tutorial ini hanya untuk pengguna Google Chrome tau!

3 comments

krazylenglui said...

waaa, tengkiut! suka dgr lagu blog ni! ^^,

Anonymous said...
This comment has been removed by a blog administrator.
Nabihah Ahmad said...

@Amyra Azhar
Welkem... sdp kn lagu nih! Bieha sndiri ske lagu nih.. Ye lh, kalau x suke x kn tarok kowt kn?? >.<

Related Posts Plugin for WordPress, Blogger...