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 scrollbar hover effects blogger, hover effects scrollbar blogger
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.

COMMENTS

Name

Android,2,backlinks,7,Blogger,45,Errors,1,How To,31,Make Money Online,2,SEO,13,SMM,10,Templates,8,Tools,7,Tricks,15,Web designing,17,Widgets,24,WordPress,4,
ltr
item
PRO TECHNIFY: Add Custom Webkit Scrollbar with Hover Effects in Blogger
Add Custom Webkit Scrollbar with Hover Effects in Blogger
http://4.bp.blogspot.com/-nYTVD88V_SQ/VXWH6S9w7yI/AAAAAAAAIXE/FpSFMC7nh8Y/s640/Custom-webkit-scrollbar-hover-effects.png
http://4.bp.blogspot.com/-nYTVD88V_SQ/VXWH6S9w7yI/AAAAAAAAIXE/FpSFMC7nh8Y/s72-c/Custom-webkit-scrollbar-hover-effects.png
PRO TECHNIFY
https://www.protechnify.com/2015/06/custom-webkit-scrollbar-hover-effects-blogger.html
https://www.protechnify.com/
https://www.protechnify.com/
https://www.protechnify.com/2015/06/custom-webkit-scrollbar-hover-effects-blogger.html
true
8223102945718438291
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy