LINK COM JANELA POP-UP E TEXTO QUE MUDA DE COR AUTOMÁTICO

<a href="javascript:vd()"title="TEXTO 1 " onclick="window.open('COLOQUE AQUI O LINK DO SITE', 'Pagina', 'STATUS=NO, TOOLBAR=NO, LOCATION=NO, DIRECTORIES=NO, RESISABLE=NO, SCROLLBARS=YES, TOP=10, LEFT=10, WIDTH=1000, HEIGHT=500');"> <b><br /> <script> /* RAINBOW TEXT Script by Matt Hedgecoe (c) 2002 Featured on JavaScript Kit For this script, visit http://www.javascriptkit.com */ // ********** MAKE YOUR CHANGES HERE var text=" COLOQUE AQUI O TEXTO" // YOUR TEXT var speed=80 // SPEED OF FADE // ********** LEAVE THE NEXT BIT ALONE! if (document.all||document.getElementById){ document.write('<span id="highlight">' + text + '</span>') var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight } else document.write(text) var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0") var r=1 var g=1 var b=1 var seq=1 function changetext(){ rainbow="#"+hex[r]+hex[g]+hex[b] storetext.style.color=rainbow } function change(){ if (seq==6){ b-- if (b==0) seq=1 } if (seq==5){ r++ if (r==12) seq=6 } if (seq==4){ g-- if (g==0) seq=5 } if (seq==3){ b++ if (b==12) seq=4 } if (seq==2){ r-- if (r==0) seq=3 } if (seq==1){ g++ if (g==12) seq=2 } changetext() } function starteffect(){ if (document.all||document.getElementById) flash=setInterval("change()",speed) } starteffect() </script><br /> </b><br /> <div align="center"><a href="http://javascriptkit.com/"></a></div></a><br /> <br />

exibir site dentro do seu site com link foto e ajuste de posição de topo

NESTE EXIBIR TEM AJUSTE DO TOPO DA FOTO E DO SITE


<br /> <div class="divspoiler"><div id="object1" style="position:absolute; visibility:show; left:200px; top:350px; z-index:2"><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM"width="50" height="50"title="CLIQUE PRA ABRI E FECHAR O SITE D2 " onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" /><br /> <br /> </div><div><div class="spoiler" style="display: none;"><div id="object11" style="position:absolute; visibility:show; left:-10px; top:-10px; z-index:2"><br /> <div id="object1" style="position:absolute; visibility:show; left:0px; top:400px; z-index:2"><iframe height="1800" frameborder="0" width="1035" scrolling="no" src="COLOQUE AQUI O LINK DO SITE"></iframe><div id="object11" style="position:absolute; visibility:show; left:-10px; top:-10px; z-index:2">Aqui o conteúdo que queremos ocultar<br /> <br /> </div></div><br /> </div></div></div></div><br />

slideshow.clickgratis aqui

Abrir site 1      
Abrir site 2

<style type="text/css"> <!-- .dragme{position:relative;} --> </style><br /> <br /> <br /> <script language="Javascript"> var ie=document.all; var nn6=document.getElementById&&!document.all; var isdrag=false; var x,y; var dobj; function movemouse(e) { if (isdrag) { dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x; dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y; return false; } } function selectmouse(e) { var fobj = nn6 ? e.target : event.srcElement; var topelement = nn6 ? "HTML" : "BODY"; while (fobj.tagName != topelement && fobj.className != "dragme") { fobj = nn6 ? fobj.parentNode : fobj.parentElement; } if (fobj.className=="dragme") { isdrag = true; dobj = fobj; tx = parseInt(dobj.style.left+0); ty = parseInt(dobj.style.top+0); x = nn6 ? e.clientX : event.clientX; y = nn6 ? e.clientY : event.clientY; document.onmousemove=movemouse; return false; } } document.onmousedown=selectmouse; document.onmouseup=new Function("isdrag=false"); function min(ID){ document.getElementById(ID).style.width = "120px"; document.getElementById(ID).style.height = "30px"; } function max(ID){ document.getElementById(ID).style.width = "100%"; document.getElementById(ID).style.height = "100%"; } function restore(ID){ document.getElementById(ID).style.width = "200px"; document.getElementById(ID).style.height = "200px"; } function fecha(ID){ document.getElementById(ID).style.display = "none"; } function showHide(ID){ document.getElementById(ID).style.display= ""; } </script><br /> <br /> <br /> <a href="http://www.uol.com.br" target="site" onclick="showHide('teste')">Abrir site 1</a>      <br /> <a href="http://www.globo.com" target="site1" onclick="showHide('teste1')">Abrir site 2</a><br /> <br /> <div id="teste" class="dragme" style="width:200px; height:200px; border:#cccccc 2px solid; text-align:right; background:green; cursor:move; display:none"><input type="button" id="restore1" style="width:120px; height:30px; align:center;display:none;" onclick="restore('teste');restore('site');showHide('site');showHide('max');showHide('min');showHide('fecha');fecha('restore1')" value="UOL" title="UOL" /><br /> <br /> <input type="button" id="min" style="width:25px; height:25px; align:center;" onclick="min('teste');fecha('site');fecha('max');fecha('min');fecha('fecha');fecha('restore');showHide('restore1')" value="_" title="Minimizar" /><br /> <br /> <input type="button" id="restore" style="width:25px; height:25px; align:center; display:none;" onclick="restore('teste');restore('site');showHide('site');showHide('max');fecha('restore')" value="[-]" title="Restaurar abaixo" /><br /> <br /> <input type="button" id="max" style="width:25px; height:25px; align:center;" onclick="max('teste');max('site');showHide('site');showHide('restore');fecha('max')" value="[+]" title="Maximizar" /><br /> <br /> <input type="button" id="fecha" style="color:red; width:25px; height:25px; align:center;" onclick="fecha('teste')" value="x" title="Fechar" /><br /> <br /> <iframe name="site" id="site" style="width:200px; height:200px;"></iframe> <br /> </div><br /> <br /> <div id="teste1" class="dragme" style="width:200px; height:200px; border:#cccccc 2px solid; text-align:right; background:green; cursor:move; display:none"><input type="button" id="restore3" style="width:120px; height:30px; align:center;display:none;" onclick="restore('teste1');restore('site1');showHide('site1');showHide('max1');showHide('min1');showHide('fecha1');fecha('restore3')" value="GLOBO.COM" title="UOL" /><br /> <br /> <input type="button" id="min1" style="width:25px; height:25px; align:center;" onclick="min('teste1');fecha('site1');fecha('max1');fecha('min1');fecha('fecha1');fecha('restore2');showHide('restore3')" value="_" title="Minimizar" /><br /> <br /> <input type="button" id="restore2" style="width:25px; height:25px; align:center; display:none;" onclick="restore('teste1');restore('site1');showHide('site1');showHide('max1');fecha('restore2')" value="[-]" title="Restaurar abaixo" /><br /> <br /> <input type="button" id="max1" style="width:25px; height:25px; align:center;" onclick="max('teste1');max('site1');showHide('site1');showHide('restore2');fecha('max1')" value="[+]" title="Maximizar" /><br /> <br /> <input type="button" id="fecha1" style="color:red; width:25px; height:25px; align:center;" onclick="fecha('teste1')" value="x" title="Fechar" /><br /> <br /> <iframe name="site1" id="site1" style="width:200px; height:200px;"></iframe> <br /> </div><br /> <br />

Exibe oculta Divs

calendário pra colocar no site

CLIQUE AQUI É GRÁTIS: ESCOLHA UM CALENDÁRIO PARA SEU SITE OU BLOG

tonygifsjavas CLIQUE AQUI É GRÁTIS: ESCOLHA UM CALENDÁRIO PARA SEU SITE OU BLOG
<script language="JavaScript" src="http://www.artestilo.eu/calendarios/js/22.js"></script><br />

calendário pra colocar no site

<script language="JavaScript" src="http://www.artestilo.eu/calendarios/js/10.js"></script><br />

calendário webcid

<script language="javascript" src="http://www.webcid.com.br/meu-calendario.php"></script><br /> <br />

calendário pixnet.net

<embed src="http://blog.roodo.com/prb999/8bf17c76.swf" width="160" height="250" wmode="transparent"><br /> <br />

moldura de celular de video

>

OBS: só funciona na publicação em postagem
incorporação do video é width 230 e o width 320

<center><br /> <img height="530" id="Pic1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1v25e8DdqGiUgJ4ByhcQIcQeFV3s_nPyZIzQ1IuLeD5614RUgWbhx8uzo3FNWuTp3wH8-oi1LJSfF2rPmgxhomCUjQQEkRUSE-P-FmYCIbnbmiWqDHfcGMaTkdv992rYhs0gx5sA1bP0/s1600/tel.celular-samsung-chat322.jpg" style="left: 6pt; position: relative; top: 401pt; z-index: 122;" width="320" /><center><br /> ><br /> <center><br /> <object style="left: 5pt; position: relative; top: 0pt; z-index: 122;" width="230""height: 180px; width: 380px"><param name="movie" value="http://www.youtube.com/v/6oGicSJi0mo?version=3&feature=player_detailpage" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><embed src="http://www.youtube.com/v/6oGicSJi0mo?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="230" height="180"></embed></object><br /> </center></center></center><br /> <br /> <br /> <br /> <br /> <br /> <br /> <div id="webvideoMarca" style="background-image:url( ); background-repeat: no-repeat; width: 653px; height: 200px;"></div><br />

VIDEO MOLDURA

a incorporação do video é width 380 e o height 225

<center><br /> <img height="330" id="Pic1" src="http://www.magazineluiza.com.br/imagens2/produto_grande/19/190364700.jpg" style="left: 0pt; position: relative; top: 290pt; z-index: 122;" width="420" /><center><br /> <br /> <center><br /> <object "height:="" 225px;="" 380px"="" style="left: 5pt; position: relative; top: 5pt; z-index: 122;"><p> COLOQUE AQUI O CÓDIGO DE INCORPORAÇÃO DO VIDEO </center></center></center>

Hello World!

Lightbox TopUp classes com iframe

Especificando uma predefinição TopUp é como especificar os atributos de estilo para um seletor de CSS na sua folha de estilo. A grande vantagem de usar presets é que ele fornece-lhe para manter o seu HTML todo (!) Limpo.

Basta ligar para TopUp.addPresets () com um hash como parâmetro.
A chave de cada entrada tem que ser um seletor CSS eo valor tem que ser um hash de toptions.

Assim, para ligações de agrupamento, apenas especificar grupo: [nome] na predefinição.

Open Google
Open Google
Open Google

<br /> <script src="http://gettopup.com/releases/latest/top_up-min.js" type="text/javascript"> </script><br /> <div id="examples"><script src="http://gettopup.com/releases/latest/top_up-min.js" type="text/javascript"> </script><br /> <a class="tu_iframe_800x600" href="COLOQUE AQUI O ENDEREÇO DA IMAGEM TAMANHO GRANDE " title="COLOQUE AQUI O TEXTO " width="120"> <img height="83" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJygYJNby9dMKw-k7RS2AoaLRc75NmjlbBxtefnyoQwfghfkQraVoomsmGd-XW6DAYHHNShNBcXFda23bxkXiL5wr1BJLuu7922AiQurCXCMtbjkn7Z-FfGNATDmRU3DWf0YmRFG-bA78/s1600/tigre-branco.jpg" title="COLOQUE AQUI O TEXTO " width="120" /><br /> </a><a class="tu_iframe_800x600" href="COLOQUE AQUI O ENDEREÇO DA IMAGEM TAMANHO GRANDE " title="COLOQUE AQUI O TEXTO " width="120">Open Google</a><br /> <a class="tu_iframe_800x600" href="COLOQUE AQUI O ENDEREÇO DA IMAGEM TAMANHO GRANDE " title="COLOQUE AQUI O TEXTO " width="120">Open Google</a><br /> <a class="tu_iframe_800x600" href="COLOQUE AQUI O ENDEREÇO DA IMAGEM TAMANHO GRANDE " title="COLOQUE AQUI O TEXTO " width="120">Open Google</a><br /> </div><script type="text/javascript"> TopUp.addPresets({ "#examples a": { title: "Gallery {alt} ({current} of {total})", group: "examples", readAltText: 1, shaded: 1 } }); </script><br /> <br />

LIGHTBOX IFRAME

Open Google
Open Google
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script><br /> <a href="COLOQUEAQUI O ENDEREÇO DA IMAGEM" class="tu_iframe_800x600">Open Google</a><br /> <a href="COLOQUEAQUI O ENDEREÇO DA IMAGEM" class="tu_iframe_800x600">Open Google</a><br />

Exibir Foto na Barra Rolante, Mostrar / Ocultar

Mostrar / Ocultar ▼▲

HTML Codes

<div class="divspoiler"><a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar ▼▲</a><br /> </div><div><div class="spoiler" style="display: none;"><!-- Codes by Quackit.com --><br /> <div style="height:221px;width:330px;overflow:scroll;"><img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /><br /> <img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" /><br /> </div><p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/">HTML Codes</a></p></div></div><br /> <br /> <br />

exibir conteúdo Mostrar / Ocultar

Mostrar / Ocultar ▼▲

Aqui o conteúdo que queremos ocultar

<div class="divspoiler"><a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar ▼▲</a><br /> </div><div><div class="spoiler" style="display: none;">Aqui o conteúdo que queremos ocultar<br /> </div></div><br />

Slideshow

<script type="text/javascript" src="http://slideshow.triptracker.net/slide.js"></script><br /> <script type="text/javascript"> <!-- var viewer = new PhotoViewer(); viewer.add('COLOQUE AQUI O ENDEREÇO DA IMAGEM '); viewer.add('COLOQUE AQUI O ENDEREÇO DA IMAGEM '); viewer.add('COLOQUE AQUI O ENDEREÇO DA IMAGEM '); viewer.add('COLOQUE AQUI O ENDEREÇO DA IMAGEM '); //--></script><br /> <a href="javascript:void(viewer.show(0))">Slideshow</a><br />

trocar a imagem quando passamos o mouse sobre a foto

Existe um código para trocar a imagem quando passamos o mouse sobre ela, é um código simples e funciona perfeitamente, passe o mouse sobre nosso banner ao lado e veja que ele muda, o código para fazer isso é:
OBS:FOI COLOCADO A FOTO DO 1 VERDE EM CIMA,
MEIO E A 2, VERMELHA
DEBAIXO É A 3, VERMELHA

A DE BAIXO 3, QUE FICA AO ABRI O SITE



Existe um código para trocar a imagem quando passamos o mouse sobre ela, é um código simples e funciona perfeitamente, passe o mouse sobre nosso banner ao lado e veja que ele muda, o código para fazer isso é:<a href="COLOQUE AQUI O LINK DO SEU SITE "target="_blank" onMouseOver="document.images['myimage'].src='COLOQUE AQUI O ENDEREÇO DA IMAGEM';" onMouseOut="document.images['myimage'].src='COLOQUE AQUI O ENDEREÇO DA IMAGEM ';"><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM " border="0" id="myimage"/></a><br />

Fundo estendido na página.

HTML e CSS: Colocando fundo estendido na página (como na área de trabalho)
Mostro aqui uma técnica simples que desenvolvi para simular um fundo na página web que se redimensiona conforme o tamanho da janela do navegador. Além disso ele fica fixo, como o efeito de "marca d'água".




<body style="margin: 0; overflow: hidden"><br /> <img src="fundo.jpg" style="position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%" /><br /> <div style="position: absolute; z-index: 1; width: 100%; height: 100%; overflow: auto"> <div style="margin: 10px"> Coloque o conteúdo da página aqui.<br /> </div> </div></body><br />

Colocar botão Curtir e Enviar do Facebook em Todas as Paginas do Blog

Cada vez é mais importante conseguir divulgação nas redes sociais, então vamos falar sobre o botão curtir e enviar do facebook para ser utilizado em todas as paginas do seu blog e não somente nas paginas das postagens.

Assim seus visitantes poderão curtir ou enviar para o facebook além de seus posts, a sua pagina inicial ou paginas dos marcadores, enfim o botão recomenda a pagina que ele está e não uma postagem em especifico.
Entre na pagina layout, adicione um gadget de HTML/javascript e cole esse código:

<div id="fb-root"></div><script src="http://connect.facebook.net/pt_BR/all.js#appId=169279313141006&xfbml=1"></script><br /> <script language="JavaScript" type="text/javascript"> var endereco=(location.href) document.write('<fb:like href="'+endereco+'" send="false" layout="box_count"style="float:right;" width="80" show_faces="false" font=""></fb:like>'); </script>


Se quiser mostrar o botão enviar só precisa trocar o código send="false" por send="true"

Ou se desejar o botão enviar ao lado do curtir apague este trecho do código: layout="box_count" e coloque no lugar layout="button_count". E aumente o valor width="80" para width="150" isso faz dar mais espaço para o iframe do facebook. Apenas precisamos avisar que depois de passar das mil pessoas que curtiram a pagina o botão neste formato apresentou uma falha nos testes que fizemos, veja na imagem abaixo que no Firefox não apareceu a palavra mil e no internet Explorer o mil

Lightbox, Mover o mouse sobre a imgem off para ligar o lightbox

Pure CSS Light Box Example - Devin Olsen

Esta é uma demonstração de como usar css puro para recriar a famosa caixa de luz que você vê por toda a internet para galeria de fotografia e trabalho de carteira.
Mover o mouse sobre o botão para ligar a mesa de luz diante. Mover o mouse sobre o botão off para ligar o lightbox off.

Off

Pure CSS Light Box Example - Devin Olsen<br /> <style type="text/css"> html,body{height:100%;} #box {width:650px; text-align:left; margin-left:auto; margin-right:auto; margin-top:30px; border:#333333 dashed; border-width:1px; padding:10px;} .onLight {padding:2px; width:20px; background:#000000; border:#333 solid; border-width:1px; cursor:pointer;} .onLight:hover div, .offLight {display:block;} .offLight {padding:2px; z-index:200; width:25px; background:#333; border:#333 solid; border-width:1px; position:absolute; top:560px; right:310px; display:none; cursor:pointer;} .offLight:hover + .lightBox {display:none;} .lightBox {width:100%; height:100%; float:left; position:absolute; z-index:100; background-color:#000000; top:0px; left:0px; right:0px; display:none; cursor:default; opacity: .80; /*FOR ALL OTHER BROWSERS AND DEVICES*/ filter: alpha(opacity=80); /*FOR IE7*/ } .content {width: 600px; height: 460px; border: solid 2px #fff; background: #ccc; margin:20px auto; position:absolute; z-index:200; top: 30px; display:none; padding:20px;} h2 {margin:0px;} </style><br /> <br /> <br /> <br /> <br /> <div id="box">Esta é uma demonstração de como usar css puro para recriar a famosa caixa de luz que você vê por toda a internet para galeria de fotografia e trabalho de carteira.<br /> Mover o mouse sobre o botão para ligar a mesa de luz diante. Mover o mouse sobre o botão off para ligar o lightbox off.<br /><br /> <br /> <div class="onLight"> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM "width="60" height="50"/> <div class="offLight">Off</div> <div class="lightBox"></div> <div class="content"> <br /> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM "width="600" height="450" alt="funny dog" style="margin-left:0px;" /><br /> <br /><br /> <br /> </div> </div></div>

Lightbox, Mover o mouse sobre o botão off para ligar o lightbox

Pure CSS Light Box Example - Devin Olsen

Esta é uma demonstração de como usar css puro para recriar a famosa caixa de luz que você vê por toda a internet para galeria de fotografia e trabalho de carteira.
Mover o mouse sobre o botão para ligar a mesa de luz diante. Mover o mouse sobre o botão off para ligar o lightbox off.
OBS:ELE TEM 2 AJUSTE PRA O TOPO

On

Off

Pure CSS Light Box Example - Devin Olsen<br /> <style type="text/css"> html,body{height:100%;} #box {width:650px; text-align:left; margin-left:auto; margin-right:auto; margin-top:30px; border:#333333 dashed; border-width:1px; padding:10px;} .onLight {padding:2px; width:20px; background:#000000; border:#333 solid; border-width:1px; cursor:pointer;} .onLight:hover div, .offLight {display:block;} .offLight {padding:2px; z-index:200; width:25px; background:#333; border:#333 solid; border-width:1px; position:absolute; top:560px; right:310px; display:none; cursor:pointer;} .offLight:hover + .lightBox {display:none;} .lightBox {width:100%; height:100%; float:left; position:absolute; z-index:100; background-color:#000000; top:550px; left:0px; right:0px; display:none; cursor:default; opacity: .80; /*FOR ALL OTHER BROWSERS AND DEVICES*/ filter: alpha(opacity=80); /*FOR IE7*/ } .content {width: 600px; height: 460px; border: solid 2px #fff; background: #ccc; margin:20px auto; position:absolute; z-index:200; top: 550px; display:none; padding:20px;} h2 {margin:0px;} </style><br /> <br /> <br /> <br /> <br /> <div id="box">Esta é uma demonstração de como usar css puro para recriar a famosa caixa de luz que você vê por toda a internet para galeria de fotografia e trabalho de carteira.<br /> Mover o mouse sobre o botão para ligar a mesa de luz diante. Mover o mouse sobre o botão off para ligar o lightbox off.<br /> OBS:ELE TEM 2 AJUSTE PRA O TOPO<br /> <br /> <div class="onLight"><br /> On<br /> <div class="offLight">Off</div> <div class="lightBox"></div> <div class="content"><br /> <img src="http://images.orkut.com/orkut/photos/PQAAAG_mB2yEmdtaQ59pqcjkJSZkDEp_5IhvGeQkkEKhKzBkMIaA2RxodUtJg-2ObGc21LDP9HmO44oc_aJX49Zm4-cAm1T1UOGP4k1fa94KoMbNyIxg90rZ6EpP.jpg"width="600" height="450" alt="funny dog" style="margin-left:0px;" /><br /> <br /> <br /> <br /> </div></div></div>

LIGHTBOX EXAMPLE COM CONTEÚDO

LIGHTBOX EXAMPLE

This is the main content. To display a lightbox click ABRI

COLOQUE AQUI O CONTEÚDO FECHAR

LIGHTBOX EXAMPLE<br /> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; } </style><br /> <br /> <br /> <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"> ABRI</a></p><br /> <div id="light" class="white_content">COLOQUE AQUI O CONTEÚDO <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">FECHAR</a></div><div id="fade" class="black_overlay"></div>

Letra com sombra no Orkut

LETRA PEQUENA

Texto 1 vai aquiSEU TEXTO 2 AQUI

<div style="text-shadow: 5px 5px 7px black;"><span style="color: #0000FF;">Texto 1 vai aqui</span>SEU TEXTO 2 AQUI</div>

LETRA GRANDE

Texto 1 vai aqui SEU TEXTO 2 AQUI

<div style="text-shadow: 5px 5px 7px black;"><h1><span style="color: #0000FF;">Texto 1 vai aqui</span> SEU TEXTO 2 AQUI</h1></div>

Letra com sombra no Orkut 1


Letra com sombra no Orkut 2

passarinho do twitter que voa na tela do seu blog

onde está escrito http://twitter.com/#!/alequinho01, você coloca seu endereço do twitter. Salve e pronto.

Fácil né! Espero que gostem!

fonte: http://oloblogger.blogspot.com

passarinho do twitter que voa na tela do seu blog<script src="http://oloblogger.googlecode.com/files/tripleflap.js" type="text/javascript"> </script><br /> <script type="text/javascript"> var birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png'; var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span'); var twitterAccount = 'http://twitter.com/#!/alequinho01'; var twitterThisText =''; tripleflapInit(); </script>

Alinhamento de imagens

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHnT53H87KBxS2k2GN35y0qIx8gg2npj3X-8cvLHJt42VvYuJVywLkjSIK24ZCzZi7Xc0FyWGvRjnBpZf0jATXGkgr6pXj0unCGG1yHxDxaaq-mGGFns2tlGSwwHIoHcRqvmJVEggsVIgg/s800/japones6.gif' align='left'>


<br /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHnT53H87KBxS2k2GN35y0qIx8gg2npj3X-8cvLHJt42VvYuJVywLkjSIK24ZCzZi7Xc0FyWGvRjnBpZf0jATXGkgr6pXj0unCGG1yHxDxaaq-mGGFns2tlGSwwHIoHcRqvmJVEggsVIgg/s800/japones6.gif' style='float:left;'>



<br /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHnT53H87KBxS2k2GN35y0qIx8gg2npj3X-8cvLHJt42VvYuJVywLkjSIK24ZCzZi7Xc0FyWGvRjnBpZf0jATXGkgr6pXj0unCGG1yHxDxaaq-mGGFns2tlGSwwHIoHcRqvmJVEggsVIgg/s800/japones6.gif' align='right'>



<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHnT53H87KBxS2k2GN35y0qIx8gg2npj3X-8cvLHJt42VvYuJVywLkjSIK24ZCzZi7Xc0FyWGvRjnBpZf0jATXGkgr6pXj0unCGG1yHxDxaaq-mGGFns2tlGSwwHIoHcRqvmJVEggsVIgg/s800/japones6.gif' style='float:right;'>



<br /> <center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHnT53H87KBxS2k2GN35y0qIx8gg2npj3X-8cvLHJt42VvYuJVywLkjSIK24ZCzZi7Xc0FyWGvRjnBpZf0jATXGkgr6pXj0unCGG1yHxDxaaq-mGGFns2tlGSwwHIoHcRqvmJVEggsVIgg/s800/japones6.gif'></center>

Como dividir o conteúdo em colunas automáticas

Conteúdo da segunda coluna.

Conteúdo da primeira coluna.

<div style="width: 250px; float: right; margin-left: 5px; margin-right: 5px">Conteúdo da segunda coluna.</div><div style="width: 250px; margin-left: 5px; margin-right: 5px">Conteúdo da primeira coluna.</div>

O efeito Light Box é mais simples do que parece de ser colocado no blog, esse efeito faz que ao clicar numa imagem ela apareça sobre o pagina inteira do blog e cobrindo o restante da tela com um tom de cor mais escura.

Economizar energia eletrica



imagem ou texto

Ampliar imagem quando passa o mouse

<img class="expa" src="COLOQUE AQUI O ENDEREÇO DA IMAGEM " /><br /> <style> img.expa { cursor: pointer; max-width: 150px; } img.expa:hover { max-width: none; } </style></div>

Mensagem Na Caixa de Texto

<div dir="ltr" style="text-align: left;" trbidi="on"><script language="JavaScript"> <!-- function Menu1(form) { form.TXTVal.value="seu texto 1";}function Menu2(form) { form.TXTVal.value="seu texto 2"; }function Menu3(form) { form.TXTVal.value="seu texto 3"; }function Menu4(form) { form.TXTVal.value="seu texto 4"; } function Menu5(form) { form.TXTVal.value="seu texto 5"; } // --> </script><br /> <div align="center"><form><br /> <br /> <input onclick="javascript:alert('sua mensagem.')" onmouseover="Menu1(this.form);" style="background: #1e90ff; color: black; font-size: 8pt; font-style: verdana; font-variant: normal;" type="button" value="texto 1" /><input onclick="javascript:alert('sua mensagem.')" onmouseover="Menu2(this.form);" style="background: #1e90ff; color: black; font-size: 8pt; font-style: verdana; font-variant: normal;" type="button" value="texto 2" /><input onclick="javascript:alert('sua mensagem.')" onmouseover="Menu3(this.form);" style="background: #1e90ff; color: black; font-size: 8pt; font-style: verdana; font-variant: normal;" type="button" value="texto 3" /><input onclick="javascript:alert('sua mensagem.')" onmouseover="Menu4(this.form);" style="background: #1e90ff; color: black; font-size: 8pt; font-style: verdana; font-variant: normal;" type="button" value="texto 4" /><input onclick="javascript:alert('sua mensagem.')" onmouseover="Menu5(this.form);" style="background: #1e90ff; color: black; font-size: 8pt; font-style: verdana; font-variant: normal;" type="button" value="texto 5" /><br /> <input name="TXTVal" size="60" type="text" /></form></div></div>

Foto deslizante

Menu

• 
• 
• 
• 
• 
• 
• 

<script src="http://sites.google.com/site/menudeslizante/menudeslizante/prototype.js" type="text/javascript"> </script><br /> <script src="http://sites.google.com/site/menudeslizante/menudeslizante/effects.js" type="text/javascript"> </script><br /> <script src="http://sites.google.com/site/menudeslizante/menudeslizante/side-bar.js" type="text/javascript"> </script><br /> <div id="sideBar"><div id="sideBarContents" style="display: none;"><div id="sideBarContentsInner"><h2>Menu</h2><ul><li><img height="400" src="coloque aqui o endereço da imagem" title=" COLOQUE AQUI O TEXTO " width="400" /></li> <li><img height="400" src="coloque aqui o endereço da imagem" title=" COLOQUE AQUI O TEXTO " width="400" /></li> <li><img height="400" src="" title=" COLOQUE AQUI O TEXTO " width="400" /></li> <li><img height="400" src="coloque aqui o endereço da imagem" title=" COLOQUE AQUI O TEXTO " width="400" /></li> <li><img height="400" src="coloque aqui o endereço da imagem" title=" COLOQUE AQUI O TEXTO " width="400" /></li> <li><img height="400" src="coloque aqui o endereço da imagem" title=" COLOQUE AQUI O TEXTO " width="400" /></li> <li><img height="400" src="coloque aqui o endereço da imagem" title=" COLOQUE AQUI O TEXTO " width="400" /> </li> </ul></div></div><a href="javascript:vd()" id="sideBarTab"><br /> <img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIrBGF01-PZHJpuUnJqFLF141-TlIQof22y-WshBU59BbRaDpyqjFnsnsN7mh9wk22LKyxE700TAj3l9lbbKTR61WB24lvmRO8IFH5hGfH2NGaWE3eCS8bXkIZEr-2xK7OJcIdRitB7uA/s1600/menu.png" title="sideBar" /></a></div></div>

Terremoto da página

Não ligue para a mensagem no botão e clique

Terremoto

<script language="javascript"><!-- var username = "celso"; var i = "34"; // --></script><br /> <h1 align="center">Terremoto</h1><br /> <p align="center"><script language="JavaScript1.2"> <!-- Begin netscape = (navigator.appName == "Netscape"); n4 = netscape && (parseInt(navigator.appVersion) >= 4); explorer = (navigator.appName == "Microsoft Internet Explorer"); ie4 = explorer && (parseInt(navigator.appVersion) >= 4); function tremida(n) { if (n4 || ie4) { for (i = 10; i > 0; i--) { for (j = n; j > 0; j--) { self.moveBy(0,i); self.moveBy(i,0); self.moveBy(0,-i); self.moveBy(-i,0); } } } } // End --> </script> <small><br /> <p><input type="button" name="Button" value="Não clique aqui!" onclick="tremida(18)"><br />

CÓDIGO DE BLOQUEIO DO BOTÃO DIREITO DO MOUSE,PRA PÁGINA INTEIRA

Pra página inteira com todos os direitos reservados
OBS:Está só o código aqui, não estou usando neste site

<script language="JavaScript"> function click() { if (event.button==2||event.button==3) { oncontextmenu='return false'; alert ('Todos os direitos reservados'); } } function keypresed() { alert(' Teclado f11 '); } document.onkeydown=keypresed; document.onmousedown=click document.oncontextmenu = new Function("return false;") </script>

quando clica aparece foto que vai aumentando pela página

Você coloca um "link" e quando clica aparece foto que vai aumentando pela página, bem legal!!

Clique aqui !!

<div dir="ltr" style="text-align: left;" trbidi="on"> <style type="text/css"> #divZoom {position:absolute; left:0px; top:170px; width:100%; text-align:center;} </style> <script language="JavaScript" type="text/javascript"> /********************************************************************************** ZoomFade * Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a> * This script was released at DHTMLCentral.com * Visit for more great scripts! * This may be used and changed freely as long as this msg is intact! * We will also appreciate any links you could give us. * * Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a> *********************************************************************************/ function lib_bwcheck(){ //Browsercheck (needed) this.ver=navigator.appVersion this.agent=navigator.userAgent this.dom=document.getElementById?1:0 this.opera5=this.agent.indexOf("Opera 5")>-1 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; this.ie4=(document.all && !this.dom && !this.opera5)?1:0; this.ie=this.ie4||this.ie5||this.ie6 this.mac=this.agent.indexOf("Mac")>-1 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5) return this } var bw=new lib_bwcheck() /*Here are the variables you have to set, play with different values: First the text: (it will stop and fade/change the colors on the last one)*/ zText=new Array('<img src="COLOQUE AQUI O EMDEREÇO DA IMAGEM "> ','<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM ">','<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM ">','<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM ">') //Now the colors: //all you have to do is set the color you want to have in here: //(the first color will be the color that the text is when it zooms.) zColor=new Array('#000000','#000000','#ff00cc','#000000','#FF00CC') var zEndSize=70 //The fontsize in px you want the zoom to end at var zSpeed=40 //Zoom speed var zAddSize=5 //Px to add to the fontsize on each interval var zFadeSpeed=70 //Color change/fade speed var zFont='arial black,arial,helvetica,sans-serif' //Font var zHide=true //do you want it to hide when its done? (true or false) var zHideWait=70 //Time to wait before hiding var zStartSize=10 //The size to start at var zEndCode="" // Code to execute when the zoom and fade is finished. ie: "location.href='newpage.html', executes when the hide does. /*You can remove this if you don't wan't it to start right away. You can have it start if someone clicks a link (make a link like this: <a href="#" onclick="fadeInit()">Click to Zoomtext</a>)*/ //onload=zoomInit; /********* You shouldn't really have to set anything below this point ***********/ //Object functions function makeZoomObj(obj,font,size,endsize,color,text,zspeed,fadespeed,addsize,hide,hidewait,endcode){ this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?document.layers[obj]:0; this.writeref=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj].document:0; this.zoomWrite=b_zoomWrite; this.zoomIt=b_zoomIt; this.fadeIt=b_fadeIt; this.zoomFade=b_zoomFade; this.font=font; this.color=new Array(); this.color=eval(color); this.text=new Array(); this.text=eval(text); this.zspeed=zspeed; this.fadespeed=fadespeed; this.addsize=addsize; this.endcode=endcode this.hide=hide; this.hidewait=hidewait; this.size=size; this.startsize=size; this.endsize=endsize if(size<endsize){this.way="<"; this.addsize=this.addsize }else{this.way=">"; this.addsize=-this.addsize} if(bw.dom || bw.ie4){ //Setting the style properties this.css.fontFamily=this.font; this.css.fontSize=this.size+"px"; this.css.color=this.color[0] } this.obj = obj + "Object"; eval(this.obj + "=this"); return this } function b_zoomFade(num){ if(num<this.text.length){ this.size=this.startsize this.zoomIt(num,'this.zoomFade('+(num+1)+')') } else if(num==this.text.length) this.fadeIt(0,'this.zoomFade('+(num+1)+')') else if(this.hide) setTimeout(this.obj+".css.visibility='hidden'; eval("+this.obj+".endcode)",this.hidewait) } function b_zoomWrite(num,cnum){ if(bw.ns4){ this.writeref.write('<span style="text-align:center; font-size:' +this.size+'px; font-family:'+this.font+'; color:'+this.color[cnum]+'">'+this.text[num]+'</span>') this.writeref.close() }else this.writeref.innerHTML="<center>"+this.text[num]+"</center>" } function b_zoomIt(num,fn){ if(eval(this.size+this.way+this.endsize)){ if(this.size==this.startsize || bw.ns4) this.zoomWrite(num,0) if(bw.dom || bw.ie4) this.css.fontSize=this.size+"px" this.size=this.size+this.addsize setTimeout(this.obj+".zoomIt("+num+",'"+fn+"')",this.zspeed) }else eval(fn) } function b_fadeIt(num,fn){ if(num<this.color.length){ if(bw.ns4) this.zoomWrite(this.text.length-1,num) else this.css.color=this.color[num] num++ setTimeout(this.obj+".fadeIt("+num+",'"+fn+"')",this.fadespeed) }else eval(fn) } /*Initiates the object, shows it and starts the zoom ****************************************************************************/ function zoomInit(){ if(bw.bw){ oZoom=new makeZoomObj('divZoom',zFont,zStartSize,zEndSize,'zColor','zText',zSpeed,zFadeSpeed,zAddSize,zHide,zHideWait,zEndCode) oZoom.zoomFade(0) oZoom.css.visibility='visible' } } </script> <div align="center" id="divZoom"> </div><a href="#" onclick="zoomInit(); return false">Clique aqui !!</a> </div>

Quando passar o mouse na foto em miniatura fazer com que abra a foto maior no local desejado.

<div dir="ltr" style="text-align: left;" trbidi="on"><script type="text/javascript"> function exibir1(img) { document.getElementById("exibe").src= img } </script><br /> <center><br /> <img alt="" height="300px" id="exibe" src="COLOQUE AQUI O ENDEREÇO DA IMAGEM " width="400px" /><br /> <br /> <div style="align: center; width: 270px;"><br /> <div style="float: left; width: 80px;"><img alt="" height="50px" id="exibe" onmouseover="exibir1(this.src);" src="COLOQUE AQUI O ENDEREÇO DA IMAGEM" width="70px" /></div><div style="float: left; width: 80px;"><img alt="" height="50px" id="exibe" onmouseover="exibir1(this.src);" src="COLOQUE AQUI O ENDEREÇO DA IMAGEM" width="70px" /></div><div style="float: left; width: 80px;"><img alt="" height="50px" id="exibe" onmouseover="exibir1(this.src);" src="COLOQUE AQUI O ENDEREÇO DA IMAGEM" width="70px" /></div><div style="float: left; width: 80px;"><img alt="" height="50px" id="exibe" onmouseover="exibir1(this.src);" src="COLOQUE AQUI O ENDEREÇO DA IMAGEM" width="70px" /></div><div style="float: left; width: 80px;"><img alt="" height="50px" id="exibe" onmouseover="exibir1(this.src);" src="COLOQUE AQUI O ENDEREÇO DA IMAGEM" width="70px" /></div><div style="float: left; width: 80px;"><img alt="" height="50px" id="exibe" onmouseover="exibir1(this.src);" src="COLOQUE AQUI O ENDEREÇO DA IMAGEM" width="70px" /><br /> </div></div></center><br /> <div style="white-space: nowrap;"></div></div>