Dicas para Blogs e Sites

Umas das coisas mais importantes em um blog é saber a opinião das pessoas que visitam o blog. Afinal só assim podemos saber o que devemos colocar ou tirar do blog conforme a procura ou reações de nossos visitantes. Para fazer isso você pode deixar seu e-mail no blog, mas também pode colocar um formulário para contato, afinal é bem mais fácil os visitantes preencherem algumas linhas de um formulário do que enviar um email. Veja também como usar o Google Docs para criar um formulario de contato.

Existem vários sites que fazem esses formulários de contado grátis, você só precisa fazer um cadastro, copiar o código e colocar no seu blog, entre na página layout, clique em adicionar gadget, escolha a opção html/javascript e cole o código e pronto, quando alguém usar o formulário no seu blog você receberá a mensagem no seu e-mail e alguns sites ainda tem outros serviços relacionados a envio e recebimento de mensagens através do site. Logo abaixo com uma lista com sites que fazem gratuitamente esse tipo de serviço.

Wufoo
Contactify
Email Me Form
JotForm
123Contact Form
Kontactr

Caso você use ou conheça algum outro site que faça esse serviço de contato direito através do site, e tenha boa qualidade nos serviços deixe um comentário e vamos colocá-lo nesta lista Afinal sempre é bom ter mais opções.

Veja aqui um formulario de contato para sites em PHP

Marcadores: Iniciantes, Mais visitas, Sites Úteis

Respondendo uma duvida deixada em um de nossos comentários sobre como colocar um efeito no banner de parceria, tamanho 120x60. Existe um código para trocar a imagem quando passamos o mouse sobre ela, é um código simples e funciona perfeitamente, passe o mouse sobre nosso banner ao lado e veja que ele muda, o código para fazer isso é:

<a href="http://jornaljd.blogspot.com"target="_blank" onMouseOver="document.images['myimage'].src='http://img410.imageshack.us/img410/6580/olho2.gif';" onMouseOut="document.images['myimage'].src='http://img22.imageshack.us/img22/7136/jornal.jpg';"><img src="http://img22.imageshack.us/img22/7136/jornal.jpg" border="0" id="myimage"/></a>


Você precisará fazer duas imagens do mesmo tamanho e hospedar a imagem, sugerimos fazer isso no ImageShack se tiver dificuldades para encontrar a url certa da imagem veja essa explicação em video depois é só colocar os endereços das imagens no código acima e pronto. Mas note que uma das imagens é repetida duas vezes no código.

Apesar de falarmos em imagens para banners de parcerias esse código serve para imagens de qualquer tamanho. Outro detalhe que precisamos esclarecer é que esse código apenas troca a imagem mas quando passar o mouse na imagem que usamos como exemplo notará que ela ficou semi transparente a explicação de como fazer isso você encontra em nossa postagem sobre imagens transparentes.

Marcadores: Imagens, Personalizar

Para modificar a aparência (cor da letra, itálico, cor de fundo ou colocar uma barra de rolagem) somente dos marcadores do blog precisamos criar um novo estilo CSS e aplicar aos marcadores somente. Isso é feito em duas partes, primeiro entre na pagina editar HTML e clique para Expandir modelos de widgets, então procure os marcadores do seu blog.

No caso deste blog (imagem acima) o nome dos nossos marcadores é guia rápido, então encontre os marcadores do seu blog na pagina editar HTML, é claro será com o nome (titulo) que você usa nos marcadores.  Quando achar umas linhas abaixo tem <ul>, modifique para ficar igual dessa imagem <ul class='guiarapido'>, a palavra guiarapido será o novo estilo CSS que vamos criar então pode ser qualquer palavra, mas cuidado para não apagar os sinais ao lado ‘ porque sem eles não vai funcionar.

Depois que fizer isso vá até o começo do html, onde estão os estilos do seu blog (body, main, sidebar...) e coloque isso aqui:

.guiarapido { font-style: italic;
height: 200px;
overflow: auto;
}

A parte fonte-style: italic; é o efeito itálico, as outras linhas são a barra de rolagem, o valor 200 é a altura, isso você pode modificar como quiser. Se quiser colocar estilos diferentes para quando o mouse está sobre os links, faça desse jeito:

.guiarapido {height: 200px;
overflow: auto;
}

.guiarapido a{font-weight: bold;
}

.guiarapido a:hover{ font-style: italic;
}

Se não quiser a barra de rolagem nos marcadores é só não colocar a primeira parte do código. Nas duas partes seguintes coloque os estilos que desejar: tipo de letra, tamanho... (lembrando que a parte que tem o “a” são os links e “a:hover” é quando colocamos o mouse sobre o link, assim podemos editar somente os marcadores do blog sem alterar o restante dos links ou textos. Vamos lembrar mais uma vez que fizemos tudo isso usando o estilo com o nome de guiarapido apenas como exemplo, você pode usar qualquer palavra, mas tem que ser exatamente igual em todas as partes do código.

Marcadores: CSS, Efeitos

Quando vamos mudar a cor de alguma coisa no blog ou site precisamos saber qual o código HTML da cor que vamos usar, porque o template é feito em CSS usando códigos para definir as cores de tudo menos as imagens é claro. Então aqui está uma lista com o código de muitas cores para você usar como quiser no seu blog.

Veja aqui um Gerador de Código HTML das Cores que além dessas cores que mostramos logo abaixo permite você ver muitas outras cores e pegar os códigos.


Apesar do blogspot ter uma página de cores com algumas opções elas são limitadas então procure a cor que gostar na lista abaixo e copie o código para usar no blog, esses códigos serem para mudar a cor de tudo: fundo do blog, cores das letras, fundo das postagens ou sidebar, cores das bordas, enfim qualquer cor que veja num blog é definido através desses códigos. Então é só usar a lista de cores e deixar seu blog mais bonito e com cores diferentes.

Veja algumas aplicações uteis para o código das cores: também:
Como fazer e colocar botões no blog: esse código permite fazer botões em usar imagens isso deixa seu blog mais rapido e com ótima aparência.

Ou você pode Colocar bordas nas imagens do blog dando um efeito de moldura das suas imagens. E também o código das cores é util quando você quer Alterar cores dos links do seu blog. Embora seja possível fazer isso na pagina design do modelo em alguns casos será mesmo necessário editar diretamente no html do blog.

Marcadores: CSS, Html, Template

Um gadget que achei interessante e oferece várias opções é o adicionar lista de blogs, ele permite você mostrar uma lista das últimas atualizações de outros blogs e tem várias opções do que mostrar desses blogs inclusive exibir uma miniatura das imagens publicadas destes outros blogs.


Entre na página layout, adicionar gadget, lista de blogs e aparecerá essa janela. O primeiro passo é adicionar o endereço dos blogs que vamos usar em nossa lista, clique em adicione um blog à sua lista, coloque o endereço de um blog na janela que abre e clique no botão adicionar. Repita esse procedimento até adicionar todos os blogs que deseja.

Agora veja na parte de cima dessa tela tem várias opções uma delas é Snippet do item mais recente isso são as primeiras linhas do texto da postagem. Os demais itens da lista são fáceis de identificar qual a função. Se quiser mude o titulo e a forma de classificar que pode ser ordem alfabética ou postagem mais recente, sugerimos deixar nesta segunda classificação por ordem de postagem.

Quando terminar clique no botão salvar e veja o resultado, e claro depois de visualizar pode fazer alterações até chegar ao estilo que mais goste e combine com seu blog.

Marcadores: Conteúdo

Já publicamos alguns códigos que mostram a data no blog, porém eles eram grandes e complicados, este é o principal motivo de mostrar esse código porque ele é simples, fácil de usar e mostra a data completa até com o dia da semana.

<p align="center" style="font-family:'Comic Sans MS'; color:#0000ff; font-size:18px;text-transform: uppercase">
<script language="javascript">
<!--
var data = new Date();
document.write(data.toLocaleDateString());
//-->
</script></p>

Antes de colocar no blog veja como alterar a formatação desse código:

align="center" isso é o alinhamento do texto agora está centralizado se quiser pode trocar por left(esquerda) ou right(direita)
font-family:'Comic Sans MS'; é o tipo de letra basta trocar comic sans ms pela fonte que gostar mais, porém use fontes mais comuns daquelas que todo computador tem porque quando alguém entra no site se o computador dele não tiver a fonte que você escolheu ele vai trocar por outra.
color:#0000ff; aqui é a cor das letras, se precisar aqui tem uma lista com o código de muitas outras cores.
font-size:18px; o valor 18 é o tamanho da letra altere do jeito que achar melhor.
text-transform: uppercase; isso faz todas as letras ficarem maiúsculas se não quiser assim é só pagar esse trecho.

Para colocar no seu blog entre na pagina layout, adicionar gadget, html/javascript e cole o código e já está pronto.

Marcadores: Códigos, Scripts, Template