331A96E0-3037-43FC-8D93-543B900B11C9

😍 Loving this theme? Download

Please enter at least 3 characters.

How To Customize Blogger Scrollbar and Text Selection Color

Blogger allows you to customize default scrollbar color and text selection color with simple css. This article will guide you through that.
How To Customize Blogger Scrollbar and Text Selection Color
How To Customize Blogger Scrollbar and Text Selection Color
Ever thought about if you could customize the text selection color and browser scrollbar color/width on your blogger blog? You can see the live examples on our blog itself. We have changed its text selection color and scrollbars color & width too. Isn't it nice? :) Follow this simple step by step tutorial and do the same on your blog. Make your blog look more professional, eye catchy, user friendly and of course, colorful too.


Customization of Scrollbar

Default color of scroll bar in every browser is grey which can be customized thoroughly. We can customize our blogger's default scroll-bar by customizing its width, height, scrollbar track color, thumb color, thumb hover color and thumb color when scroll-bar is active. 
 
To do so, all we need to do is add these styles to our blogger template's CSS style-sheet. Without further delay, let us do the job.

Step 1) Login to your blogger account >> go to Template >> Edit HTML.
Step 2) Click anywhere inside the template code box then press Ctrl+F on windows and Cmd+F on mac.
Step 3) Find out this little piece of code line ]]></b:skin> and just before that, paste the whole CSS code given below. You can customize its color codes as you wish.
/*--------- Scrollbar Customization by TwistBlogg.Com--------- */
 ::-webkit-scrollbar {
width:8px;
height:8px;
}
::-webkit-scrollbar-track {
background:#FFF;  /*------This is background color of scrollbar track ------*/
-webkit-box-shadow:inset 1px 1px 2px #E0E0E0;
border:1px solid #D8D8D8;
}
::-webkit-scrollbar-thumb {
background:#c0392b;  /*------Thumb color ------*/
-webkit-box-shadow:inset 1px 1px 2px rgba(155,155,155,0.4);
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow:inset 1px 1px 10px rgba(0,0,0,0.4); /*------Shadow on hover------*/
}
::-webkit-scrollbar-thumb:active {
background:#333;   /*------Thumb color when it is active------*/
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.4);
}

Step 4) Hit save button :). In the above CSS code, I have added proper comments to change the color codes to make it easy for every one. If you have further questions, follow the comment route, am eagerly waiting to help you do the job :).

Note: Please do share your blog URL in comments and I'll personally visit every one's blog to check which colors you have chosen. I'll leave a comment too. Fair enough? huh?

Customization of Text Selection Color

By text selection color, what do I mean is whenever someone selects the text with mouse on your blog post then by default its color. Got it? Default background color is always blue and text color is white. Ready to add some more colors to your blog ?

Step 1) Just repeat the previous steps first and find out this ]]></b:skin> code again.
Step 2) As always, paste the code given below after changing the color codes to match with your blog's theme and hit save button.

/*--------- Text selection Customization by Twistblogg.Com------------- */
::selection {
background:#e67e22; /*------This is the background color on selection-----*/
color:#fff; /*------This is text color on selection-----*/
}
::-moz-selection {
background:#e67e22;
color:#fff
}
::-webkit-selection {
background:#e67e22;
color:#fff
}

Final Step:  Do not forget to visit your blog after adding these styles. How can you forget? Right? lol

There is it. These things are of little importance compared to your blog content so do not waste your time on the things like adding every other widget to your blog. Bear with your great content and serve your audience with your best of best. Always give them royal treatment because? They deserve it same as you do. :)

PP: Did you face any problem with your blog template while adding these styles? Just ask me in comments and I'll join you there soon. Now do share, subscribe and like our page buddy, you can do it. :)

Here are a few hand-picked tutorials for you to read next:

Share this post

Explore more articles by Satbir

20 comments

Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. [img]https://t3.ftcdn.net/jpg/02/91/52/22/360_F_291522205_XkrmS421FjSGTMRdTrqFZPxDY19VxpmL.jpg[/img]
  2. New web site is looking good. Thanks for the great effort.
    step and repeat backdrop
  3. It's really awesome
    https://tillwhenitolerate.blogspot.in/
  4. https://tillwhenitolerate.blogspot.in/
  5. works only for chrome and safari... not for ie and firefox...b creative has a solution for those if anyone is interested... (http://bcreativeweb.blogspot.my/2013/09/custom-scrollbars-using-css.html#.WOXJAp4lFdg)
  6. It's a great site! Very helpful for newbies like me :p

    https://awsmtrickz.blogspot.com
  7. its really amazing!!
    thanks to admin
  8. Appreciated a lot brother with <3 it helps me a lot in customizing my blog, as it gives a unique look and am happy thanks ... thanks ...and
    Thanks again :)
  9. Thanks!
  10. Works perfectly fine, buy on PC, I wonder how it will look like on mobile

    Tested onTricksbar
  11. done,tanks you...
    reps tricksbar.com
  12. It work fine, thank you!
  13. hi buddy, this is my blog www.altayeb-tech.com i want to change post titles color how can i do it?
  14. Bro It's Not Working Both Check out Self It's using our blog http://dazinternetexpert.blogspot.in/
  15. Thanks bro! ... http://journeytowardspeacefulllife.blogspot.com/
  16. great post bro! : -)
  17. nice Work
  18. Thanks for this helpful post :)
    I tried this feature on my own blog, and it works, but the bottom scrollbar is shown. How can I hide it?
    plus972.blogspot.co.il
  19. thanks a lot okay. my blog address is Http://www.gurusland.blogspot.com.ng
  20. Really a top class article.
    Everyday i visit your website and learn lot of new things.
    Thanks for share .

    And please post something about how to grow up visitor on blogger.

    Droid4apk
Post a Comment