Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » Add Multi-Color Effect For Your Links On Hover For Blogger Blogs

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

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

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

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

32,779 views

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.

Liked It ? Please Share

Comments

34 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. BEBEN says:

    its like a rainbow script Max…nice nice (how my trouble ? :-s)

  2. techie-solution.blogspot.com see the Site for demo THNX

  3. Max says:

    hi all, thanks for commenting, and @ beben, please check your mail message.

  4. I added code cakmakanal5te5.blogspot.com and really looks great, thank you admin

  5. mrjack says:

    Awesome, Max !

  6. Nezzo says:

    its really cool, thanks

  7. sulltan says:

    Thank u sam .. for this nice trick .

  8. Dak Wan says:

    Thanks a lot mate!

  9. Nice tip’s I used it and work fine….. by the way if this trick combine with automatic change font.. It will be very cool trick a rainbows font trick

  10. natasha says:

    i hv tried…its work…i love thks max

  11. Max says:

    @ cakmakanal5te5, mrjack, Nezzo, sulltan, Dak Wan and natasha, thanks for your comments.

    @ Lout de Chealier, it can be done if you know some info about css and simple html.

  12. YaniLavigne says:

    amazing!!im soo much enjoying this website,thank you;)

  13. kalpesh says:

    Damo :- tipsz.blogspot.com

  14. hrithik says:

    its working……..thank u very much

  15. jill says:

    thanks SO MUCH (:

  16. dalila says:

    hello all, i do it but not working can you all help me! and i doesn’t found the’ ‘ i donno what to do.. please help me dalilasoffian.blogspot.com

  17. Max says:

    thanks all for your comments.
    @ dalila, what do you can’t find.

  18. HQ Updated ! says:

    Thank you so much Buddy !

  19. sam says:

    hell can u tell me that how can i post jave and html code in my post?? bcz when i am doing this was given error

  20. evelyn says:

    Yay! i did mine!!!

  21. MaSheddy says:

    Awesome….I’m going through all your hacks to fancy up my blog. Tutorials are easy and dummy proof. Thank You very much.

  22. vishnu says:

    thanks it is looking goooooooooooood…………………..

    <<<<<<>>>>>>>>

    <<<<<<>>>>>>>>pls visit my blog

  23. Max says:

    thanks all for commenting.

  24. dalila says:

    max, thank you very much!
    i tried it slowly and its working!
    thank you thank you!!

  25. sachin says:

    Thanks your site is very usefull for me and all blogger

  26. Jafaran Khan says:

    Awesome stuff ALL BLOG tools….
    Keep Going!!

  27. abuanu says:

    its really cool, thanks

  28. bilquer says:

    Good script Max.But i prefer a simple themes for my website.If i change my mind, this article will be the first, im gonna read and carry out this tings

  29. Mr. L says:

    -like-
    and implemented.

  30. shares says:

    CPM AND CPC AD NETWORK

    WEBSITE OWNERS EARN MONEY

    http://WWW.ADSWORLD.TK

    * Go from signup to embed code in seconds.
    * Generate revenue from website or app ads, and get paid for every clickand more supported.
    * Text and image ads in standard sizes.
    * Live statistics on clicks, impressions, CTR and more.
    * Join over 17,500 satisfied websites.

    INSTANT PAYMENT WOULD BE MADE BY PAYPAL

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here