Skip to main content

6 Best Scroll bar Widgets For your Site + How to Add it Tutorial For Blogger

6 Best Scroll bar Widgets For your Site + How to Add it Tutorial For Blogger Top Image


There is no need to give an intro on what a scroll bar is, but you might need to know its use. You might have a lot of tabs opened on your browser, why not check their scroll bars out. The default scroll bar is what your site might also have, on chrome it looks like this.


A normal Chrome scrollbar

A custom scroll bar is used to make your template fully customized. It will give your template a more professional feel. For example, if your template's main color is black, then why not use a matching black scroll bar? Same goes for all the other colors.
Now I am going to present up to 6  AWESOME SCROLL BAR STYLES especially for all of you. The amazing scroll bars will add that elegant essence that your site is currently missing. 
NOTE - These scroll bar style will be given in CSS codes. If you want to change the color or size then you can because these codes are fully customizable.

6 CSS SCROLL BAR WIDGETS

Gray Scrollbar
This gray scrollbar is very simple and cute. If you do not like the color in this or in any of the next scrollbars, you can easily change it by replacing the color codes with your desired ones.

Grey css Scrollbar style

This is the CSS code for the Grey Scroll Bar
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } ::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; }
Blue Lined Scroll Bar
This blue lined scrollbar is very pretty and gives more of a creative look. You can change the width of the lines and the colors.
Blue lined css Scrollbar style

This is the CSS code for the Blue Lined Scroll Bar
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px; } ::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { background-color: #3366FF; border-radius: 10px; background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent) }
Green Gradient Scroll Bar
This gradient scrollbar is quite unique. You can change the density of gradience and the color pattern too.
Green CSS Scrollbar style

This is the CSS code for the Green Gradient Scroll Bar
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: #F5F5F5; border-radius: 10px; } ::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #FFF; background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(.6,#54DE5D)) }


Red and Black Gradient Scroll Bar
This is just another beautiful version of the gradient scrollbars just like the one above to give you another idea of a pattern you can use.
Red N' Black css Scrollbar

This is the CSS code for the Red and Black Gradient Scroll Bar
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); border-radius: 10px; background-color: #444444; } ::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #D62929; background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent) }
Black And Grey Scroll Bar
This scrollbar offers a simple pattern. You can again, change the colors and the density of the lines to your liking and for it to match your site.
Black N Grey css Scrollbar style

This is the CSS code for the Red and Greay Scroll Bar
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px; } ::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { background-color: #AAA; border-radius: 10px; background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .2) 75%, transparent 75%, transparent) }
Orange Patterned Scrollbar
This is a more vibrant example of the scrollbar I have provided above and is availbable for you to make all the changes you need.
Orangey css Scrollbar style 

This is the CSS code for the Orange Patterned Scrollbar is
::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}
::-webkit-scrollbar { width: 10px; background-color: #F5F5F5;::-webkit-scrollbar-thumb background-color: #F90; background-image: -webkit-linear-gradient(90deg,rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)}
That's all the CSS codes I have for now, but wait! How on earth will you use them. No worries, That's why I promised a tutorial for you guys. 

How To Add The Scrollbar To Your Blogger Template Tutorial

1. Log into your Blogger account and visit your Blogs's Dashboard

2. Go to the Template section and click on Customize.

Step 1, 2 and 3 To Add A Scrollbar CSS

3. Enter the Template Designer and enter the Advanced Section. From there, click on the Add CSS tab.

4. Select your favorite Scrollbar and add the CSS code in the given space.


Step 4 To Add A Scrollbar CSS

5. When you are satisfied, click the Apply to Blog button and then click View Blog.


Step 5 To Add A Scrollbar CSS

6. You are done.

Now, you have a completely new scrollbar to match your template. Want more styles? The good thing is that you can easily customize all of these scrollbars to give it any look you could possibly want. We just gave you some inspiration, basic designs or a base structure. Call them whatever you want.

What do you think? Do you link simple or BOLD! And if you have special scrollbars that you want to share, give a comment or send an email through the contact form. We will feature your scrollbar by adding it into our post. Check back later for more awesome posts like these.

Comments

Post a Comment

Popular posts from this blog

How to Remove the Designed/Created by Copyright Mark From A Free Blogger Template

Whenever we write a new blog, we get set with default blogger templates which are quite unattractive. Even though Blogger.com has updated its list of default templates for us to choose from, many of us prefer to use our own templates or those provided by free and paid template giving sites.  Some people think that the paid templates given are either too expensive, do not find it necessary to buy them, or prefer the free copyrighted versions. But personally, whatever reason we might have not to buy a paid blogger template, we all have that little desire to remove that thing we didn't pay to remove.  So, today I will show you guys how to remove copyright marks, and then I am sure that you will be able to call your template completely yours. The Main Issue Leading template distributor sites like   T emplateify , T emplateism , Goyabi, etc. distribute templates with both free and paid versions. If we buy the paid templates we get many features like support,...

Marketing Myths That Are Killing This Generation Of Businesses - The Right Approach to Grow Your Business

You can make blogs. You can tweet or post updates on social media regularly. You can post daily podcasts. You get even create a profile on LinkedIn. You can create endless YouTube videos.  You can build an influential presence on Instagram and Snapchat and Pinterest. Then, fingers crossed, you hope that you build your own tribe of people that love you.  Then you hope that your readers, followers, or subscribers, buy from you. It's called content-first marketing , and it rarely works. Sure, you may get tons of likes and reshares and may be useful to get loads of attention, but if it doesn't help you build a business, it isn't worth it. There's a better way. People have built multimillion-dollar companies with one or two pieces of content. Here is the key. Instead of using the "content-first marketing" approach, you need to obsessively focus on a "problem-first" approach .  Russ Ruffino, founder of Clients on Demand said "For months in 2013, all ...

Top 10 Common Mistakes Every Blogger Makes + Infographic

Heya! Today, I was going through Pinterest , and I saw a pin which led me to some questions on Quora  (BTW, check out my profiles too! 😉) on which people were giving links in their questions and asking people what they thought was wrong about it because they weren't able to get visitors. I took a look at all of them, mine, and the blogs and websites of other successful people. There were many major differences, many that even I overlooked. I have fixed up my blog and today, I am writing this post so that you can do the same! Take a look at this very special infographic I prepared for all of you. You can read it and understand the basic purpose of this post or you can also continue ahead after reading the infographic to understand every point better with extensive detail. First of all, how did you feel about my infographic? Do you think that you can relate? No need to feel ashamed, these are some problems and mistakes that most bloggers commonly face when it comes to ...