Add Custom Webkit Scrollbar with Hover Effects in Blogger

Custom Webkit scrollbar makes our web or blog more awesome and especially when it is coming with Hover effects, from customizing scrollba...

Custom Webkit scrollbar makes our web or blog more awesome and especially when it is coming with Hover effects, from customizing scrollbar we are free to add matching colors instead of simple default. The old days are gone when web designers had to apply huge efforts to design a simple web page, now with valuable handy tools you can copy your dream thought into reality. Many professional web page designers use custom webkit style to make her template more attractive and user friendly. If you want to know in depth that What is Webkit scrollbar? And its function so check our previous article in which we explain Custom webkit Scrollbar in depth.

This tutorial is only based on CSS coding so don’t worry about template cracking or Back up, just follow the steps as mention below.

Visit your Blog dashboard.

Move on template>> Click on Edit HTML.

Open your CSS ]]></b:skin> style sheet.

Add the below codes in ]]></b:skin>  style sheet.

/* --- PRO-TECHNIFY CUSTOM WEBKIT SCROLLBAR IN BLOGGER BLOG --- */
::-webkit-scrollbar {
background:#FFF;
width:10px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #00020%, #000 60%);
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #0080FF 20%, #0080FF 60%);
}
::-webkit-scrollbar-track {
}

Then, jump to next step for color editing.

Change #fff with the background color you want.

Replace #000 with scrollbar color as your wish.

Finally, the most interesting thing about this tutorial replace #0080FF with your hover effects it meant when you click on the scroll bar so which color appears.

Click on Save Template and see the new trendy discovery of web designing.

Connected Article: 6 Awesome Recent Post Widgets for Blogger.

More Over

So this tutorial helps you to turn your simple look template into a dynamic and if you are a new in web designing so it be a best relaxing tool for you in every step. It also makes your template speed loaded because the above style is totally optimized with simple CSS3 so you don’t need to worry about site speed just add it and then check what you see.