How To Change Blogger Default Text Selection Color by CSS3 - My Blogger Market

Breaking

Post Top Ad

Responsive Ads Here

Post Top Ad

Responsive Ads Here

3/18/2015

How To Change Blogger Default Text Selection Color by CSS3

CSS3

There are many things that we can do by using CSS. You will see Blogger widget is can easily modify by using CSS coding. Similarly I will show you simple trick by using CSS3 that will help you to change your Blogger template default text selection color. By default if you select any text by using mouse pointer on your Blogger template then it will highlighted in Blue color. But I will show you different highlighted color when any user select text from your template.

However this CSS3 trick is recently supporting FireFox, Safari, Chrome and Opera but if your browser doesn't support then ignore this trick.

default text color
Before Applying CSS3 Trick

after trick
After Applying CSS3 Trick
For adding the trick please follow the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by Pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 4 Copy and Paste the below code Before/above ]]></b:skin> 

::selection {background:#94F0D3;color:#FFFFFF;}::-moz-selection {background:#94F0D3;color:#FFFFFF;}::-webkit-selection {background:#94F0D3;color:#FFFFFF;}

Step 5 And click on orange color Save templates button. 

Customization

  • You will see here background color code I have used #94F0D3this is the main text selector color. So change that color that match your Blogger template main color. You can use our color picker for generating color code.
  • For changing text color after selection you should alter #FFFFFF code. Here I have added white color code. So when a user select text the text color will turn white. You can change it according to your own desire.  
That's all about the tutorial. Now check your Blog and select any text or paragraph and see it is now showing different color. This all about CSS3 trick so anybody can modify the code.

No comments:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.

Post Top Ad

Responsive Ads Here