Dicas para Blogs e Sites: outubro 2007

Passar o mouse sobre

<a href="http://www.dicasparablogs.com.br/p/lista-de-tutoriais.html"
onmouseover="this.innerHTML = 'tutoriais diversos'"
onmouseout="this.innerHTML = 'posts aleatórios'">posts aleatórios</a>

Veja aqui o exemplo:
posts aleatórios

A finalidade deste código é trocar o texto quando o mouse está sobre ele. O funcionamento é bem simples e fácil de alterar. Você deve colocar a url da pagina que desejar e escolher o texto que aparecerá. Um detalhe que não pode ser esquecido é repetir duas vezes o texto normal (aquele que aparece quando não estava com o mouse sobre ele) no exemplo Meu Jornal, pois se colocar apenas uma vez quando passar o mouse sobre ele o texto mudará mas não voltará ao original quando tirar o mouse.
Outro cuidado que precisamos ter é usar textos com numero parecido de letras pois se o texto que aparece quando o mouse não está sobre ele tiver 10 letras e quando passar o mouse aparecer um texto de 20 letras talvez não tenha espaço na mesma linha então o texto ocupará duas linhas e isto faz todo o layout do blog dar um “pulo”, ou seja quando aparece o texto maior e passa a ocupar duas linhas tudo que estiver abaixo dele vai descer um pouco para dar espaço. Então tenha cuidado de verificar se quando passa o mouse o texto continua ocupando o mesmo numero de linhas.

Se quiser pode fazer algo parecido com imagens, veja aqui como fazer para trocar a imagem quando passa o mouse em cima dela.

Marcadores: Acessórios, Efeitos

Menu de Salto

Há pouco tempo publiquei uma dica sobre menu de salto, porém depois disso achei uma versão mais simples que funciona do mesmo jeito:

<form name="jump">
<select style="width:250px" name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;"
value="GO">
<option>Lista de Links</option>
<option></option>
<option value="http://dicasparablogs.blogspot.com">Dicas para blogs</option>
<option style="background-color: #cccccc"value="http://frasecurta.blogspot.com">Frases Curtas</option>
<option value="http://jornaljd.blogspot.com">Meu Jornal</option>
<option style="background-color: #cccccc" value="http://cidadeweb.110mb.com">Cidade Web</option>
</select>
</form>

E as alterações também podem ser feitas apenas adicionando ou removendo essas parte dentro do código acima. Para colocar cor de fundo ou alterar a largura do menu:
Alterar a cor de fundo: coloque esse código para mudar a cor de fundo style="background-color: #cccccc", isso pode ser em cada linha ou no menu completo, para mudar sobre uma linha faça assim:

<option style="background-color: #cccccc" value="http://dicasparablogs.blogspot.com">Dicas para blogs</option>

e para alterar a cor do menu inteiro desse jeito:

<select style="background-color: #cccccc;width:250px" name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">

Você notou que além da cor coloquei também widh:250px no código do menu jump, isso é a largura, acho isso útil para o menu não ficar muito justo as palavras, isto é opcional, mas tenha cuidado pois se você colocar um valor e escrever algo maior no seu menu só aparecerá à parte do texto que couber nesta largura.
O valor 250px e a cor #cccccc são apenas exemplos você deve substituir por qual achar melhor para seu blog.

Marcadores: Efeitos

Imagens Aleatórias

Este código serve para colocar frases ou imagens aleatórias no site ou blog. Ele faz aparecer somente uma das frases ou imagem por vez. Vamos começar explicando sobre as frases, você só precisa copiar o código e colocar as frases que desejar onde está escrito frase um, frase dois.... e assim por diante. Para mudar a quantidade de frases aleatórias você deve repetir quantas vezes forem necessárias esse trecho do código:

if (numero == 5){
frase = "Frase Seis"
}

Mas não esqueça de continuar a seqüência da numeração, portanto cuidado para não repetir os números senão o script não funcionará corretamente. Outra coisa que precisa ser alterada é o numero 6 nesta linha numero_de_imagens = 6, isto significa que temos 6 opções portanto se adicionar ou remover opções altere esse numero também.
Este código funciona também para imagens aleatórias para fazer isso basta colocar no lugar das frases o código das imagens, e funcionará normalmente, aparecendo uma imagem diferente cada vez que o blog for visitado.

Para usar esse código com imagens, no lugar das frases coloque a url das imagens, e troque document.write(frase), por:
document.write('<img src="' + frase + '" border=0>')

Marcadores: Códigos

Menu jump

O menu de salto é fácil de colocar e tem algumas coisas que podemos colocar para deixa-lo mais bonito, veja o exemplo:

Primeira Parte

Segunda Parte:

<form name="form1">
<select style="width: 300px" name="menu1" onChange="MM_jumpMenu('parent',this,0)">
<option>Links</option>
<option style="background-color:#cccccc"value="http://dicasparablogs.blogspot.com">Dicas para Blogs</option>
<option value="http://jornaljd.blogspot.com">Meu Jornal</option>
<option style="background-color: #cccccc"value="http://frasecurta.blogspot.com">Frases
Curtas</option>
<option value="http://cidadeweb.110mb.com">Cidade Web</option>
</select>
</form>

Basta colocar esse código no blog e mudar os links e já está funcionando, mas ele pode ver alterado em varias coisas por exemplo para mudar a largura desse menu é só mudar o numero 300 nesta parte style="width: 300px".

Outra coisa é a cor de fundo que pode ser usada a mesma para todo o menu ou uma para cada linha colocando o código style="background-color: #cccccc" e naturalmente pode ser de qualquer, para trocar de cor é só mudar isto #cccccc. Para colocar a mesma cor em todo menu coloque essa parte background-color: #cccccc junto com o que define a largura, deixando ele desse jeito: style="width: 300px;background-color: #cccccc".

Se quiser um menu convencional pode retirar essas partes mencionadas a cima, e naturalmente o valor (300) e a cor (#cccccc) são apenas exemplos você pode mudar para combinar da melhor forma possível com seu blog.

No Blogspot as duas partes do código podem ser colocadas juntas através da página layout que funcionará normalmente, caso você use esse código em outro blog ou site e não funcionar é por que o correto é colocar a primeira parte do script entre as tags <head> e </head> , fazendo isso ele funcionará normalmente.

Marcadores: Códigos, Template

Aumentar visitas

Existem diversos sites que oferecem meios de aumentar seu numero de visitas rapidamente, e fazem isto de varias formas trocas de banners, uma pagina abrindo automaticamente junto com o seu blog ou abrindo quando o visitante sai do blog, propaganda em pop up, você usar uma certa pagina inicial e outros. Porém para ter seu blog divulgado destas formas você terá também que colocar esses pop up, pagina abrindo em segundo plano e essas outras maneiras que citei acima.

Acredito que esta não seja uma boa maneira de conseguir visitas. Primeiro pense quando você está navegando na internet e entra num site que abre outro site em segundo plano (abrir outra janela automaticamente) ou mostra pop up e outras coisas geralmente fechamos essas coisas imediatamente sem olhar nada. Agora pense é esse o tipo de visita que deseja ganhar? Isso realmente faz seu contador de visitas “andar” mas essas pessoas que entraram meio que forçadas não prestaram atenção em quase nada.

Outro ponto negativo sobre esse tipo de divulgação é que quando colocamos essas coisas no nosso blog podemos fazer alguns de nossos visitantes resolverem não voltar mais devido a sabe que junto com nosso blog vem certos tipos de propagandas, redirecionamento...

Não colocarei links para sites que fazem esses serviços de gerar visitas porque poderiam dizer que estou criticando algum deles em especifico, porém não é essa minha intenção, este texto é uma critica a esse tipo de serviço. Isso é uma opinião pessoal e confesso que já usei vários serviços desse tipo durante algum tempo, mas acabei desistindo deles. Acredito que a troca de links ou banners, visitar e comentar outros blogs sejam melhores maneiras de divulgação do blog.

Marcadores: Mais visitas

Barra de Rolagem

Alguns acham isso de caixa de rolagem e outros pensam que isso é similar a um caixinha tipo link-me, mas na verdade é uma barra de rolagem somente, apenas sua aparência é igual de uma caixa. Para colocar um scroll ou barra de rolagem em alguma parte do blog o código é o seguinte:

<div style="height:100px; width:200px; overflow:auto; background-color:
#FFFFCC; text-align: center;padding: 2px; margin:5px ">
<div style="width:160px">
Conteúdo da caixa de rolagem
</div></div>

Isso é muito útil para economizar espaço no blog sem fazer que o visitante tenha que mover a pagina inteira para ver algo de uma lista especifica. Mas vamos entender como fazer uma barra de rolagem no blog. Neste código você precisa alterar alguns valores para deixar essa “caixa de rolagem” do tamanho certo para seu blog.
No código encontramos as seguintes partes:

height:100px - altura
width:200px - largura
overflow:auto - código da rolagem(não altere)
background-color: #FFFFCC – cor do fundo
text-align: center – alinhamento(center, left ou right)
padding: 2px - espaço entre a borda da caixa e o conteúdo
margin:5px - margem externa, serve para deixar um espaço vazio ao redor da caixa

Todos esses valores podem ser alterados para deixar a caixa de rolagem do jeito que seu blog precisa, porém se quiser você pode retirar alguma dessas partes do código que ele continuará funcionando normalmente, por exemplo, background-color: #FFFFCC somente deixe essa parte se quiser uma cor de fundo diferente para a caixa de rolagem.

Onde está escrito Conteúdo da caixa de rolagem, você pode colocar texto ou imagens e não tem limite para a quantidade de textos ou imagens para esse conteúdo. Porém lembre-se de respeitar a largura da caixa que você criou pois se as imagens tiverem largura maior que a caixa além da barra de rolagem lateral, aparecerá um barra de rolagem em baixo também.

Sobre a linha <div style="width:160px"> isso serve para evitar que apareça a barra de rolagem inferior no caso de textos portanto quando alterar o valor da largura tem que mudar esse também. Existem outros meios de fazer aparecer somente a barra lateral, mas quando testei eles não funcionaram em todos os navegadores, por exemplo o código overflow-x: hidden nao funcionou no Internet Explorer, por isso coloquei mais essa linha de código: <div style="width:160px">.

Marcadores: Códigos, Template

Contagem Regressiva

O código estava sendo modificado quando era publicado neste blog, por isso foi colocado em outro lugar, clique aqui para ver o código do contador regressivo.

Esse código faz aparecer no seu blog uma contagem regressiva. Isto pode ser útil para quem está programando algum evento, quer mostrar quantos dias faltam para seu aniversario ou aniversario do blog, enfim para qualquer coisa que precisa contar quantos dias, horas, minutos e segundo faltam para determinado dia.

Tem algumas coisas que você precisa mudar para usar essa contagem regressiva no seu blog, procure por setcountdown(2008,10,03) isto é a data limite da contagem está no formato(ano,mês,dia) e lembre-se de usar o numero zero no caso de precisar(01, 02, 03,...). Outras coisas para alterar são as frases "Data especial", "É hoje!!!" e "Já passou ! ! !", elas também podem ser trocadas, você pode escrever o que desejar, mas coloque entre aspas igual está aqui.

Marcadores: Códigos

Apagar comentários

Uma hora ou outra todos recebemos algum comentário indesejado que pode ser uma ofensa, propaganda enfim qualquer coisa que não gostaríamos de ver nos comentários do nosso blog. Isso não é um problema porque apagar esses comentários é muito fácil.

Primeiro entre no site do blogger (fazer login) depois abra seu blog em outra janela e clique para ver o comentário que deseja apagar. Você irá notar que junto com cada comentário tem uma imagem de uma lata de lixo (ela só aparece depois de fazer login), então clique na latinha então aparecerá um botão para excluir o comentário e embaixo dele um quadrinho para você marcar se quiser que está escrito remover definitivamente? A diferença entre marcar ou não esse quadrinho é que se não marcar quando alguém entrar no seu blog verá que um dos comentarios foi apagado porém se marcar o quadrinho isso faz o comentário indesejado sumir por completo, ou seja, ninguém saberá que você apagou.

Marcadores: Comentários, Iniciantes