Mengubah Tampilan Scroll Bar Di Blog

Share :

Tweet

Mengubah Tampilan Scroll Bar Di Blog - Akhirnya ketemu inspirasi baru untuk nge-post. Hari ini saya akan nge-post tentang Mengubah Tampilan Scroll Bar Di Blog. Mungkin beberapa blogger merasa kurang puas terhadap scrollbar yang ada di blog mereka karena terkesan biasa. Ternyata scrollbar yang ada di blog kita bisa di ubah dengan menggunakan CSS. Nah, mungkin di internet sudah banyak yang menjelaskan cara mengubah scrollbar di bog. Sekarang saya akan share yang beda dari yang lain, contohnya ada di screenshot  di bawah ini dan di blog ini langsung.

Gimana tertarik tidak????, Jika tertarik mengubah scrollbar blognya menjadi seperti di blog ini silahkan ikuti langakah-langkah di bawah ini :

1. Login ke akun blogger sobat.
2. Pergi ke halaman Edit Template >> Klik Edit HTML >> Klik Lanjutkan.
3. Cari kode ]]></b:skin>
4. Copy paste kode di bawah ini tepat diatas ]]></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)
}

5. Yang terakhir klik Simpan Template.

Mungkin itu saja yang dapat saya sampaikan dalam post yang berjudul Mengubah Tampilan Scroll Bar Di Blog, silahkan mencoba dan semoga bermanfaat Oya sob jika ada yang ingin di tanyakan bisa melalui komentar Termiakasih...... :)

Tag : Blogging