• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

How to Add Rainbow Color Effect Links to Blogger

Posted by Mohsin On 12/30/2012 12:59:00 AM No comments


Rainbow color effect will give random colors to your link on mouse hover. Normally seen on mouse hover only a single color changes. But thanks to Dynamic Drive now we can easily 
change several colors of our links. Once the code is applied to the blog/website, all links on each page exhibit a rainbow effect on mouse hover. This tutorial is very simple to follow and uses a JavaScript code inside Blogger.

To add Rainbow effect link to your blog/website follow some easy steps below:

STEP #1: Login to Blogger

STEP #2: Go to Dashboard>Template

STEP #3: Click on Edit HTML>Proceed

STEP #4: Press ( Ctrl+f ) to search for the below code.

</head>

STEP #5: And just above </head> paste the code below

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

Customization:

You can change the value of var rate = 20. This controls the speed with which links change color.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.

0 comments:

Post a Comment

All types of Comments are welcome