Adicionar efeito de cores para links do Blogger

Adicionar Efeito de cores para links do Blogger

Nesse tutorial você vai aprender implatar um Javas-script muito legal, ele tem um efeito “Rainbol” tipo cores do arco-iris nos links do template, comofunciona:
Ao passar o mouse sobre os links, eles mudam de cor proporcionando um visiual muito legal, troca de cores simultâneamnete, para implantar em seu blog segue os passos asseguir:

Ir para painel do Blogger, e vá para: Painel> Layout> html> Edit e encontrará o seguinte código:
E, exatamente antes de :

</head>

adicionar o código seguinte:

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

Personalizar e Demo.

Você pode alterar esse valor

taxa var = 15;

no código acima para controlar a velocidade de transformação de cores, aumentando ou diminuindo o número 15
Se você quiser ver uma demonstração clique aqui.
Agora clique em Salvar modeloE está feito
Obs: Só lembrando salve o backup ou uma cópia de seu Layout, sempre antes de qualquer alteração caso alguma coisa saía errado você não vai ter dores de cabeça…

COMPARTILHAR

DEIXE UMA RESPOSTA

Please enter your comment!
Please enter your name here