Scroll bars are one of the Object that available in Graphical User Interface (GUI). Using a Scroll bar, you can continuous view a list of items. One of the main application of scroll bars are on websites. In 95% of cases, you can see a scroll bar of following type. They are scroll bars without any customization. That means default scroll bars.
Have a look on this blogs scroll bar. Is it interesting? Do you need a scroll bar for your blog of this type? Here I am going to show how you can customize your scroll bars on blogger platform.
Need of customizing scroll bars?
I don't think that there is a need for changing the default scroll bars. Because it will not affect a blogs aim like Page Rank, Traffic or Search Engine Optimization. Only thing is that it will increase the look of your blog and attract your visitors.
How to customize Scroll Bars in Blogger?
Changing default scroll bar in blogger is very process. Follow the below steps.
*.Go to Dashboard
*.Click Template
*.Edit HTML
*.Now Search for the Code ]]>
*.Above that code paste the below described code.
Code For Custom Scroll bar 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, #FFD801 10%, #FFD801 51%); } ::-webkit-scrollbar-track { }
*.Now Replace #FFD801 with the color you need in your scroll bar.
At last your template will looks like the following
I hope that you had enjoyed this tutorial. If you have any doubt regarding the customization of scrollbars in blogger, comment below. I am happy to help you.
Blog Archive
- Sep 26 (10)
- Sep 27 (9)
- Sep 28 (3)
- Sep 29 (1)
- Sep 30 (1)
- Oct 02 (3)
- Oct 06 (1)
- Oct 07 (1)
- Oct 08 (1)
- Oct 11 (1)
- Oct 12 (1)
- Oct 23 (6)
- Oct 24 (2)
- Oct 26 (1)
- Oct 27 (1)
- Oct 29 (4)
- Oct 30 (8)
- Oct 31 (2)
- Nov 01 (3)
- Nov 02 (1)
- Nov 03 (3)
- Nov 06 (1)
- Nov 07 (1)
- Nov 14 (1)
- Nov 15 (1)
- Nov 21 (1)
- Nov 26 (1)
- Dec 08 (6)
- Dec 11 (1)
- Dec 15 (9)
- Dec 20 (2)
- Dec 21 (3)
- Dec 31 (1)
- Jan 04 (3)
- Mar 18 (1)
- Mar 30 (1)
- May 09 (1)
- May 10 (1)
- Jul 03 (1)
- Jul 15 (1)
- Jul 17 (3)
- Mar 19 (1)
- Mar 23 (1)
- Mar 29 (1)
- Jul 05 (1)
- Aug 19 (1)
- Sep 17 (1)
- Sep 18 (2)
Post a Comment