domingo, 31 de julho de 2011

Efeito arco íris nos links

HoOy gente que tal incrementar seus Bloguitos com esse efeito Super Lindinho  Funciona assim após seguir o tutorial corretamente este efeito será aplicado a todos os links existentes no blog. É super fácil e deixa os Links mais bonitinhos chamando mais a atenção dos seus leitores.                  

Passe o mouse no exemplo: ir para o blog de teste
  
Mini gif 58Confira>
Boom gente eu trouxe 3 códigos diferentes mais com o mesmo efeito arco íris caso um não dê certo tente os outros... vamos lá então:
1°código: vá no seu HTML pressione as teclas ctrl  f e na Barra de pesquisa que apareceu procure por:            </head>

cole o código abaixo ANTES da tag </head>


<script src='http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/rainbowlinks.js'/>


Visualize se estiver tudo certo salve

2°código: vá no seu HTML marque a opção expandir modelos de widgets. pressione as teclas ctrl  f e na Barra de pesquisa que apareceu procure por:            </head>


cole o código abaixo ANTES da tag </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>



Visualise se estiver tudo certo salve!

3°código:vá no seu HTML marque a opção expandir modelos de widgets. pressione as teclas ctrl  f e na Barra de pesquisa que apareceu procure por:            ]]></b:skin>

Logo abaixo desse trecho cole o seguinte código:

<!-- INÍCIO DO SCRIPT LINKS COLORIDOS--><br />
<br />
<script type='text/javascript'>
// <![CDATA[
var rate = 20; // Increase amount(The degree of the transmutation)




////////////////////////////////////////////////////////////////////
// Main routine


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




//=============================================================================
// doRainbow
// This function begins to change a color.
//=============================================================================
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}




//=============================================================================
// stopRainbow
// This function stops to change a color.
//=============================================================================
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}




//=============================================================================
// doRainbowAnchor
// This function begins to change a color. (of a anchor, automatically)
//=============================================================================
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);
}
}
}




//=============================================================================
// stopRainbowAnchor
// This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}




//=============================================================================
// Mozilla_doRainbowAnchor(for Netscape6 and Mozilla browser)
// This function begins to change a color. (of a anchor, automatically)
//=============================================================================
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);
}
}
}




//=============================================================================
// Mozilla_stopRainbowAnchor(for Netscape6 and Mozilla browser)
// This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}




//=============================================================================
// Change Color
// This function changes a color actually.
//=============================================================================
function ChangeColor()
{
objActive.style.color = makeColor();
}




//=============================================================================
// makeColor
// This function makes rainbow colors.
//=============================================================================
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>

Visualise se estiver tudo certo salve!

Heey gúrias no meu caso só esse ultimo código deu certo !
Bye

20 comentários :

  1. eu acho que fica Lindo esses efeitos arcoiris no blog ! : h:

    ResponderExcluir
  2. Que TUDO!
    ADOREI... QRO ESSE DE PONTO DE EXCLAMAÇÃO DO LADINHO DA PALAVRA ATENÇÃO!
    hehehe mto fofo!!!
    ;)
    Beijos!

    ResponderExcluir
  3. valeu Jackie *-*
    eu me inspirei naquele tutorial que você ensinou a fazer cupcakes, agora eu adoro fazer ahahaha *-*
    eu ameiiiii aquele layout, muuito muito fofo *-*
    quando eu vi comecei a fazer "oowwwwwnn" hahaha
    muito lindo mesmo!

    ResponderExcluir
  4. oi linda,
    passei aqi no sue blog e adorei, ja estou te seguindo, passa la no meu se gostar segue tb ♥
    beeijinho :**
    http://faaniilairy.blogspot.com

    ResponderExcluir
  5. muito fofo seu blog lindo queria saber como vc enfeita ele
    bjos

    ResponderExcluir
  6. Tenha uma bela semana.Bjos
    by: Veve Pink
    http://portal-pattys.blogspot.com

    ResponderExcluir
  7. sou membro do seu blog e gostaria que fosse do meu ele nao está totalmente pronto mas...prfavor
    islandgirls-manahatori.blogspot.com
    ou
    blogita-manahatori.blogspot.com

    ResponderExcluir
  8. Seu blog é cheio de coisinhas fofas e interessantes..
    Adorei!!!

    Beijos
    Vanessa

    http://www.decoresaltoalto.com/

    ResponderExcluir
  9. No tempo em que eu fazia layouts para encomenda eu sabia todos esses scripts :)
    hihi
    beijão

    ResponderExcluir
  10. Adorei a dica já coloquei lá no blog , ficou lindo. Continue postando coisas legais , parabéns :h:

    ResponderExcluir
  11. Aii esse efeito arco íris e super fofo adorei no meu blog muito obg jackie adorei a dica :k:

    ResponderExcluir
  12. amiga mtoooo mas mtoooo Obrigadooo msmooo
    mas uma vez vce arrasando nos Tutu' rsrs
    ja coloquei o efeito no meu Blog Bjaoo

    ResponderExcluir
  13. prontinho ficou lindo muito obg pela dica parabéns!
    http://prasempreviva.blogspot.com

    ResponderExcluir
  14. ebaa o meu deu certo com o primeiro :h:

    ResponderExcluir
  15. eeh o meu deu certo com o primeiro parabens seu blog éh LINDOO ! bjinhosss :k:

    ResponderExcluir
  16. jackie posso usar o sinal de alerta, o sinal de correto,e o X?????? :m:

    ResponderExcluir
  17. A tempos estava procurando o efeito, mais o que encontrava ñ funcionavam, agora eu achei um perfeito.E aonde mais eu poderia achar né?!Jackie Dream um dos blogs mais fantasticos que conheci o3o
    Uma coisa a dizer : -Brigada Jackie ♥
    Depois posso postar no meu blog??
    #May-Sun

    layrakauana.blogspot.com

    ResponderExcluir
  18. Deu super certo !
    Adorei o tuto
    Beijão <3
    nuncamaiseuvou.blogspot.com

    ResponderExcluir

.