COLORFUL EFFECTS TO THE LINKS/ POSTS

This tutorial is really simple to follow and uses a JavaScript which we will save inside Blogger so there will be no external linking at all. Let’s start now,

To add this Flashing Link effect to your blogs do the following,

• Go To Layout > Edit HTML 

• Search For </head>  

• And just above </head> paste the code below,

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

You can change the value of var rate = 20. This controls the speed with which links change color.
Preview Your Templates To see The New Change.

Kindly Bookmark this Post using your favorite Bookmarking service: