Don't Miss

Add Rainbow Animation Effect to Links in Blogger

By Zohaib Liaqat - 23 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. 

23 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. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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

  11. 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
  12. 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
  13. You can utilize almost any kind of designs picture to make intriguing animation impacts. anime 2021

    ReplyDelete
  14. 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
  15. Your website fashion can be wonderful, your manga content is basically excellent: Deborah. Very good employment

    ReplyDelete
  16. 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
  17. 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
  18. 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
  19. Kitty is Japanese, and exhibits more and more characteristics is actually the Japanese cartoons are known. 9anime

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. Department of Pre-University, Government of Karnataka implements Higher Secondary Education in the State and they function under the Department of Primary and Secondary Education, Kar 1st PUC Blueprint 2023 Pre-University is Responsible for the Promotion and Blueprint 2023 of Question Bank Published, Karnataka 1st PUC Blueprint 2023 2023 Latest at Official Website.

    ReplyDelete