Letras rolantes
<marquee onmouseout="this.start()" direction="up" on="" scrollamount="4" onmouseover="this.stop()" with="200" height="300">
<div align="center">
ESCREVA SUA FRASE AQUI</div>
</marquee>
EXEMPLO:
Frase vai e vem
<div align="justify"> <p align="center"> <strong><span style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:85%;color:#000080;"> <marquee style="font-family: Arial; color: rgb(0, 0, 128); font-weight: bold;" behavior="alternate" scrolldelay="70" align="middle" height="29" width="341">ESCREVA SUA FRASE AQUI</marquee> </span> </strong> </p></div>
<p align="center">
EXEMPLO:
OBS: Frases vai e vem não funcionam no google chrome.
Contador de visitantes
<div align=center><a href='https://contador.s12.com.br'><img src='https://contador.s12.com.br/img-7Z49cdY1-2.gif' border='0' alt='contador gratuito de visitas'></a></div>
EXEMPLO:
Letras que descem
<marquee direction="down">SEU TEXTO AQUI</marquee>
EXEMPLO:
Letras que sobem e descem
<marquee direction="up" behavior="alternate">SEU TEXTO AQUI</marquee>
EXEMPLO:
OBS: Letras que sobem e descem não funcionam com Google Crhome.
Letras em movimento de " V " para a direita.
<marquee direction="up" behavior="alternate" width="80%"><marquee direction="right">SEU TEXTO AQUI</marquee></marquee>
EXEMPLO:
OBS: Letras em " V " não funcionam com Google Chrome.
Texto em movimento em caixa.
<marquee style="BORDER-RIGHT: #ff4500 2px solid; BORDER-TOP: #ff4500 2px solid; BORDER-LEFT: #ff4500 2px solid; BORDER-BOTTOM: #ff4500 2px solid">SEU TEXTO AQUI</marquee>
EXEMPLO :
Texto com movimento em caixa com fundo colorido
<span ><marquee style="BACKGROUND: #cd3333">SEU TEXTO AQUI</marquee></span>
EXEMPLO :
Letras que piscam
<blink>SEU TEXTO AQUI</blink>
EXEMPLO:
Letras com sombra
<p style="text-shadow: 5px 5px 7px black;">SEU TEXTO AQUI</p>
EXEMPLO:
Letras com sombra
<p style="text-shadow: 5px 5px 7px black;">SEU TEXTO AQUI</p>
EXEMPLO:
OBS: Letras com sombra não fucionam com internet explorer
Efeito Flocos de Neve
<script src='https://snow-effect.googlecode.com/files/snow.js'></script>
OBS: O Código do efeito de neve dever ser implantado no rodapé do site , no mesmo local que adicionamos o código do favicon.
Caixa de mensagens gravadas
<script>
alert ("COLOQUE AQUI A MENSAGEM DESEJADA")
</script>
EXEMPLO:
Estrelinhas caindo do mouse
<script type="text/javascript">
// <![CDATA[
var colour="#00FF00";
var colour3="#FF0000";
var sparkles=70;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
var rats=createDiv3(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rlef=createDiv3(1, 5);
var rdow=createDiv(5, 1);
var rdow=createDiv3(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
function createDiv3(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour3;
return (div);
}
// ]]>
</script>
Velocímetro para teste de conexão de internet.
<div align="center"> <iframe name="Teste Velocidade da Internet" height="160" width="160" scrolling="no" frameborder="0" longdesc="https://www.minhaconexao.com.br/mini-velocimetro/description.txt" src="https://www.minhaconexao.com.br/mini-velocimetro/velocimetro.php?model=1&width=160&height=160"></iframe><br /><font size="2" face="Arial"><a href="https://www.minhaconexao.com.br" style="text-decoration:none"><b>Velocimetro</b></a></font></div>
EXEMPLO:
Passarinho do twitter
<script src="https://oloblogger.googlecode.com/files/tripleflap.js" type="text/javascript"></script> <br /> <script type="text/javascript"> var birdSprite='https://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 = 'https://twitter.com/nome_twitter'; var twitterThisText =''; tripleflapInit(); </script><br /> <br /> <br /> <br />
Tradutor de linguagem do site
<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('https://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src=https://lh6.ggpht.com/_pt7i0nbIOCY/SWwjycGEnLI/AAAAAAAAA1o/7p6S3-tipsA/English_thumb%5B3%5D.png?imgmax=800 style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('https://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://lh3.ggpht.com/_pt7i0nbIOCY/SWwj1AdOWZI/AAAAAAAAA1w/lWUkGNrOFYo/French_thumb%5B5%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('https://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://lh5.ggpht.com/_pt7i0nbIOCY/SWwj4Ab0NaI/AAAAAAAAA14/3H56LPKtijA/German_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('https://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://lh3.ggpht.com/_pt7i0nbIOCY/SWwj8KhadjI/AAAAAAAAA2A/GNyl8VBie3o/Spain_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('https://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://lh3.ggpht.com/_pt7i0nbIOCY/SWwj-14HeyI/AAAAAAAAA2I/TN52dIqkO9Q/Italian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('https://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://lh5.ggpht.com/_pt7i0nbIOCY/SWwkBmKewNI/AAAAAAAAA2Q/43NEAnyNo1I/Dutch_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<br/>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('https://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://lh4.ggpht.com/_pt7i0nbIOCY/SWwkESa-0pI/AAAAAAAAA2Y/i0X4cKgxq3g/Russian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('https://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://lh4.ggpht.com/_pt7i0nbIOCY/SWwkG0osjzI/AAAAAAAAA2g/_kM2A16R_Ho/Portuguese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('https://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://lh5.ggpht.com/_pt7i0nbIOCY/SWwkJ6RBJAI/AAAAAAAAA2o/lpsTh893J3k/Japanese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('https://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://lh4.ggpht.com/_pt7i0nbIOCY/SWwkMouNMKI/AAAAAAAAA2w/L5l6J-Hh8XA/Korean_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('https://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Car&hl=en'); return false;"><img alt="Arabic" borde
r="0" align="absbottom" title="Arabic" height="32" src="https://lh5.ggpht.com/_pt7i0nbIOCY/SWwkPdkvXBI/AAAAAAAAA24/A1LSG1lcuac/Arabic_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('https://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://lh6.ggpht.com/_pt7i0nbIOCY/SWwkSgrv4ZI/AAAAAAAAA3A/jQqZ1l6avts/Chinese-Simplified_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
</div>
<font face="Microsoft Sans Serif" color="#c0c0c0" size="1"><em>By <a href="https://01tutorial.webnode.com/">01 Tutorial Designs</a></em></font>
EXEMPLO:
Tradutor de linguagem ( 8 linguas )
<div style="padding:10px 4px 3px 4px;text-align:center;">
<!--–GOOGLE TRANSLATE MINI FLAGS–--><div align="center"><!--– Add Portuguese to Chinese (Simplified) BETA –--><a
target="_blank" rel="nofollow"
onclick="window.open('https://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Czh-CN&hl=pt&ie=UTF8'); return false;"
title="Google-Translate-Chinese (Simplified) BETA"><img
style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
alt="Google-Translate-Chinese"
src="https://lh5.ggpht.com/_mcq01yDJ2uY/Sdke4C8za2I/AAAAAAAAAkU/Mpfn_ntCweU/China.png"
title="Google-Translate-Chinese"><!--– END Portuguese to Chinese (Simplified) BETA–--><!--– Add Portuguese to French –--></a><a
target="_blank" rel="nofollow"
onclick="window.open('https://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cfr&hl=pt&ie=UTF8'); return false;"
title="Google-Translate-Portuguese to French "><img
style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
alt="Google-Translate-Portuguese to French"
src="https://lh4.ggpht.com/_mcq01yDJ2uY/SdkfGSkRgfI/AAAAAAAAAkc/X4E87SASLtA/France.png"
title="Google-Translate-Portuguese to French"><!--– END Portuguese to French –--><!--– Add Portuguese to German –--></a><a
target="_blank" rel="nofollow"
onclick="window.open('https://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cde&hl=pt&ie=UTF8'); return false;"
title="Google-Translate-Portuguese to German"><img
style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
alt="Google-Translate-Portuguese to German"
src="https://lh3.ggpht.com/_mcq01yDJ2uY/Sdke3rFjMUI/AAAAAAAAAkE/o0kR0MfngXA/Germany.png"
title="Google-Translate-Portuguese to German"><!--– END Portuguese to German –--><!--– Add Portuguese to Italian –--></a><a
target="_blank" rel="nofollow"
onclick="window.open('https://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cit&hl=pt&ie=UTF8'); return false;"
title="Google-Translate-Portuguese to Italian"><img
alt="Google-Translate-Portuguese to Italian"
style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
src="https://lh3.ggpht.com/_mcq01yDJ2uY/Sdke2xCmrPI/AAAAAAAAAj0/Jv14yyDo1i4/Italy.png"
title="Google-Translate-Portuguese to Italian"><!--– END Portuguese to Italian –--><!--– Add Portuguese to Japanese BETA –--></a><a
target="_blank" rel="nofollow"
onclick="window.open('https://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cja&hl=pt&ie=UTF8'); return false;"
title="Google-Translate-Portuguese to Japanese BETA"><img
style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
alt="Google-Translate-Portuguese to Japanese"
src="https://lh5.ggpht.com/_mcq01yDJ2uY/Sdke3f2KbNI/AAAAAAAAAj8/xyGLFdUZbVY/Japan.png"
title="Google-Translate-Portuguese to Japanese"></a><!--– END Portuguese to Japanese BETA –--><!--– Add Portuguese to English –--><a
target="_blank" rel="nofollow"
onclick="window.open('https://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cen&en=pt&en=UTF8'); return false;"
title="Google-Translate-Portuguese to English "><img
style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
alt="Google-Translate-Portuguese to English"
src="https://lh4.ggpht.com/_mcq01yDJ2uY/SdkhG4bjxqI/AAAAAAAAAks/Ws6AzZdnZTw/United%20States%20of%20America%20%28USA%29.png"
title="Google-Translate-Portuguese to English"><!--– END Portuguese to English –--><!--– Add Portuguese to Russian BETA –--></a><a
target="_blank" rel="nofollow"
onclick="window.open('https://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cru&hl=pt&ie=UTF8'); return false;"
title="Google-Translate-Portuguese to Russian BETA "><img
style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
alt="Google-Translate-Portuguese to Russian"
src="https://lh5.ggpht.com/_mcq01yDJ2uY/SdkfGVESWsI/AAAAAAAAAkk/-ruu99vFElQ/Russian%20Federation.png"
title="Google-Translate-Portuguese to Russian"><!--– END Portuguese to Russian BETA –--><!--– Add Portuguese to Spanish –--></a><a
target="_blank" rel="nofollow"
onclick="window.open('https://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Ces&hl=pt&ie=UTF8'); return false;"
title="Google-Translate-Portuguese to Spanish "><img
style="border: 0px solid ; cursor: pointer; width: 32px; height: 32px;"
alt="Google-Translate-Portuguese to Spanish"
src="https://lh3.ggpht.com/_mcq01yDJ2uY/Sdke312ethI/AAAAAAAAAkM/KeACgltRc38/Spain.png"
title="Google-Translate-Portuguese to Spanish"><!--– END Portuguese to Spanish –-->
<center><a href=https://01tutorial.webnode.com
target="_blank"><small>01 Tutorial Designs</small></a></center>
EXEMPLO:
Pesquisar no Google
<FORM method=GET action="https://www.google.com/search"> <INPUT TYPE=text name=q size=31 maxlength=255 value=""> <INPUT TYPE=hidden name=hl value="pt-br"> <INPUT type=submit name=btnG VALUE="Pesquisar no Google"></FORM>
EXEMPLO:
Título do site em movimento
<script> var repeat=0
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==1)
return
}
setTimeout("titlemove()",140)
}
if (document.title)
titlemove()
</script>
EXEMPLO:
OBS: Infelizmente não temos um exemplo.