How to Add Rainbow Anchor Effect to Blogger

Introduction

Adding eye-catching visual effects to your Blogger site is a great way to enhance user experience and engagement. One such effect is the Rainbow Anchor Effect, which dynamically changes the color of hyperlinks when hovered over, giving them a vibrant, animated appearance. This guide will walk you through how to add this feature to your Blogger blog using HTML, CSS, and JavaScript.

Step by Step Guide

Step 1: Log in to Your Blogger Account

• Go to Blogger.com.
• Sign in with your Google account
• Select the blog you want to modify.

Step 2: Go to Theme Settings

• In the left sidebar, click on "Theme".
• Click the down arrow next to the "Customize" button.
• Select "Edit HTML".

Step 3: Add the Rainbow Anchor Script and Styles

• Scroll to the bottom of the HTML and paste the following code before the closing </body> tag:

<a href='#' target='_blank'>Hello World!</a>

@-webkit-keyframes hue { 
     100% { 
       -webkit-filter: hue-rotate(360deg); 
     } 
   } 
   a:hover { 
     -webkit-animation: hue 1s linear infinite; 
   } 
 

let objActive = null; 
   let act = 0; 
   let elmH = 0; 
   let elmS = 128; 
   let elmV = 255; 
   let clrOrg = "#000"; 
   let TimerID = null; 
   const rate = 20; 
   function makeColor() { 
     let elmR, elmG, elmB; 
     if (elmS === 0) { 
       elmR = elmG = elmB = elmV; 
     } else { 
       let t1 = elmV; 
       let t2 = (255 - elmS) * elmV / 255; 
       let t3 = (t1 - t2) * (elmH % 60) / 60; 
       if (elmH < 60) { elmR = t1; elmG = t2 + t3; elmB = t2; } 
       else if (elmH < 120) { elmR = t1 - t3; elmG = t1; elmB = t2; } 
       else if (elmH < 180) { elmR = t2; elmG = t1; elmB = t2 + t3; } 
       else if (elmH < 240) { elmR = t2; elmG = t1 - t3; elmB = t1; } 
       else if (elmH < 300) { elmR = t2 + t3; elmG = t2; elmB = t1; } 
       else { elmR = t1; elmG = t2; elmB = t1 - t3; } 
     } 
     elmR = Math.floor(elmR).toString(16).padStart(2, '0'); 
     elmG = Math.floor(elmG).toString(16).padStart(2, '0'); 
     elmB = Math.floor(elmB).toString(16).padStart(2, '0'); 
     elmH = (elmH + rate) % 360; 
     return `#${elmR}${elmG}${elmB}`; 
   } 
   function ChangeColor() { 
     if (objActive) objActive.style.color = makeColor(); 
   } 
   function startRainbowAnchor(e) { 
     if (act === 0) { 
       let target = e.target; 
       while (target && target.nodeName !== "A" && target.nodeName !== "BODY") { 
         target = target.parentNode; 
       } 
       if (target && target.nodeName === "A" && target.href) { 
         objActive = target; 
         act = 1; 
         clrOrg = objActive.style.color; 
         TimerID = setInterval(ChangeColor, 100); 
       } 
     } 
   } 
   function stopRainbowAnchor() { 
     if (act && objActive) { 
       objActive.style.color = clrOrg; 
       clearInterval(TimerID); 
       act = 0; 
     } 
   } 
   document.addEventListener("mouseover", startRainbowAnchor); 
   document.addEventListener("mouseout", stopRainbowAnchor); 
 

Step 4: Save Your Changes

• After inserting the code, click the "Save" button at the top-right corner.
Step 5: Preview Your Blog
• Visit your blog and hover over the anchor links. You should see the dynamic rainbow effect applied.

Conclusion

The Rainbow Anchor Effect is a simple yet visually striking enhancement that can give your Blogger site a modern and interactive feel. By following the above step-by-step guide, even beginners can easily implement this animation without the need for advanced coding skills.

FAQs

Will this effect slow down my blog?

No, it’s a lightweight effect using basic CSS and JavaScript that has negligible performance impact.

Can I apply this to buttons or other elements?

Yes! You can modify the CSS and JavaScript to target other tags like <button> or <div> as needed.

Is this effect compatible with all browsers?

It works best in WebKit-based browsers like Chrome and Safari. Other browsers may need standard keyframes instead of -webkit-.

Can I customize the speed of the rainbow effect?

Yes, you can change the rate value in JavaScript or the animation duration in CSS to speed it up or slow it down.

Keyword Blogger Labels:#Rainbow Anchor Effect#Blogger Tips#HTML Effects#Anchor Hover Effect#CSS Animation#JavaScript Animation#Blogger Custom Code#Step by Step Guide