Cara Merubah Tampilan Scroll Bar Pada Blog

Perhatikan judul artikel di atas  gambar di bawah ini, maka dengan sendirinya sobat akan mengerti apa yang akan kita bahas kali ini.

Cara Merubah Tampilan Scroll Bar Pada Blog

Oke langsung sedot aja gan. Berikut ini cara untuk membuat tampilan scroll bar mirip tampilan scroll bar di blog ini.

1. Login ke blogger atau klik disini»
2. Pilih Template » Edit Html » Lanjutkan.
3. Jangan lupa centang Expand Template Widget.
4. Cari code ]]></b:skin> kemudian copy paste code di bawah ini dan letakkan di atas code
]]></b:skin>

::-webkit-scrollbar{
height:16px;
overflow:visible;
width:16px;
}
::-webkit-scrollbar-button{
height:0;
width:0;
}
::-webkit-scrollbar-track{
background-clip:padding-box;
background-color:rgba(0,0,0,.05);
border:solid transparent;
border-width:0 0 0 4px
}
::-webkit-scrollbar-track:horizontal{
border-width:4px 0 0
}
::-webkit-scrollbar-track:hover{
background-color:rgba(0,0,0,.05);
box-shadow:inset 1px 0 0 rgba(0,0,0,.1)
}
::-webkit-scrollbar-track:horizontal:hover{
box-shadow:inset 0 1px 0 rgba(0,0,0,.1)
}
::-webkit-scrollbar-track:active{
background-color:rgba(0,0,0,.05);
box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07)
}
::-webkit-scrollbar-track:horizontal:active{
box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.07)
}
::-webkit-scrollbar-thumb{
background-color:rgba(0, 122, 204, 0.3);
background-clip:padding-box;
border:solid transparent;
border-width:1px 1px 1px 6px;
min-height:70px;
padding:100px 0 0;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07)
}
::-webkit-scrollbar-thumb:horizontal{
border-width:6px 1px 1px;
padding:0 0 0 100px;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.07)
}
::-webkit-scrollbar-thumb:hover{
background-color:rgba(0, 122, 204, 0.5);
box-shadow:inset 1px 1px 1px rgba(0,0,0,.25)
}
::-webkit-scrollbar-thumb:active{
background-color:rgba(0, 122, 204, 0.6);
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35)
}
::-webkit-scrollbar-corner{
background:transparent
}
body::-webkit-scrollbar-track-piece{
background-clip:padding-box;
background-color:#f6f6f6;
border:solid #EFEEEA;
border-width:0 0 0 3px;
box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07)
}
body::-webkit-scrollbar-track-piece:horizontal{
border-width:3px 0 0;
box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.07)
}
body::-webkit-scrollbar-thumb{
border-width:1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal{
border-width:5px 1px 1px
}
body::-webkit-scrollbar-corner{
background-clip:padding-box;
background-color:#f5f5f5;
border:solid #EFEEEA;
border-width:3px 0 0 3px;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.14)
}

Catatan:

  • Tulisan yang berwarna merah silahkan ganti dengan code warna kesukaanmu.
  • Untuk melihat code warna klik disini»

5. Dan yang terakhir simpan /save template.

Semoga artikel kali ini bermanfaat dan jangan lupa like and komentarnya demi kemajuan blog ini. Terimakasih :)

1 komentar:

Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top