Skip to main content

Link Lighting Effects For Blogs

link effects for blogsBeautiful Link Lighting Effects For Blogger 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.

Comments

  1. this is very nice
    can you pls tell me
    which code for "blue" lighting color effect

    ReplyDelete
  2. also code for "blue" font color

    ReplyDelete
  3. Thank you so much for your supports to me with these priceless Guide.

    ReplyDelete

Post a Comment

Popular posts from this blog

How To Add HTML Contact Form for Blogger Blogs

Our problem in creating a contact form is that you don't want third party contact form cause it will burden your loading page and if you want to give your reader an instant contact form but don't want to show your email, this HTML form will help you with your problem

You can create a simple form, as displayed below, to enable your visitors to send you comments, questions or whatever you'd like.

1.Log in to your dashboard--> layout

2.Click on "Add a Gadget".

Now Select "HTML/Java Sricpt"

3.Copy and Paste below code into it.
<FORM action="mailto:[email protected]" method="post" enctype="text/plain"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%"><TR><TD width="30%"><DIV align="right"><B>Name:</B></DIV></TD><TD width="70%"><INPUT type="text" name="name" s…

High PageRank Do-Follow Forums List (606)

Besides from getting your answers to unanswerable queries, the good thing of do-follow forums is to create a good back links through their High Page rank pages on Google, creating your pointing to your site makes your blog grows faster in ranking,

Now a days it is very hard to find do-follow link website because they are making their site as no-follow, like the wiki, it is before a do-follow site but since many SEO experts use wiki as spam they control it and made it no-follow, so now I am giving you a list of do-follow and high ranking sites that you can use to make your blog popular.

Its your tactics on how to create your links on this site, but remember not to spam cause Google might hit you. :)

Here are the list enjoy

ForumPR1http://www.addthis.com/forum92http://chronicle.com/forums/83http://forums.myspace.com/84http://forum.joomla.org85http://forums.cpanel.net86http://forum.siteground.com87http://c7y-bb.phparchitect.com88http://forum.meebo.com89http://forums.mysql.com/710http://f…

How to Use Facebook, Disqus and Blogger Comment tab Together in Blogger Blogs

As writers of  blogs, we all are aware of the importance of comments. While it is true that some blogs/websites tend to disable comments entirely, those are special instances where the websites do not essentially require comments. However, in general, comments form an integral part of any blog, be it a personal one or a magazine site. After all, what good is any info unless it provokes a healthy discussion?

All blogging platforms (including WordPress) come with native support for some sort of comment mechanism which seems to suffice for most bloggers. But sometimes, users may require some dedicated or specialized comment mechanism. This is where third-party commenting systems come in handy. In this article, we will take a look at some of the major third-party commenting mechanisms

Disqus
Disqus is a mature comment management system and perhaps the most used amongst bloggers and website owners. Introduced back in 2007, it is currently serving more than 750,000 websites. According to a …