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

O que faz você gostar de um blog, qual a sua principal qualidade? Então pedimos que respondesse nossa enquete dizendo o que faz você gostar de um blog, voltar nele mais vezes ou até recomendar a amigos.
A finalidade dessa enquete é mostrar o que as pessoas mais gostam e assim ajudar a cada um pensar melhor sobre o que pode melhorar em seu blog. Antes de votar queremos lembrá-lo que essa enquete não é sobre este blog, mas sobre blogs em geral.

Qual a principal qualidade de um blog?

Acessórios (previsão do tempo, links úteis, piadas....)

Atualizado (não ficar muitos dias sem postar)

Layout (cores, tamanho das letras e imagens)

Tema (assunto principal do blog: download, opinião, diário...)

Temas Variados (não ter um assunto principal)

Textos Interessantes (Conteúdo)



Votar

resultado parcial...

Marcadores: Enquetes, Pesquisa

Algum tempo atrás publicamos um texto falando sobre criar um link para voltar ao inicio da página, isso é útil no caso de páginas longas e o visitante pode voltar para o topo apenas num clique.
Com este código você pode fazer isso usando texto ou imagem (pode ser parecida com um botão), neste exemplo usamos uma imagem, porém se quiser apenas texto é só apagar o código da imagem <img src="URL DA IMAGEM" border="0"> e escrever o que desejar (voltar ao topo, inicio...).

<div style="position:fixed; bottom:0px; right:0px;"><a href="#" title="topo da pagina"><img src="URL DA IMAGEM" border="0"></a></div>

Esse link ou botão para voltar ao topo ficará sempre visível na parte inferior direita do seu site, mesmo rolando a página, ele não sairá de lá, ou seja, fica sempre fixo no mesmo lugar.


Uma alteração que podemos fazer é trocar o canto que ele vai aparecer, se em vez de aparecer embaixo você quiser que apareça no canto superior, apague bottom:0px; e coloque top:0px; isso faz aparecer no alto da página, ou se quiser trocar de lado tire right:0px; e coloque left:0px; mudará para o lado esquerdo. Ainda podemos escolher se ficará encostado nas margens da página ou deixaremos uma pequena distancia caso queira deixar alguma distancia da margem é só alterar os valores 0px para o numero que desejar.


Para colocar esse acessório no seu blog, entre na página layout, adicionar gadget, html/javascript e cole o código, não se preocupe em qual parte ou coluna vai colocar porque isso não importa, pois sempre aparecerá fixo no lugar definido no código(canto da página).

Marcadores: Acessórios, Efeitos, Scripts

Um site bem interessante para editar imagens online é o PiZap, fiz um teste e gostei do resultado e além disso é divertido ficar mexendo nas fotos. Se quiser fazer um teste antes de mexer nas suas imagens o site fornece algumas fotos, basta clicar numa das três imagens abaixo, mas se quiser fazer com uma imagem ou foto que esteja no seu computador é só clicar em Upload Photo e encontre a foto que deseja.

Quando clicar para carregar a imagem ela automaticamente aparece na sua tela e com um menu com varias ferramentas do lado direito text, stickers, face, paint, note que ao clicar em qualquer um deles aparecerão novas opções logo abaixo, então é só usar a criatividade e fazer o que quiser com sua imagem. Depois de terminar clique no botão save image e escolha public ou private se deixar public ela vai para a galeria de imagens, portanto é uma escolha que depende da sua vontade, então escolha e clique no botão save image.

Agora vai aparecer uma tela para você copiar o código da sua imagem a primeira linha (embed) é o código pronto para colocar a imagem no blog e a segunda é um link para a página que você estava vendo no PiZap. Ainda se quiser pode fazer o download da imagem, mas o site altera o tamanho, clique no botão download embaixo da imagem e escolha o tamanho.

Marcadores: Efeitos, Sites Úteis

Muitas pessoas que tem um blog ou um site não gostam do endereço do blog e até pensam em registrar um domínio, mas não querem gastar dinheiro com isso, embora os serviços pagos sejam melhores ou terão alguns recursos a mais, existem vários que fazem isso de graça. Um deles é o http://www.co.cc, para testar fizemos o cadastro de dois blogs no site e registramos o endereço http://www.dicasparablogs.co.cc e http://www.frasescurtas.co.cc, se clicar no link verá que abrirá outra janela com esse mesmo blog ou nosso blog de Frases para Orkut.

Então se gostou da idéia de ter um domínio sem gastar nada entre no site e faça seu cadastro: quando entrar no site em cima tem Chance Language e uma caixinha para selecionar então fica mais fácil mudar para português se não estiver assim.Mais ou menos no meio da tela, terá um lugar para escrever o domínio que pretende registrar, então digite o nome que quiser e clique verificar, não precisa colocar http://.

Se o que você escolheu estiver disponível e escrito gratuito em "continue to registration" ou continuar registro, às vezes aparece em português.

Irá aparecer uma pagina de loggin. Clique em “Create an account now” ou crie uma conta, você será direcionado para uma pagina de cadastro, preencha, obs: não se esqueça de marcar o quadradinho "I accept the Terms of Service".

Depois de preenchido clique em "create an account now" criar conta agora.
Na nova página que aparecer clique em "Set up" configurar.
Agora clique no "3. URL Forwarding". E preencha os dados do seu site:


Redirect To : http:// (www.seusite.blogspot.com)
Page Title : (O titulo da seu site )
Frame URL Hiding(Hide real address) já aparece nesta opção.
Meta Description: (Descrição do seu site)
Meta Keywords: (palavras chaves do seu site para sites de busca. ex: humor, piadas... etc)

Clique em "Set up", botão abaixo e pronto, agora você já tem mais um domínio e não gastou nada. Nem todas as partes são exatamente as mesmas palavras, pois fiz o cadastro com o site em português. O único cuidado é escolher um domínio que seja gratuito (free), pois às vezes aparecem alguns que já são registrados e você poderia comprar ou usar outros serviços no site.

Veja também:
Domínio gratuito - Dot TK

Marcadores: Sites Úteis

Colocar um contador de visitas é bem simples, existem vários sites que fornecem o serviço gratuitamente, aqui tem uma lista de vários contadores de visita grátis, alguns recomendados pela própria pagina de ajuda do blogspot:

Google Analytics
Site Meter
TrendCounter
FreeStats
Easy Hit Counters
StatCounter
Feedjit
Who's amung
BlogUtils

Os últimos 3 da lista mostram visitantes online, ou seja, que estão no seu site naquele momento. Alguns desses sites é necessário fazer cadastro para pegar o código, mas eles são grátis, depois que pegar o código entre na pagina layout, adicionar gadget, html/javascript e coloque o código do contador, clique para salvar e pronto.

Mas para que serve um contador de visitas? Parece uma pergunta boba, mas não é somente para enfeitar o blog ou apenas mostrar quantas visitas já tivemos. Existem varias estatísticas e informações úteis nesses contadores, como por exemplo:
Qual a resolução (tamanho) de tela de nossos visitantes?

Eles usam qual navegador (Internet Explorer, Firefox, Opera...)?
Essas perguntam vão ajudar na hora de modificar o layout ou colocar algumas coisas no blog, quando escrevi esse texto a maioria dos visitantes deste blog usava Internet Explorer e tem uma resolução de tela 1024x768, então devemos deixar o blog da melhor forma possível para esta configuração e não para a do nosso computador, afinal o objetivo de todo blog é agradar seus visitantes e se não é possível deixar ele perfeito em todas as configurações e navegadores, devemos dar prioridade para a maioria..

De qual site eles vieram? Outro blog? Site de busca?
O que pesquisaram para chegar em nosso blog?
Com essas informações podemos melhorar nosso conteúdo, por exemplo, publicando coisas que as pessoas procuram. Ainda podemos saber de quais sites recebemos mais visitas isso pode ser útil na hora de fazer parcerias e outras coisas.

Enfim seja qual for o contador que usar, tente explorar melhor as informações que tem nele e aproveitar da melhor forma possível e certamente acharam muitas coisas interessantes e úteis.

Marcadores: Acessórios, Contador de Visitas, Sites Úteis

Muitas vezes na tentativa de agradar nossos visitantes fazemos coisas que acabam tento o efeito contrario, ou seja, irritamos as pessoas que entram no blog. Então vamos fazer uma pesquisa para saber quais coisas as pessoas não gostam de ver em blogs, deste modo teremos alguma noção daquilo que não devemos fazer.

Então colabore conosco respondendo a pesquisa abaixo, mas não se trata de responder sobre esse blog, mas sobre os blogs em geral que você visita, diga quais os defeitos que mais lhe incomodam.

O que você não gosta num blog?

Posts fúteis

Gifs piscantes

Cores Berrantes

Música ao entrar no blog

Posts muito grandes

Posts muito curtos

Miguês(tdxo bein com vcs)

Excesso de imagens

Erros de Português

Pop up ou mensagem ao entrar no blog



Votar

resultado parcial...

Marcadores: Enquetes, Pesquisa

Algumas pessoas disseram que a palavra layout sumiu do painel do blogspot e não conseguem editar mais seu modelo. Imagino que isso seja uma falha momentânea e logo voltará ao normal. Porém enquanto isso existe alguns meio de chegar até a página layout sem clicar nesse link do painel.

Depois que fizer login entre no seu blog e na barra do blogspot aparece a palavra personalizar, clicando nela vamos para a página layout. Outra maneira de chegar lá é copiando o numero do nosso blog da barra de endereço, ela aparece assim:

http://www.blogger.com/post-create.g?blogID=..............

No lugar dos pontinhos tem um monte de números isso é a identificação do seu blog. Então copie esses números e cole nesse aqui:

http://www.blogger.com/rearrange?blogID=.......

Isso também levará você até a página layout, ou ainda no painel clicando em configurações ou editar postagens aparece uma janela com varias guias e também podemos usar esse caminho.

Seja qual for a maneira utilizada depois que conseguir chegar onde quer pode adicionar a pagina layout aos favoritos do seu blog, então passará a entrar diretamente nela em vez do painel. Essa idéia a pagina nos favoritos também é útil para quem tem vários blogs pode adicionar a pagina de postagem de cada um deles nos favoritos e deste modo vai diretamente para a página de nova postagem do blog que deseja sem ter que passar por nenhuma outra antes.

Marcadores: Erros do Blog