Skip to content Skip to sidebar Skip to footer

Membuat scrollbar cantik untuk blog

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
2.Tick Expand TemplatE Widget dan tekan F3 atau CTRL + F bersamaan dan cari kode:
]]></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:

Membuat scrollbar cantik untuk blog
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:

Membuat scrollbar cantik untuk blog
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: #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;
}
Yang ketiga adalah scrollbar hover:

Membuat scrollbar cantik untuk blog
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.

Post a Comment for "Membuat scrollbar cantik untuk blog"