How to Change the Text Selection Highlighting Color in Blogger

The quickest way of selecting/copying text from a blog/website is to drag your mouse over that content. The selected content becomes highlighted. Mostly the highlighted text color is blue (Default color). Have you noticed that when you highlight/select text on some top websites, the text's background color is unique and matches the site's color scheme? So, have you ever wanted to change the highlighted text color of your blog? If yes then today we will show you that How to Change the Text Selection Color in Blogger. Its really easy to do and can be done with just the tiniest bit of simple CSS codes. This trick works on Chrome, Firefox, Safari and on latest versions of I.E.

How to Change the Text Selection Highlighting Color in Blogger

Step 1. Go to your Blogger Dashboard >> Select a Blog >> Template and click Edit HTML button
Step 2. Click inside the template code area and by using Crtl+F search for the ]]></b:skin> tag
Step 3. Now copy (Ctrl+C) the below code and paste (Ctrl+V) it just above/before it (]]></b:skin> tag)

::-moz-selection  {
background: #00cc00;
color: #FFFFFF;
text-shadow: none;  }
::selection   {
background: #00cc00;
color: #FFFFFF;
text-shadow: none; }

Customization:

• Replace 00cc00 with the text highlight color
• Replace FFFFFF with the text color (highlighted text color)

Step 4. Click Save Template button
And you're done!
Congratulations: You've successfully changed your Text Selection Highlighting Color. 

From Editors Desk

We hope this article may have helped your in learning How to Change the Text Selection olor in Blogger.

Read More

How to Create an Image Rollover Effect

The Image Rollover effect is one in which image changes on moving your mouse cursor on the image. It changes the image on moving mouse cursor on it and reverts it back to the original image on mouse out. Image Rollover is a popular effect used in many websites. Bloggers use this effect for gaining visitors attention. There is nothing technical in creating this effect, all you need is just two pictures. The onMouseOver and outMouseOut attributes are used to make it functional. Image Rollover is a simple trick that you can use for gaining attention of your visitors.
Move your Mouse Cursor on the Image below to see how it works:

How to Create an Image Rollover Effect

Here's the code for creating a Rollover Effect:

<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE" onmouseover="this.src='URL OF THE SECOND IMAGE'" onmouseout="this.src='URL OF THE FIRST IMAGE" /></a>

Customization:

• Replace URL ADDRESS with the URL where you want to redirect people on clicking

• Replace both URL OF THE FIRST IMAGE with the URL of your first image

• Replace URL OF THE SECOND IMAGE with the URL of your second image (That will appear on mouse hover)

How to Use Image Rollover Effect in Blogger Posts

Log in to your Blogger Account >> Select a Blog >> New Post and Switch to HTML tab. Now copy the above code and paste it where you want to add the image in your post. Make necessary customizations and Publish your Post.

How to Use Image Rollover Effect in Blogger Sidebar

Log in to your Blogger Account >> Select a Blog >> Layout >> Add a Gadget and select HTML/JavaScript gadget from the list. Paste that code, make necessary customization and click Save button.

Read More