default-placeholder

Coolest Hyperlink Style of 2013 for Blogger – v1

An eye-catching hyperlink style is a source which helps you to get more pageviews / user which later on proves very effective in Increasing Alexa Rank, and getting your blog / website more interacted.

I am sharing here a CSS Styling Code which will really spice up all your hyperlinks within your blog or outside your blog.

Make Your Hyperlinks Speak:

To add this styling to your Blogger Blog, edit your Blogger Template and then add the following code to the CSS Stylesheet section of your Blog Template.

Search for the following code in your Template:

a {
css code here…
}

Replace it With:
(If above code not found, just add the following code.)

a {
color: #CC0000; //set this colour according to your blog design
text-decoration:none;
text-weight:bold;
}

and

a:hover {
css code here…
}

Replace it With:
(If above code not found, just add the following code.)

a:hover {
background: #CC0000;
color:#FFFFFF;
zoom: 125%; //optional, ( it will enlarge your link on mouseover )
text-decoration:none;
}


Note a Few Points Here:

  • Replace #CC0000 with the colour code of your blog design’s main colour.
  • zoom: 125%; is optional, you might remove this line if you don’t want your link to be magnified on mouseover.
  • Always look if the a { } or a:hover { } attributes are present or not, because duplicate copies can create problem for your blog design.

See Demo Here

Thanks for reading the article, I hope it works for you!
Also See: 11 Killer Tips for Better Twitter Marketing

You Might Also Like

Leave a Reply

1 Comment on "Coolest Hyperlink Style of 2013 for Blogger – v1"

Notify of
avatar
Sort by:   newest | oldest | most voted
Tommy
Guest

Great tip! I will add it on my blog!

wpDiscuz