How To Customize Scrollbar In Blogger

One of the most wanted matter inwards a template is responsiveness to impress visitors. It play a real of import purpose inwards reputation of a blog. As basic things of a responsive template are bold exercise of colors, smoothen scrolling, impressive carte du jour so people unremarkably focus on them but it is non but well-nigh that because several other things are also responsible for a responsive blueprint similar a fashionable scrollbar. I don't matter scrollbar needs introduction everyone knows what a scrollbar is. So this post service is well-nigh customizing scrollbar inwards blogger past times CSS. I volition part some fashionable too impressive scroll bars below, pick out yours too add together it inwards your blog.

How To Customize Scroll bar In Blogger?

Step 1: Go to blogger dashboard, navigate to template too edit html.

Step 2: Click within the code too search for below slice of code:

]]></b:skin>

Step 3: Choose a customized scrollbar too re-create its code.

Style 1: 

body::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
body::-webkit-scrollbar {
 width: 12px;
 background-color: #F5F5F5;
}
body::-webkit-scrollbar-thumb{
 border-radius: 5px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #ccc;
}

Style 2:

body::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
body::-webkit-scrollbar {
 width: 12px;
 background-color: #F5F5F5;
}
body::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #35BB6E;

}

Style 3:

body::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
body::-webkit-scrollbar {
 width: 14px;
 background-color: #ffffff;
}
body::-webkit-scrollbar-thumb {
 border-radius: 5px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #3993E2;
}

Step 4: Paste it higher upwardly the below slice of code.

]]></b:skin>

Step 5: Click on salvage template too you lot are done.

Custom Style:

You tin brand a custom scrollbar also past times making changes according to your needs inwards highlighted fields above. Read explanation of each code constituent below:

Color of scroll bar:

To alter color of your scrollbar replace #3993E2 with your chosen color code in  background-color: #3993E2; in the tertiary style.

Edges of Scroll bar:

To alter radius of edges of your scroll bar brand changes in border-radius: 5px; in the tertiary style.

Background color of scrollbar:

To alter background color of your scroll bar brand changes in background-color: #ffffff; in the tertiary style

How to conk code of a color? Click here to exercise color code generator!

I promise you lot liked this post. If you lot accept whatsoever work or suggestions delight exit a comment below. I volition conk dorsum to you. Follow too subscribe to conk tidings  about novel posts. Don't forget to part this post. Thanks for visiting 101Helper.

Search tags: Blogger tips too tricks,Responsive blogger template design,CSS tricks blogger,Stylish scrollbar codes for website or blog,Impressive blogger template design,How To Customize Scrollbar In Blogger

Bagikan Artikel ini