How to Create Custom Webkit Scrollbar in Blogger Blog

Advertisements
Do you want to enhance the Scroll bar of your website? Scroll bar appears at the right side of the screen and, it allows users to scroll down the page whenever they drag there mouse up or down the page. To provide a user-friendly experience to your visitors, it is essential to have a Smooth Scroll bar. However, there is no doubt that Custom Scroll bar does the job quite handsomely, but it is not perfect. Few days ago, our reader informed us about the colorful Webkit Scrollbars that he has seen on different websites. Furthermore, he also requested us to develop a similar one. Therefore, in this article we will learn How to Create Customize Webkit Scrollbar in Blogger BlogSpot Blog?

What is the Definition of WEBKIT Scrollbar?

Mostly of the people are still thinking what does the word “WEBKIT Scrollbar” means, it is a vertical or horizontal bar which usually appears at the right side of the screen and that allows users to scroll down the page through their mouse. If anyone is still unable to understand how it works then, don’t forget to check the following demonstration which would clear all the misconception that is wobbling into your brains. Consider the following screenshots.
::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

Why to Use Customized Scrollbar?

There is no lethal reason why a person could say a no to Customized Scrollbar because it adds a new elegant life to his website. Consider that a person has a highly professional website but since, the Scrollbar is from old-school, so it is quite clear that, it will destroy the complete outlook of a website. To learn more about the difference between an ordinary or and a customized scrollbar consider the following screenshot.

How to Add Webkit Scrollbar in Blogger Platform?

To be honest, there is no complexity in this tutorial because all we need to do is to insert a CSS to our theme, and it would do the job quite effortlessly.  To install Webkit Scrollbar in your blogger template consider the following instructions.
  • Go To Blogger.com >> Templates >>EDIT HTML >> Proceed.
  • Now in the theme Search for ]]></b:skin> and above it Paste the Following CSS Coding.
/* --- MyBloggerLab 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, #336699 10%, #336699 51%);
}
::-webkit-scrollbar-track {
}

  • Then Replace #336699 with the color that you want to see in the Scrollbar.
All Done: 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 MBL 
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

29 comments

December 9, 2012 at 5:43 PM

Done :p

Editorial Team MOD
December 9, 2012 at 5:50 PM

LOL .. Good.

December 9, 2012 at 6:57 PM

Awesome !

December 9, 2012 at 7:54 PM

Simply Great!!!!!

December 10, 2012 at 12:40 AM

beautiful dude! I expected this!
Warm Regards,
MyPremiumTricks

December 10, 2012 at 2:27 AM

Very nice scroll bar dude.. but wont this affect the load time of the blog? already the load time of my blog CoreBlogging is about 10 seconds. will adding this delay page load?
do u have any tips to reduce page load speed without taking off any of my content ?

December 10, 2012 at 4:19 AM

Can we give a curve to the scroll bar?

Editorial Team MOD
December 10, 2012 at 3:50 PM

Yeah it is Possible. Instead of Adding the Above CSS in your Theme Add the Following one.

::-webkit-scrollbar {
width: 12px;
}

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

This will add a Curve (Capsule) type Webkit Scrollbar in your blogger blog.

Editorial Team MOD
December 10, 2012 at 3:50 PM

Thanks Pal, I knew that. Peace

Editorial Team MOD
December 10, 2012 at 3:50 PM

Thanks for those kind words. Gives more power to us. Peace

Editorial Team MOD
December 10, 2012 at 3:52 PM

Well, It wouldn't even affect a Single Second of your site speed because its purely CSS no JavaScript or anything elese.

We have a Complete Guideline on Reducing Page Load time Please Check it out. We have added URLs consider reading them

http://www.mybloggerlab.com/search/label/Accelerate%20Blog%20Speed

Hope that Helps. Peace

December 11, 2012 at 5:54 AM

Can i post this post on my blog and i will give creadits to your blog??This will increase your backlinks also??

Editorial Team MOD
December 11, 2012 at 7:20 AM

As Long AS You give Proper Credits then there is no problem. Feel free to share it with your readers. Peace

December 12, 2012 at 7:46 AM

I posted it see it here - http://goldentechsforu.blogspot.com/2012/12/how-to-create-custom-webkit-scrollbar.html

Editorial Team MOD
December 12, 2012 at 7:58 AM

Its Fine but you have copied our Content too. You're allow to share Coding not the Whole Content. Please Remove our content but you are free to share the coding with proper credits. Peace

December 12, 2012 at 9:31 AM

Thanku for your response
I appreciate you taking time to reply back to all comments

Happy blogging

December 23, 2012 at 4:12 PM

Super duper cool.. I have done with my blog.. Thanks MR..

December 26, 2012 at 10:52 PM

really clear expalin thanks MBL

January 20, 2013 at 12:39 AM

cool site i just love this site
also visit my site www.danishasad786.blogspot.com

February 22, 2013 at 5:14 PM

Your Amazing My friend.

February 23, 2013 at 9:03 AM

this trick is amazing ever nice i like it keep it up

April 17, 2013 at 5:17 AM

Hey its not working :(
See here

Editorial Team MOD
April 17, 2013 at 10:40 AM

It doesn't support Default themes.

May 13, 2013 at 10:08 AM

i think the buttons for scrolling is missing...

i think this code will help..

/* --- MyBloggerLab 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, #336699 10%, #336699 51%);
}
::-webkit-scrollbar-button {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background:#B8B8B8;
}


}

August 31, 2013 at 5:26 AM

nothing happened on my template ,my template is responsive blogger template

Editorial Team MOD
September 8, 2013 at 11:35 AM

Your site URL?

February 15, 2014 at 2:56 PM

I Cannot Find The ]]>. I Searched It By Doing Ctrl+F and It Said 0 of 0 results. Help?

Editorial Team MOD
February 16, 2014 at 12:02 PM

Click anywhere in the template editor then Press CTRL+F and search within the search box open in the editor.

May 6, 2015 at 9:10 AM

Thanks. :)

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.