Add lightning effect in specific blog link

blogger widgets

4
data:blog.title
hover effects

This is a simple tutorial I have created this with CSS hover effect. Sometime we need to highlight some links when we write blog article. By using this trick you can easily add an isolated link effect by using CSS hover code. Its seems to me interesting that's why I have decided to share with my loyal readers. This effect work 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.

Live Demo

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.bloggerspice.com**/
a.BloggerSpice {
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.BloggerSpice: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="BloggerSpice" 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

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

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

/**Trick by www.bloggerspice.com**/
a.BloggerSpice {
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.BloggerSpice: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="BloggerSpice" 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.
Happy Blogging!!!
Add lightning effect in specific blog link
4 Stars stars - "Add lightning effect in specific blog link" This is a simple tutorial I have created this with CSS hover effect. Sometime we need to high...

Post a Comment

this was cool and awesome .
good code work.
this was nice , like it a lot.
keep going.


my rgards
www.parallelblogging.blogspot.com

rabbi..thanks for the post..the first instruction is functioning..but if i use it as permanent it is not functioning...

Hi Dewey...There was an extra space in "BloggerSpice"..I have fixed this now it will work. Thanks for informing the issue..

thanks dilip...

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *