emerson

Efeito Multicores em Links

O efeito multicores é um efeito aplicado nos links , quando se coloca o mouse em cima do link ele nao muda para apenas uma cor mas sim muitas como : azul, vermelho, amarelo, laranja, roxo, verde, lilás, rosa , etc. Nele próprio já vem o efeito "fade in out" .
Adicionando Código

Vá em painel > modelo > Editar html > procure por:

</head>

Logo ACIMA da linha acima, cole esse código:

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

Pronto Salve e agora todos os links estarão com o efeito.

Box de observação simples


Fala galera neste tutorial vou ensinar a colocar uma caixa de observação muito simples no seu blog, primeiro adicione o código abaixo antes de ]]>

/* observação by Daniel Barreto  - saikyou Design*/
.obs{
text-align:center; /*alinhamento do texto*/
margin-top:3px; /*subir ou descer*/
background:#6798E0;/*COR do fundo*/
color:#000; /*cor do texto*/
padding-left:30px; /*empurar para a direita*/
border: 1px #000 ; /*empurar para a direita*/
    -webkit-border-top-left-radius: 7px; /*tamanho da curvatura*/
    -webkit-border-top-right-radius: 7px; /*tamanho da curvatura*/
    -webkit-border-bottom-left-radius: 7px;  /*tamanho da curvatura*/
    -webkit-border-bottom-right-radius: 7px; /*tamanho da curvatura*/
}

Agora para adicionar a barra em seu blog vai em layout/adicionar Gadgets/Html Javascript, e adicione a seguinte tag :

<div class="obs">Aqui vc adiciona o conteudo do box</div>

Basico do Flash 1

Oi  esse tuto vai ser bem basico sobre o Flash.

O que é flash?
Flash é um software criado pela adobe, o flash permite você criar animações avançados, permite interajir com o visitante, muitos recursos só possiveis com o Flash.
O flash pode criar desde banners de publicidades até layouts de sites.
E o bom, blogger suporta flash!

O Flash que cria programas?
Sim, ele pode ser feito para ser utilizado a internet, como animações, são os com o formato .SWF , ou feitos para serem executados, os com formato .EXE

Para usar o Flash preciso do Flash Player?
Sim... para visualizar Arquivos .SWF em sites, baixe o Adobe Flash Player

Adobe Flash e Adobe Flash Player é a mesma coisa?
Não o Adobe Flash cria as animações e o Flash Player permite amostra-las no seu computador

O que é actionscript?
é a linguagem de programação usada para criar animações no flash





Duplo tutorial, Efeito Tooltip + Menu Tooltip

Oi gente, hoje o tutorial,é sobre o efeito tooltip e um menu usando esse efeito. O efeito está na imagem abaixo:
Viu? Quando passa o mouse aparece a descrição.Então vamos começar: Para adicionar tooltip, cole esse codigo:
<script src="http://dyogophoenix.webs.com/Site/javascript/tooltip.js" />
abaixo de:
<head>
E cole:


div#qTip {
padding: 3px; /*Espaço entre a borda e o texto*/
border: 1px solid #666; /* Estilo da borda */
display: none; /*Não mexa*/
background: #999; /* Cor de fundo */
color: #fff; /*Cor da fonte*/
font-family: Verdana; /*Tipo de fonte*/
font-size: 9px; /*Tamanho da fonte*/
position: absolute; /*Não mexa*/
z-index: 1000; /*Não mexa*/}
antes de
]]></b:skin>
È só personalizar como está escrito no codigo.
Agora vamos ao menu!
Amostração


Esse tipo de menu é bom para homepages, masd vamos começar, Procura por
]]></b:skin>
E acima disso cole:
#men{
margin-top: -9px;
margin-left: 4px;
border:0px;
background:black;
height: 30px;
width: 150px;
text-align:center;
}
#men a{
font-family: "basically";
color: #FFFFFF;
font-size: 12px;
}
#men a:hover{
color: #FFFFFF;
text-decoration:none;
}
@font-face {
font-family: 'basically';
src: url('http://static.tumblr.com/q1ljzdc/aVnmidiyn/basically-serif_free-version-webfont.woff');
}
@font-face {
font-family: 'pf ronda';
src: url('http://static.tumblr.com/q1ljzdc/YHKmidj8f/pf_ronda_seven-webfont.woff');
}
.imagem{
border-botton:1px gray solid;
width:150px;
}
.imagem:hover{
-webkit-filter: opacity(0.5);
}
E no gadjet cole esse:
<img class="imagem" src="http://static.thesubwire.com/images/series/5/5/1/4/4eb849617a0c9646bd125093bce86f0e_0.jpg" title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat" />
<br />
<div id="men">
<a href="http://www.blogger.com/linkisinho" title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat">Lorem impsum</a></div>
 

TODOS OS DIREITOS RESERVADOS A SAIKYOU DESIGN - DESIGN E SISTEMA PRODUZIDOR POR DANIEL BARRETO