Scrollbar Mirip Style Mbah Google

Hay Sobat Tempat Blogging, Sudah jarang saya Update Artikel, dikarnakan Masi Otak-Atik Template saya yang masi basnyak kekurangan, dalam hal SEO juga masi minim, Dahulu Saya Sudah Update Tutorial Cara Membuat Custom WebKit Scrollbar di Blogger. untuk kali ini saya akan memberikan Scrollbar Mirip Style Mbah Google. Scrollbar ini bukan hanya mirip tapi memang sama. screenshot bisa dilihat punya saya. Langsungsaja kita bahas tutorial ini.




Cara Memasang Scrollbar Mirip Style Mbah Google:

1. Buka Blogger.com >> Blog Anda.
2. Dasboard >> Template >> Edit HTML >> Cari Kode ]]></b:skin>.
3. Letakan Kode CSS berikut di atas kode ]]></b:skin>.
/* Scrollbar  Tempat Blogging*/
 ::-webkit-scrollbar {
    height:16px;
    overflow:visible;
    width:16px
}
::-webkit-scrollbar-button {
    height:0;
    width:0
}
::-webkit-scrollbar-track {
    background-clip:padding-box;
    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)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color:rgba(255, 255, 255, .1);
    box-shadow:inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover {
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:active {
    background-color:rgba(255, 255, 255, .1);
    box-shadow:inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active {
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
::-webkit-scrollbar-thumb {
    background-color:rgba(0, 0, 0, .2);
    background-clip:padding-box;
    border:solid transparent;
    border-width:1px 1px 1px 6px;
    min-height:28px;
    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, 0, 0, .4);
    box-shadow:inset 1px 1px 1px rgba(0, 0, 0, .25)
}
::-webkit-scrollbar-thumb:active {
    background-color:rgba(0, 0, 0, 0.5);
    box-shadow:inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb {
    background-color:rgba(255, 255, 255, .3);
    box-shadow:inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:horizontal {
    box-shadow:inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background-color:rgba(255, 255, 255, .6);
    box-shadow:inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:active {
    background-color:rgba(255, 255, 255, .75);
    box-shadow:inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track {
    border-width:0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:horizontal {
    border-width:6px 0 1px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:hover {
    background-color:rgba(0, 0, 0, .035);
    box-shadow:inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color:rgba(255, 255, 255, .07);
    box-shadow:inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb {
    border-width:0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb:horizontal {
    border-width:6px 0 1px
}
::-webkit-scrollbar-corner {
    background:transparent
}
body::-webkit-scrollbar-track-piece {
    background-clip:padding-box;
    background-color:#f5f5f5;
    border:solid #fff;
    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 #fff;
    border-width:3px 0 0 3px;
    box-shadow:inset 1px 1px 0 rgba(0, 0, 0, .14)
}
4. Sekarang Simpan "Template" Anda.

Semoga Artikel ini bisa membantu Anda untuk modifikasi Blogger Anda.
Jika Ada yang ingin di tanyakan komen aja gak usah malu-malu :) 
Show comments
Hide comments

4 Responses to "Scrollbar Mirip Style Mbah Google"

Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)

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!".

Klik subscribe by email agar Anda segera tahu balasan komentar Anda

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close