Don't Miss

Add Rainbow Animation Effect to Links in Blogger

By Zohaib Liaqat - 29 Comments
Got tired of Blogger's default link effect? Want to change your links hover effect? Don't worry, today we have a beautiful link effect for your blog. By using this link effect you can make the links on your blog change through different colors when the cursor is hovered over them. This effect works on JavaScript and it's really easy to implement this Rainbow Animation Link Effect to your blog. Follow the steps below to implement this Rainbow Animation Effect to your Blog.

How to Add Rainbow Animation Effect to Links in Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Edit HTML >> and Search for the <head> tag
Step 3. Now Copy the below code and Paste it just below/after the <head> tag

<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive;  // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV;    elmG = elmV;    elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1;  elmB = t2;  elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1;  elmB = t2;  elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1;  elmR = t2;  elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1;  elmR = t2;  elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1;  elmG = t2;  elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1;  elmG = t2;  elmB = t1 - t3;
}
else {
elmR = 0;   elmG = 0;   elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1)    elmR = "0" + elmR;
if (elmG.length == 1)    elmG = "0" + elmG;
if (elmB.length == 1)    elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>

Step 4. Hit the Save Template button
And you're done...

From Editors Desk

I hope this articled helped you in learning How to Add Rainbow Animation Effect to Links in Blogger. Share this article with your friends. 

29 comments to ''Add Rainbow Animation Effect to Links in Blogger"

ADD COMMENT
  1. It is the most effective choice for individuals to utilize https://snapchatonlinelogin.org Play account is to download and install a duplicate of the.

    ReplyDelete
  2. We at Dextemade beamed many diversified brands. And we are also honored to provide you Development, Digital Marketing, 2D / 3D Animation, Graphics Design, and 3D Designing Services to beam your brand / aim too. With our complete preparation. We have a team with very high leading expert professionals.

    ReplyDelete
  3. Are you looking to buy the Best Custom Essay Paper from the best writers? When given assignments, many students look for Top-Ranked Essay Writing Service and through a basic web search, you can find many online companies offering help with Best Custom Essay Ever.

    ReplyDelete
  4. I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business. motion graphic vedios

    ReplyDelete
  5. Codeaze is the pioneer best Web Development Company & we are a creatively rich and technically outstanding Web Application Development & Web Development team which providing best Web Development Services throughout the world.
    Address: Asia Pacific Trade Center, Rashid Minhas Rd, Karachi
    Email: info@codeaze.org
    Phone: 03002399959
    Website: https://www.codeaze.org/service/web-development/ Web Development Services

    ReplyDelete
  6. I definitely enjoying every little bit of it. It is a great website and nice share. I want to thank you. Good job! You guys do a great blog, and have some great contents. Keep up the good work. I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people.
    website development services

    ReplyDelete
  7. Animation is the craft of preparing pictures to recount to a story or even sell an item; it's utilized very much of the time today both on TV and in motion pictures and is an incredible profession alternative for those with innovativeness and mechanical sharpness.cosplay costume

    ReplyDelete
  8. I think this is an informative post and it is very useful and knowledgeable. SEO Agency Calgary

    ReplyDelete
  9. The NSPCC advert by Russell Brooke on TV is a genuine case of how animation can be more successful than surprisingly realistic. manga nelo

    ReplyDelete
  10. We have 5 blogs, 6 websites (some complex, some a single page), 7 Twitter accounts, Facebook (4 Business Pages), Linked-In, Ecademy, Hub Pages, StumbleUpon, Squidoo and other online social networking accounts, all these had to be set up, populated, and now managed on an ongoing basis. This is not something which can be done in 20 minutes per day. We have to work all of these resources on a regular basis to keep ourselves in the 'Public eye'. storey oto

    ReplyDelete
  11. I recently came across your article and have been reading along. I want to express my admiration of your writing skill and ability to make readers read from the beginning to the end. I would like to read newer posts and to share my thoughts with you. anime cosplay costumes

    ReplyDelete
  12. This is an awesome post you have shared here. I just love the post. Thank you for sharing this post. Keep sharing new posts with us.

    Also, click here and find Top Mobile App Development Companies in Canada.

    ReplyDelete
  13. Web development process includes Web design, Web content development, client-side/server-side scripting and network security configuration, among other tasks.Web development is also known as website development.
    For more details: https://lapisstag.com/web-design-and-development/

    ReplyDelete
  14. If you want to build a brand, then the cost per click will not be online marketing solutions. Instead of the online brand, you will go to a CPM campaign, is a straight line costs. Lead generation

    ReplyDelete
  15. I simply want to tell you that I am new to weblog and definitely liked this blog site. Very likely I’m going to bookmark your blog . You absolutely have wonderful stories. Cheers for sharing with us your blog. my latest blog post

    ReplyDelete

  16. Hey friend, it is very well written article, thank you for the valuable and useful information you provide in this post. Keep up the good work! FYI, please check these depression, stress and anxiety related articles:

    How To Draw Hairs

    Doodle Art

    Learn how to make a painting

    How to Draw Anime

    Create Doodle Art


    You can also contact me at depressioncure.net@gmail.com for link exchange, article exchange or for advertisement.

    Thanks a lot

    Dhruv

    ReplyDelete
  17. i know more about graphic design then web design all i know is when i did web design it was mostly coding i had to make an html that had a code for every collum row picture or text and hexidecimals for color of whatever your putting on the page. graphic design you need a program for your computer one i used was CS2 and illustrater but they cost somewhere around 200$ but you mess around with the program enough you figure everything out. Click here: https://qaiserm.com/web-designer-in-dubai/

    ReplyDelete
  18. The question is has the dark web links been found on the Internet; the answer is yes. If you want to surf anonymously you need to use a web proxy and this is what allows you to surf the Internet legally without worrying about your real identity being revealed on the Internet. There are many people who surf the Internet and then download illegal files off the Internet that can put your computer at risk. There are also those people who use social networking sites such as MySpace, Facebook, and others to share sexual images and videos. If you surf anonymously you can avoid these dangers as well as anything else that might be on the Internet.

    ReplyDelete
  19. You can utilize almost any kind of designs picture to make intriguing animation impacts. anime 2021

    ReplyDelete
  20. Your article has aroused a ton of positive interest. I can perceive any reason why since you have done a great job of making it intriguing. dark web sites

    ReplyDelete
  21. Your website fashion can be wonderful, your manga content is basically excellent: Deborah. Very good employment

    ReplyDelete
  22. Undeniably consider what we said. Your selected manga reason seemed to be for the internet your easiest issue to know. My spouse and i tell anyone, My spouse and i certainly find annoyed

    ReplyDelete
  23. Hey friend, it is very well written article, thank you for the valuable and useful information you provide in this post. Keep up the good work! FYI, please check these art, drawing tips and drawing secrets related articles:

    Little Singham Drawing

    Doodle Art

    How To Draw Little Singham

    Draw Little Singham Step by Step

    Easy Sketches


    You can also contact me at arthackers0172@gmail.com for link exchange, article exchange or for advertisement.

    Thanks a lot

    Dhruv

    ReplyDelete
  24. https://twitchviral.com/ In this article you will read about the best games which can be played on high quality gaming laptops. Give your time to this post and increase your knowledge related to the best games and quality gaming laptops.

    ReplyDelete
  25. In case you are mesmerized by Manga comic characters and need to be trained to draw them, in which case you should locate the best guide. mangakakalot

    ReplyDelete
  26. Japanese cartoon art has become one center point to improvement Japan to the whole world. We now have gotten to know more details on Japanese culture and how america has risen to get how it is now. read manga online

    ReplyDelete
  27. Great Article IoT Projects for Students

    Deep Learning Projects for Final Year

    JavaScript Training in Chennai

    JavaScript Training in Chennai

    The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

    ReplyDelete
  28. Kitty is Japanese, and exhibits more and more characteristics is actually the Japanese cartoons are known. 9anime

    ReplyDelete