How To Customize Blogger Scrollbar and Text Selection Color - Bloggerdroidseo Where bloggers relate to learn blogging tips and tricks Bloggerdroidseo Where bloggers relate to learn blogging tips and tricks : How To Customize Blogger Scrollbar and Text Selection Color

Pages

Featured Featured
how-to-use-your-android-device-as
How To Use Your Android Device as Keyboard and Mouse
dent-free-data
Sharing of Apk Files on Whatsapp Made Easier
9mobile-special-offer
9mobile Special Data, Get 1GB Data for N200 and 5GB for N1000
mtn-double-data-cheat
New Method To Activate MTN 100% Double Data Bonus Via IMEI Tweaking


Thursday 14 December 2017

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 scrollbar's 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 TwistBlogger--------- */
::-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 on this HOLI season?

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 BLOGGERDROIDSEO ------------- */
::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. :)



Copy the link below and Share with your Friends:

No comments:

Post a Comment