Tutorial : Scrollbar cantik for your Blog

 
Hai........Annisa balik lagi nih
bawa TUTORIAL 
KEPO
READ MOREoke deh,  kasih beberapa scrollbar cantik ya untuk kalian ^^ tapi pertama-tama ikutin step ini dulu :D
1. Login ke Blogger
2. Dashboard > Pilih Template
3. Pilh Edit HTML
4. Cari kode di bawah, untuk Denim Template
/* Header
untuk Simple Template cari kode ini
]]></b:skin>
5. Copy dan paste salah satu kode scrollbar dibawah DIATAS kode no 4
  • Scrollbar tipe 1
kodenya :
::-webkit-scrollbar {
width:15px;
height:10px;
}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
height:10px;
width:10px;
display:block;
background:#ADDFFF;
border:1px solid #842B00;
}
::-webkit-scrollbar-track-piece {
background-color:#FFFFFF;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color:#ACD6FF;
border:1px solid #FFFFFF;
}

  •  Scrollbar tipe 2

kodenya :
::-webkit-scrollbar {
height:10px;
width: 10px;
background: #ECFAFF;
}
::-webkit-scrollbar-thumb {
background-color: #BBEBFF;-moz-border-radius: 5px;
border-radius: 5px;
    div#toc-header, div#toc-display, div#toc-footer, table#toc-body {
 width:100%;
}

  •  Scrollbar tipe 3
kodenya :
::-webkit-scrollbar {
width: 9px;
height: 7px;
}
::-webkit-scrollbar {
width: 9px;
height: 7px;
}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment  {
height:10px;
width:10px;
display:block;
background: #ADDFFF;
border:1px solid #842B00;
}
::-webkit-scrollbar-track-piece  {
background-color: #ADDFFF;
border: 4px solid #fff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #ff7575;
border: 1px groove #FE80DF;
}
Note : warnanya kalian ubah sesuai keinginan kalian ya :)

Untuk Blogskin dan Classic Template

1. Login ke Blogger
2. Dashboard > Pilih Template
3. Cari kode ini
body{
4. Copy salah satu kode yang chiaki bagikan DIATAS kode no 3
5. Save

Untuk melihat kode warna, bisa dilihat disini ;)
okee.. sampai disini ya postingannya, semoga bermanfaat ^^
 
CREDIT : KAK CHIAKI

No comments:

Post a Comment

Moshi - Moshi

Leave comment here
Request ? tell in cbox
Dont bad words

Obey the rules ? Free comment :)

1
2
3
4
5
 
Related Posts Plugin for WordPress, Blogger...