Hi All Dear Visitors, Sorry For Being Late On Reply Your Messages And Comments, I'm Now Working With AllBlogTools.com Team On The Next Version Of AllBlogTools.com v3. The New Version Will Be Launched Soon, Please Wait For Our Surprises, We Are Working On A Great Features And Amazing, Powerful Version.
You Are Here You Are Here NowAllBlogTools > Blogger Tricks and Hacks > Blogger Graphics / Effects Tricks > Add Multi-Color Effect For Your Links On Hover For Blogger Blogs
Add Multi-Color Effect For Your Links On Hover For Blogger Blogs

Post Details  Posted By Max On Monday, November 9th, 2009 In   Blogger Tricks and Hacks



Share

 
Add Multi-Color Effect For Your Links On Hover For Blogger Blogs

Hi All, In all tricks i posted here lately i was talking about Seo. But now i feel that i should add some fun to my tricks so today i’ll talk about how to add Cool effect to your links when your visitors hover it.
It’s easy and one step processes.

How To Add It.

Go To you blogger dashboard, and navigate to : Dashboard >> Layout >> Edit html, And find the following code, 

</head>

And exactly before it add the next code : 


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

Now Click Save Template
And you are done.

Customize And Demo.

You can change this value 

var rate = 15 ;

in the above code to control the speed of color transformation by increasing or decreasing the number 15
If you want to see a demo please click here.

By Max

I'm Max, The founder and the admin of AllBlogTools.com I'm a very big van of blogging ,design and coding, I think that i'll die next to my computer.

No related posts found

DeliciousFacebookDigg
Design FloatMixxReddit
StumbleUponTechnoratiTwitter

comments

Blogger Tricks

 

Hi AllBlogTools readers,
I Think This Could Be The Fastest, Easiest, And Laziest 'Copy-And-Paste' System For Making Immediate Cash Online? Yours Max

 

 

Looking to make money online? "Copy ..Paste" these EXACT profit pulling campaigns and systems today to generate unstoppable revenue every day! Click Here Now

blogger spacer my twitter my facebook my rss feeds my google buzz E-mail updates

advertise
Write For Us
Write For Us

Add to Technorati Favorites Web Design Top Blogs
Top Resources blogs Web Development & Design Blogs hihera.com Resources BlogsArts Blogs - Blog Rankings
Templates Blogs - Blog Catalog Blog Directory Click to see how many people are online TopOfBlogs Computers & The Internet Topsites - TOP.ORG  blogarama - the blog directory
 

Featured in Alltop

AllBlogTools.com © 2009 All rights reserved

Home  |  About Us  |  Contact Us  |  Support Blogger Tricks  |  Blogger News   |  Blogger Templates