26/09/18

Tutorial Memasang Scrollbar Unik di Blog


Hi guys! How are you? Kangen enggak sama Angel? X'D  .Hahaha.... yang tadi tuh gak usah dijawab :'v . Kali ini, aku mau ngepos tutorial memasang scrollbar yang unik pada blog kalian masing-masing. Silahkan dicoba ya!! Oke, kalau mau coba, ayo lihat cara memasangnya :D. 
Credit: Kak Cindy
Oh iya, selain memberikan tutorial , aku juga memberikan freebies. Yaitu scrollbar unik! *Teriak YAY dulu dong* #sip_itu_gak_penting #apaan_sih . Ehhh.. maaf maaf, kalo penulisnya lagi gaje, posnya juga jadi gaje :"3 . Oke, deh langsung aja ke langkah-langkahnya!


1. Login (masuk) ke Blogger
2. Pilih menu Tema
3. Pilih bagian Edit HTML
4. Cari kode di bawah, untuk pengguna Denim Template
/* Header
untuk  kalian yang memakai Simple Template cari kode ini
]]></b:skin>
5. Copas salah satu kode scrollbar berikut  DIATAS kode nomor 4, lalu simpan

  • 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,ya :)
Untuk Blogskin dan Classic Template

1. Login (masuk) ke blogger
2. Pilih menu Template
3. Pilih Edit HTML
4. Cari kode berikut 
body{
5. Copas salah satu kode yang dibagikan DIATAS kode no 3
6. Simpan

2 komentar:

1. Jangan gunakan kata-kata kotor atau porno!
2. Jangan mempromosikan barang di komentar!
3. Komentar harus berhubungan dengan pos!

Comeback?

Hi guys! Long time no see y'all :(