Last time we learned about Google custom search engine on blogger , which we mention in widgets section of our web. Today we are going ...
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.
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.
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.
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