Membuat Scrollbar Cantik untuk Blog
Sebelum ini aku pernah menuliskan tentang tutorial cara mengganti warna scrollbar, setelah aku mengedit dengan css tadi aku membuat tiga jenis scrollbar dan aku akan share kode nya disini sekarang bersamaan dengan gambarnya sekalian. Daripada aku menuliskan tutorialnya satu persatu mending tiga jenis scrollbar itu aku tuliskan sekali cara membuatnya. Kalau teman-teman suka silahkan mengambil kode nya untuk diterapkan di blog. Tutorial membuat scrollbar cantik untuk blog:
1.Masuk ke Dashboard > Template > edit HTML
]]></b:skin>
atau
/* Header
3.Letakkan kode scrollbbar di bawah nanti tepat di atas salah satu kode tersebut di atas.
Srollbar yang pertama gambarnya seperti di bawah ini:
Kodenya:
::-webkit-scrollbar {
width:15px;
height:10px;
}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
height:10px;
width:10px;
display:block;
background:#FF95CA;
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 kedua persis seperti di blog aku:
Kodenya:
::-webkit-scrollbar {Yang ketiga adalah scrollbar hover:
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: #CAFFFF;
border:1px solid #842B00;
}
::-webkit-scrollbar-track-piece {
background-color: #FF69B4;
border: 4px solid #fff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #ff7575;
border: 1px groove #FE80DF;
}
 |
Kodenya sebagai berikut:
::-webkit-scrollbar {height: 12px;width: 12px;background:#FFD2D2;}::-webkit-scrollbar-thumb {background-color:#00AEAE;-moz-border-radius: 10px;border-radius: 10px;}::-webkit-scrollbar:hover {height:12px;width: 12px;background:
#FF95CA;}::-webkit-scrollbar-thumb:hover {background-color: #00CACA;-moz-border-radius: 10px;border-radius: 10px;}
3.Langkah terakhir tekan pratinjau dulu baru simpan template.
Itulah model scrollbar pada blog yang bisa aku share, untuk yang aku tandai dengan warna pink adalah kode warna dan bisa diganti menurut selera, tentang border dan ukuran px juga boleh diganti sesuai keinginan, pintar-pintarlah mengeditnya, silahkan mengambil kodenya kalau suka xD.
Categories:
Tips & Trik
0 komentar:
Post a Comment
Pembaca yang baik, berkomentar lah yang bijak..
dan jangan lupa klik LIKE dan Berbagi lah untuk kepentingan bersama