New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:

How to Create Custom Webkit Scrollbar in Blogger Blog

Would you like to upgrade the Scroll bar of your site? Parchment bar shows up at the right half of the screen and, it permits clients to span down the page at whatever point they drag there mouse up or down the page. To give an easy to understand experience to your guests, it is fundamental to have a Smooth Scroll bar. On the other hand, there is probably Custom Scroll bar does the employment liberally, yet it is not great. Few days back, our peruser educated us about the brilliant Webkit Scrollbars that he has seen on distinctive sites. Besides, he additionally asked for us to create a comparable one. Thus, in this article we will figure out How to Create Customize Webkit Scrollbar in Blogger Blog? Please take a look at my scrollbar for a live a demo.

Instructions to Add Webkit Scrollbar in Blogger Platform? 

In all honesty, there is no intricacy in this excercise on the grounds that we should do nothing more than to embed a CSS to our topic, and it would do the employment easily. To introduce Webkit Scrollbar in your blogger format consider the accompanying directions.

Step 1. Go To >> Templates >>EDIT HTML >> Proceed.
Step 2. Now in the theme Search for ]]></b:skin> and above it Paste the Following CSS Coding.
/* --- Bloggingtipsandtrix CUSTOM WEBKIT SCROLLBAR IN BLOGGER BLOG --- */
::-webkit-scrollbar {
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #158aee 20%, #158aee 60%);
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #168eca 20%, #168eca 60%);
::-webkit-scrollbar-track {

Short Customization:

Replace #ddd to change the background of your scrollbar. You can use our color code generator.
Then replace #158aee with the color that you want to see in the scrollbar and the hexadecimal
168eca for its hover effect.
Step 3. After doing all the customization just press the Save button. Now Visit your site and we are sure it wouldn’t let you down. By using the same technique, we can customize many elements of a website. We will soon release their tutorial too so stay tuned with BTAT
About the Author:
tilt  hover effect
Hello folks! This is Viral Apps, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

Cerwenlloyd Gefjun

Related Posts Plugin for WordPress, Blogger...