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!

Pix meutedio arroba mail ponto com

10 comentários:

  1. Helen, essa dica é muito boa, mas eu queria inserir minhas próprias frases. Como é que faz? Já tenho todas elas em txt.

    ResponderExcluir
  2. Adorei!!! Você explicou tão bem que eu consegui fazer, mas preferi ficar com suas frases mesmo porque vc tem muito bom gosto. Parabéns

    ResponderExcluir
  3. e como eu colocaria akelas aspas que vc usa no primeiro exemplo?

    obrigado desde já arthur vasconcelos.

    vasconcelos.arthur@gmail.com

    ResponderExcluir
  4. Balgor Izur, visite o post:

    Quando e como usar blockquote

    Obs.: Não é nada seguro escrever seu e-mail no corpo de comentários de blogs.

    ResponderExcluir
  5. Tem como fazer elas mudarem automaticamente ? tipo acada 1 minuto

    ResponderExcluir
  6. EuQueFis, tem jeito, mas neste código não.

    ResponderExcluir
  7. Bom dia! coloquei sua dica a do inicio do post, ficou bem bacana,ta funcionando bem,porém vi que vc tem um (.js )gostaria de uma dica de colocar minhas proprias frases em .js que funcione no blogspot, já tentei e não consegui se puder fazer um .js com script p/editar fico grato.

    ResponderExcluir
    Respostas
    1. Avida, abra a página www.htmhelen.kit.net/frase.js em seu navegador, salve-a no seu computador com a extensão .js, abra em algum bloco de notas (sugiro o Notepad++) para personalizar, salve novamente em sua hospedagem (Webcindário, Dropbox, Google Sites…) e pegue a URL completa do arquivo para usar.

      Excluir
  8. Boa noite! Obrigado pela resposta pois ela me ajudou a ter certeza que estava fazendo certo, acho que foi um erro de formatação. Já estou editando aqui e colocando minhas mensagens em .js que são sobre fatos.Como forma de gratidão, caso queira me mande seu banner que colocarei no meu site. Obrigado. By... kratos

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.