Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Efeitos Javascript Vanessa S.

Script para dar Efeito Arco Iris nos Links do Blogger

Dê um colorido legal em seus links no blog, adicionando um efeito arco-iris nos links, usando javascript.
Com este efeito, ao passarmos o mouse em cima do link, ele muda de cor, proporcionando um visual de cores simultâneas, bem atraente.
Quer ver como adicionar este efeito? Você vai ver o quanto é fácil adicioná-lo.

Acesse o painel do blogger, vá ao menu “modelo >> Editar HTML >> Expandir modelos de widgets”.
Copie o código abaixo e coloque-o antes de </head>

<script type='text/javascript'>

//<![CDATA[

var rate = 20;

if undefineddocument.getElementById)
window.onerror=new Functionundefined"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 undefineddocument.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if undefineddocument.getElementById) {
document.captureEventsundefinedEvent.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}

function doRainbowundefinedobj)
{
if undefinedact == 0) {
act = 1;
if undefinedobj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setIntervalundefined"ChangeColorundefined)",100);
}
}

function stopRainbowundefined)
{
if undefinedact) {
objActive.style.color = clrOrg;
clearIntervalundefinedTimerID);
act = 0;
}
}

function doRainbowAnchorundefined)
{
if undefinedact == 0) {
var obj = event.srcElement;
while undefinedobj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if undefinedobj.tagName == 'A' || obj.tagName == 'BODY')
break;
}

if undefinedobj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setIntervalundefined"ChangeColorundefined)",100);
}
}
}

function stopRainbowAnchorundefined)
{
if undefinedact) {
if undefinedobjActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearIntervalundefinedTimerID);
act = 0;
}
}
}

function Mozilla_doRainbowAnchorundefinede)
{
if undefinedact == 0) {
obj = e.target;
while undefinedobj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if undefinedobj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}

if undefinedobj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setIntervalundefined"ChangeColorundefined)",100);
}
}
}

function Mozilla_stopRainbowAnchorundefinede)
{
if undefinedact) {
if undefinedobjActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearIntervalundefinedTimerID);
act = 0;
}
}
}

function ChangeColorundefined)
{
objActive.style.color = makeColorundefined);
}

function makeColorundefined)
{
// Don't you think Color Gamut to look like Rainbow?

// HSVtoRGB
if undefinedelmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = undefined255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = undefinedt1 - t2) * t3 / 60;

if undefinedelmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if undefinedelmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if undefinedelmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if undefinedelmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if undefinedelmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if undefinedelmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}

elmR = Math.floorundefinedelmR).toStringundefined16);
elmG = Math.floorundefinedelmG).toStringundefined16);
elmB = Math.floorundefinedelmB).toStringundefined16);
if undefinedelmR.length == 1) elmR = "0" + elmR;
if undefinedelmG.length == 1) elmG = "0" + elmG;
if undefinedelmB.length == 1) elmB = "0" + elmB;

elmH = elmH + rate;
if undefinedelmH >= 360)
elmH = 0;

return '#' + elmR + elmG + elmB;
}

//]]>

</script>

Salve as modificações.

Se quiser aumentar ou diminuir a velocidade na transformação das cores, basta editar o valor em var = 20;
Lembrando que, quanto maior o valor, maior a velocidade.

 
Este efeito será aplicado a todos os links existentes no blog.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

2 Comentários

  1. Eliel Neto disse:

    Publica um exemplo!

  2. GM Tricks disse:

    Adorei o efeito Clau! Muito divertido.. Só gostaria de saber se tem como colocar o efeito em um único link.
    Obrigada pela dica mesmo assim!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.