Multi-Color Effect For Your Links On Hover For Blog of blogger

Hello friends!! these days i'll tell you the way to feature muti color or rainbow effect to blogger links. With this widget all the links can provides a rainbow like impact on hovering mouse over them. This widget works on straightforward|a straightforward} Javascript and is incredibly easy to put in.

Demo!

 Move Mouse on it

How to add multiple link designs

Want to create a link to your blog and rainbow-colored flashing once the pointer is affected? it's terribly simple
Now let's begin adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on on Add a gadget link.

Step 2. once click on Add a gadget link A pop-up box can open currently with several gadget list, opt for HTML/JavaScript from the gadget choices by clicking the blue sign for that gadget.

Step 3. Choose 'HTML/Javascript' and add the one among code given 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);
}
};
document['write']('<a href="http://www.blofofblogger.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikc74vSM8gJnAQ2kErnNL7Nq_F8DzWA01Ngisn_pZo2rL3nGyb_l6uuOkssFbiAwkhaeX46M27cmX-vTXTjAScassfv8hh4CTMWUxml5KRyykG8nOeZndokUwlyup4_PwOJdtYVf0G5Xs/h120/bob.png" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" ></a><a href="http://www.blofofblogger.com/" target="_blank" title="Latest Tips For Bloggers"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikc74vSM8gJnAQ2kErnNL7Nq_F8DzWA01Ngisn_pZo2rL3nGyb_l6uuOkssFbiAwkhaeX46M27cmX-vTXTjAScassfv8hh4CTMWUxml5KRyykG8nOeZndokUwlyup4_PwOJdtYVf0G5Xs/h120/bob.png" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; left: 0%;" ></a><a href="http://www.blofofblogger.com/" target="_blank" title="Blogger Tricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikc74vSM8gJnAQ2kErnNL7Nq_F8DzWA01Ngisn_pZo2rL3nGyb_l6uuOkssFbiAwkhaeX46M27cmX-vTXTjAScassfv8hh4CTMWUxml5KRyykG8nOeZndokUwlyup4_PwOJdtYVf0G5Xs/h120/bob.png" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" ></a>');
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. Currently Click On Save 'JavaScript' you're done.

OR

Simple Click on Button to Install

Please leave your comments and responses for higher improvement of my blog of Blogger