Add Custom Webkit Scrollbar in Blogger

Last time we learned about Google custom search engine on blogger , which we mention in widgets section of our web. Today we are going ...


webkit scrollbar for blogger
Last time we learned about Google custom search engine on blogger, which we mention in widgets section of our web. Today we are going to learn about a magic effect of CSS that is scrolling effect of CSS on blogger. Nowadays everyone takes advantage of CSS because of his time importance it’s true that it's really save our time from designing. The abbreviation of CSS is Cascading Style Sheet which is used to make a web page or application more beautiful with the better usage of the hypertext language (HTML).
To change the color of scroll bar we have to know about the webkit scroll bar because webkit manage the scroll bar which we seen on different browsers.

What is WebKit Scroll Bar?

The Webkit scroll bar is present in the right side on every browser, it was introduced by CSS pseudo. Webkit scroll bar has divided into seven types. Look the below image for understanding its parts.

scrollbar
Webkit-scrollbar--->1
Webkit-scrollbar-button--->2
Webkit-scrollbar-track-piece--->3
Webkit-scrollbar-thumb--->4
Webkit-scrollbar-corner--->5
Webkit-scrollbar-resizer--->6

What Difference Between Default and Custom Scroll bar?

There are many reasons to choose the customized scroll bar, some choose for the site beauty and some user adopt this widget for practicing or for the demo purpose. The default scroll bar is less design with CSS, and it reminds us the old era. So every second blog users recommend and use the customized scroll bar because it gives the pro look to the web. In the favor of customized scroll bar we share the difference image below.

custom scrollbar

Setup Instruction of Webkit Scroll bar in Blogger

Before adding the script backup the template for safety. It’s very easy to do just we have to follow the copy and paste method. For better result see the below instruction.
  • Go to blogger.com>> Move on template>> Click on edit html.
  • Press CTRL+F and write]] ></b: skin> on the given search box.
  • Now paste the below codes just after the above code.
/* --- PROTECHNIFY CUSTOM SCROLL BAR EFFECTS IN BLOGGER  --- */
::-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, #E73E3E 10%, #E73E3E  10%);
}
::-webkit-scrollbar-track {
}
  • And then  finally click on save the template.
  • For your own choice color replace #E73E3E with the color that you want.

Last Words

These scroll bar widget make the template style more advancements and beautiful. So I hope you would like the CSS effects of the scroll bar. You can also do more editing and play with this widget code. For any type of confusing or error ask fully in the below comment box. Chill and wait for our next article.

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 in Blogger
Add Custom Webkit Scrollbar in Blogger
http://4.bp.blogspot.com/-q8xplR-EajQ/VHXn7weinaI/AAAAAAAAH8M/-wdbiCf60u4/s1600/webkit%2Bscrollbar%2Bfor%2Bblogger.png
http://4.bp.blogspot.com/-q8xplR-EajQ/VHXn7weinaI/AAAAAAAAH8M/-wdbiCf60u4/s72-c/webkit%2Bscrollbar%2Bfor%2Bblogger.png
PRO TECHNIFY
https://www.protechnify.com/2014/11/add-custom-webkit-scrollbar-in-blogger.html
https://www.protechnify.com/
https://www.protechnify.com/
https://www.protechnify.com/2014/11/add-custom-webkit-scrollbar-in-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