This is a simple Blogger Blog Trick,Changing the color of Link when Mouse over it.7 colors are changing like animation when hover the link.
Follow the simple steps below..
Hover On Any Link To See on demo site
Follow the simple steps below..
- Sign in To Your Blogger Account and Select Blog That You Want To ADD This Widget then goto
- Template Tab >> Edit HTML
- Then Add The Below Code Above or Before </head> (Want help to find Click Here)
<script type='text/javascript'>//<![CDATA[var rate = 20;if (document.getElementById)window.onerror=new Function("return true")var objActive; // The object which event occured invar act = 0; // Flag during the actionvar elmH = 0; // Huevar elmS = 128; // Saturationvar elmV = 255; // Valuevar clrOrg; // A color before the changevar TimerID; // Timer IDif (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;elseobjActive = 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?// HSVtoRGBif (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>
- Save Your Template After Adding Code
0 comments:
Post a Comment