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 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 …

FIXED! Adsense Ads not Showing in Homepage of Blogs or Website

Problem Solved! have you experience your Adsense ads not showing on homepage? Ads are showing on other pages except for homepage, well just this week I had a hard time figuring out why my ads are not showing in homepage.

I have another blog that is using Adsense ads. After a day of fixing almost all my template errors still the Adsense ads are not showing so I tried to search for it on internet.

Some forums will tell you that it is about updating your privacy policy pages, well I did that also but there's no effect.

The solution is very simple just navigate to blogger setting or wordpress seo settings. I'm focusing on blogger since my blog is in blogger platform.




Go to Blogger settings ->> Search Preferences->> Enable search description. Click yes then put your sites description and save. That's it! reload and see the magic :D

Facebook Popup (Like Box Widget) With Time Delay

Facebook Popup Like Box Widget With Light box and Time DelayIf you are looking on how to increase your blog social media connection you can use widgets that will expose it to your reader. One of the best way is to use Facebook like box will pop up with the lightbox effect. This facebook pop up is not annoying because of its ability to detect its user cookies. It won't open when it is already closed. It has a time delay also to avoid visitors leaving your blog. Just set it in any way you want and increase your followers/likes easily.
Add Widget to Your Site Add the following code anywhere in any widget/HTML box.
Go To layout and add gadget--> HTML/JavaScritp Box Paste all the below code -> then save

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#…