Busca

Carregando...

quarta-feira, 17 de dezembro de 2008

Frase aleatória

Atualizado dia 31/05/2015.

Este script exibe uma frase aleatória a cada vez que a página é carregada.

Crie seu próprio widget

Seguem os passos de como fazer para criar um widget com suas próprias frases.

1. Defina as frases

Entre as tags <head> e </head> coloque os seguinte código:

<script language='JavaScript' type='text/JavaScript'>
function makeQuote() {
Q = new Array();
Q[0] = "<i>Assim como o sol derrete o gelo, a gentileza evapora mal-entendidos, desconfianças e hostilidade.</i>Albert Schweitzer"
Q[1] = "<i>É impossível fazer qualquer coisa à prova de tolos, porque os tolos são muito engenhosos.</i>Arthur Bloch"
Q[2] = "<i>Quem ama crê no impossível.</i> Elisabeth B. Browning"
index = Math.floor(Math.random() * Q.length);
document.writeln(Q[index]);
}
</script>
</head>
2. Folha de estilos

Entre as tags <style> e </style> (qualquer site) ou entre <b:skin><![CDATA[/* e ]]></b:skin> (Blogger) insira o código:

#newquote {color:gray; font-family:verdana; font-size:11px; text-align:right; padding:5px;}
#newquote i {display:block; color:black; font-family:georgia, trebuchet ms; font-size:13px;}
#newquote small {display:block; text-align:right; margin-top:10px;}
]]></b:skin>

Observe que você pode utilizar seu conhecimento de CSS para personalizar seu widget como achar melhor.

3. Insira o widget

No local de seu blog onde deseja que a frase aleatória apareça, insira o seguinte código:

<div id='newquote'>
<script language="javascript">
makeQuote();
</script> </div>

Deve ficar parecido com isso:

Frase aleatória

Sim, este widget é bastante trabalhoso. Principalmente a parte de ter que ficar adicionando nova frases. Por isso tenho outra opção.

Widget com frases escolhidas por mim

Se você confia no meu gosto para escolha de frases, poderá usar meu script de frases aleatórias.

1. Insira o script

Entre as tags <head> e </head> insira:

<script type='text/javascript' src='http://web.htmhelen.com/frase.js' language='JavaScript'></script>
</head>
2. Insira a folha de estilos

Para utilizar a minha folha de estilos, insira depois de <head> e antes de </head> o seguinte código:

<link type='text/css' rel='stylesheet' href='http://web.htmhelen.com/frase.css'></link>
</head>

Para personalizar a sua folha de estilos com as cores, tamanhos e fontes que desejar, coloque o seguinte código em sua folha de estilos:

#newquote {color:gray; font-family:verdana; font-size:11px; text-align:right; padding:5px;}
#newquote i {display:block; color:black; font-family:georgia, trebuchet ms; font-size:13px;}
#newquote small {display:block; text-align:right; margin-top:10px;}
]]></b:skin>
3. Insira o widget no local desejado
<div id='newquote'>
<script language="javascript">
makeQuote();
</script> </div>

Deve ficar parecido com isso:

Frase aleatória
Update 18/12/2008 22h48

O método acima funciona bem no Blogger e no UOL Blog.

Solução para blogs que não aceitam a edição do cabeçalho.

Se o seu blog gratuito não deixa você modificar o cabeçalho do código, você pode inserir todos os códigos juntos dentro do widget:

<script type='text/javascript' src='http://web.htmhelen.com/frase.js' language='JavaScript'></script> <link type='text/css' rel='stylesheet' href='http://web.htmhelen.com/frase.css'></link> <div id='newquote'>
<script language="javascript">
makeQuote();
</script> </div>

Fiz esse teste no Abril Blogs e no Vox.

Caso você utilize Blogger e precise ou prefira inserir todo o código dentro do widget, sem editar o cabeçalho, o código é o seguinte:

<script type='text/javascript' src='http://web.htmhelen.com/frase.js' language='JavaScript'></script>
<style>
#newquote {color:gray; font-family:verdana; font-size:11px; text-align:right; padding:5px;}
#newquote i {display:block; color:black; font-family:georgia, trebuchet ms; font-size:13px;}
#newquote small {display:block; text-align:right; margin-top:10px;}
</style> <div id='newquote'>
<script language="javascript">
makeQuote();
</script> </div>

Foi este código acima que utilizei neste post. Este código é o que funciona melhor no Blig.

Atualmente o meu script tem 202 frases.

Até mais!

Posts relacionados