Home
Blogger

How To Change Blogger Default Text Selection Color by CSS3

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 #94F0D3 this 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.

1 comment

Go Up