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:
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 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:
<script language="javascript">
makeQuote();
</script> </div>
Deve ficar parecido com isso:
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:
</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:
</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 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
<script language="javascript">
makeQuote();
</script> </div>
Deve ficar parecido com isso:
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 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:
<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!
Helen, essa dica é muito boa, mas eu queria inserir minhas próprias frases. Como é que faz? Já tenho todas elas em txt.
ResponderExcluir@Georges, leia o tutorial com atenção.
ResponderExcluirAdorei!!! Você explicou tão bem que eu consegui fazer, mas preferi ficar com suas frases mesmo porque vc tem muito bom gosto. Parabéns
ResponderExcluire como eu colocaria akelas aspas que vc usa no primeiro exemplo?
ResponderExcluirobrigado desde já arthur vasconcelos.
vasconcelos.arthur@gmail.com
Balgor Izur, visite o post:
ResponderExcluir► Quando e como usar blockquote
Obs.: Não é nada seguro escrever seu e-mail no corpo de comentários de blogs.
Tem como fazer elas mudarem automaticamente ? tipo acada 1 minuto
ResponderExcluirEuQueFis, tem jeito, mas neste código não.
ResponderExcluirBom 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.
ResponderExcluirAvida, 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.
ExcluirBoa 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