Adicionar efeito de cores para links do Blogger

0

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…

Deixe uma resposta