Link Lighting Effects For Blogs

This is a simple tutorial is made by my friend Rabbi he’s good in css and if you have time you can visit his blog for css designs, this was created with CSS hover effect.

Many times we need to highlight some words when we create blog article. By using this trick you can easily add an isolated link effect by using CSS hover code.

I noticed that I haven’t shared yet anything about link effects that’s why I have decided to share with my readers. This link effect works best those who use black or deep color blogger templates. But those who are using white color template I have added an extra line of code to change the lines background color. Hope you would use it for highlighting special links on your blog.

This special effect can be used by 2 ways. Temporary or permanent base.

Hover On This Link To See the Effect
Lightning effect in specific blog link for Temporary Use
For temporary use you have to add whole code all the time when you would like to add effect.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
Step 2 Click on Now click on -> New Post -> HTML->
Step 3 Now put the whole code from below.

<style>
/**Trick by www.blogs911.com**/
a.Blogs911 {
font:normal 40px Impact,Arial,Sans-Serif;
background:#000000;
  color:#ccc;
  text-decoration:none;
  text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}
a.Blogs911:hover {
  color:#fff;
  text-shadow:
    0px 1px 0px #FF3300,
    0px 0px 3px #FF3300,
    0px 0px 5px #FF3300,
    0px 0px 30px #FF3300,
    0px 3px 50px #FF3300;
}
</style>
<center><a class="Blogs911" href="#">Click On This Link To See the Effect</a></center>

Customization

Change 40px this for font size.
Change #000000 for link background color.
Change #ccc for font color.
Change #FF3300 for lightning color effect
Replace # with your link address
Replace Click On This Link To See the Effect with link title.

lightning effect in specific blog link for Permanent Use

You can add this effect permanently on your blog by following the below tutorial.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
Step 2 Click on Now click on -> Template -> Edit HTML-> Unfold code ►
Step 3 Now Find this code]]></b:skin> by pressing Ctrl + F
Step 4 Copy the code from below and Paste it Before/above ]]></b:skin>

/**Trick by www.blogs911.com**/
a.Blogs911 {
font:normal 40px Impact,Arial,Sans-Serif;
background:#000000;
  color:#ccc;
  text-decoration:none;
  text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}
a.Blogs911:hover {
  color:#fff;
  text-shadow:
    0px 1px 0px #FF3300,
    0px 0px 3px #FF3300,
    0px 0px 5px #FF3300,
    0px 0px 30px #FF3300,
    0px 3px 50px #FF3300;
}

To use this just write like below wherever you want to use it.

<center><a class="Blogs911" href="#">Click On This Link To See the Effect</a></center>

Customization
Change 40px this for font size.
Change #000000 for link background color.
Change #ccc for font color.
Change #FF3300 for lightning color effect
Replace # with your link address
Replace Click On This Link To See the Effect with link title.