468x60 Ads

Scrollbar Mirip Style Mbah Google

Unknown | 23:04 | ,
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 :) 

0 Kommentare:

Kommentar veröffentlichen