Dicas para Blogs

Começar a modificar o blog

2009-11-11T08:12:00.003-02:00

Vamos começar uma serie de postagens para blogueiros iniciantes, nós sabemos que ao criar o primeiro blog as pessoas têm vontade de mudar tudo do seu novo blog no primeiro dia, mas certamente isso não é possível afinal é preciso aprender a dar os primeiros passos antes de começar a correr. Já publicamos algumas coisas para iniciantes até criamos um marcador para isso em nosso guia rápido, aqui estão algumas delas:

Programas grátis para editar imagens
Onde e como hospedar imagens
Formatar o texto das postagens ou colunas (sidebar)
Criar ou modificar bordas

Mas como já dissemos é preciso começar por algum lugar, então vamos falar sobre trocar a cor de fundo do blog. Quando entrar no painel do blog clique em layout e depois em fontes e cores.

Normalmente nesta pagina basta procurar no menu por cor do plano de fundo da pagina, clicar nele e depois clicar na cor desejada e pronto. Você visualizará a mudança no seu blog que aparece na parte inferior da tela. Esse texto plano de fundo pode variar um pouco pode ser fundo da pagina ou background. Outra coisa se você não gostar das cores que aparece pode colocar o código de outra cor na caixa Editar código de cor hexadecimal, onde na imagem acima aparece ffffff, veja aqui o código hexadecimal das cores.

Se por acaso no seu blog não funcionar entre na janela editar html e procure por body{...} está logo no começo do código, veja se tem algo parecido com isso lá:

body {background-color: #0000FF;
...
...

Caso não tenha pode colocar se já tiver background mais alguma coisa altere para ficar igual o exemplo acima e a cor no final novamente usando código hexadecimal das cores você pode colocar a cor que desejar. Para colocar uma imagem de fundo use esse código:

body {background-color: #0000FF;
background-image: url(endereço da imagem)

Mesmo usando uma imagem é bom colocar a cor, assim caso haja algum problema e a imagem de fundo não aparecer o blog ficará com um fundo numa cor próxima da imagem. Veja mais detalhes sobre imagens de fundo.

Talvez alguns achem essa postagem simples demais, mas devemos lembrar aos mais experientes como foi difícil começar e quantas perguntas simples sofremos tanto para descobrir a resposta.

Dividir o rodapé do blog - Footer

2009-11-07T05:23:00.006-02:00

Dividir o rodapé do blogspot (footer do blog) é mais fácil do que parece, basta trocar algumas linhas de códigos e pronto. Sugerimos que antes de começar entre na pagina layout e remova tudo que tiver no rodapé do blog, você não precisa excluir apenas arrasta para a coluna do blog ou embaixo das postagens, pois em poucos minutos vamos colocá-los no lugar novamente.

Mas para começar a divisão do footer em 3 partes o primeiro passo é entrar na pagina editar html (não clique para expandir o modelo), mas antes de começar é bom fazer um backup do blog para não perder nada no caso de imprevistos. Agora que não corremos mais o risco de estragar nada vamos começar.

Procure por esse trecho no html do seu blog (está quase no final):

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Quando achar apague, tome cuidado para não tirar ou deixar nenhum sinal no inicio ou fim do código e coloque esse no lugar:

<div id='footer-wrapper'>
<div id='footer-column-container'>
<div id='footer-column-left' style='float:left; width: 32%;margin: 2px;'>
<b:section class='footer-column' id='footer2' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-center' style='float:left; width: 32%;margin: 2px'>
<b:section class='footer-column' id='footer3' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-right' style='float:right; width: 32%;'>
<b:section class='footer-column' id='footer4' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div id='footer-bottom'>
<b:section class='footer' id='footer-column-bottom' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div></div>
<div style='clear:both;'/>

E já está tudo pronto, agora é só entrar na pagina layout e arrastar os gadgets para cada uma das colunas do rodapé do seu blog e assim usar melhor o espaço disponível.

Se a parte do rodapé ficar sem cor de fundo podemos colocar esse código:

#footer-wrapper{background-color: #ffff66;border: 1px solid #0000FF}

junto com os outros estilos CSS do blog, isso fica no começo do html. É fácil de achar porque no blog tem muitos códigos parecidos com esse. Para trocar a cor é só mudar o final ffff66, veja aqui o código de outras cores. E as bordas você pode ver nosso tutorial sobre colocar e alterar bordas que tem explicações detalhadas.

Note que neste código que colocamos apareceu 3 vezes width: 32%; isso é a largura de cada uma das colunas no rodapé do blog, portanto altere os valores como desejar, mas claro que a soma das 3 chegar até 100% provalemente uma das colunas passará para linha debaixo, então se tiver esse problema é só reduzir um dos valores (sempre é bom deixar algum espaço sobrando).

Usar Feed como Acessórios

2009-11-04T15:38:00.002-02:00

Já falamos sobre como usar os feeds em algumas postagens, mas faltou reunir varias informações num mesmo lugar, por exemplo: como mostrar quem linkou o blog ou mostrar os comentários recebidos recentemente no blog. Além disso, usar feed é uma ótima maneira de ter conteúdo sempre atualizado automaticamente no seu blog.

Para colocar qualquer feed no seu blog entre na pagina layout, adicionar gadget, feed. Vamos usar como exemplo o feed do nosso blog: http://www.dicasparablogs.com.br/feeds/posts/default

Agora coloque o endereço do feed do site que deseja usar e clique em continuar

Escolha as opções e salve, agora já está pronto.

Isso é a maneira mais fácil de mostrar uma lista das suas postagens mais recentes no blog, mas não é só isso, para mostrar os últimos comentários recebidos use esse endereço:
http://www.dicasparablogs.com.br/feeds/comments/default

O feed para mostrar quais os últimos links recebidos (backlinks) pelo seu blog é:
http://search.blogger.com/blogsearch?q=link:www.dicasparablogs.com.br

Lembramos que colocamos nosso endereço no feed, portanto qualquer um deles precisa ser alterado antes de colocar no seu blog. Cuidado na hora de colocar o endereço, pois precisa ser exato, algumas pessoas colocam www no endereço blogspot, mas na verdade isso não faz parte do endereço, o link padrão do blog é http:///seublog.blogspot.com.

Esses feed ainda servem para mostrar as ultimas noticias, esportes, enfim o conteúdo atualizado de qualquer site que tenha o feed (RSS), por exemplo, se adicionar: http://rss.terra.com.br/0,,EI1,00.xml terá as ultimas noticias do site Terra no seu blog ou as novidades do esporte através da Gazeta Esportiva http://www.gazetaesportiva.net/rss/jogoRapido.xml. Então espero que gostem e aproveitem para colocar novos conteúdos no blog.

Como colocar musica no blog

2009-11-01T20:27:00.002-02:00

Um site que achamos muito fácil de usar para colocar musica no blog é o Goear, basta procurar pela musica que deseja depois copiar o código do player que está na caixinha This song in your site, e colocar no seu blog pela pagina layout, adicionar gadget, html/javascript.

Além disso, se quiser pode fazer um cadastro clicando em Login / Register e depois hospedar (fazer upload) de suas próprias musicas ou qualquer arquivo de som. Isso pode servir até mesmo para colocar sua voz falando algo no seu blog. Tudo isso de maneira muito simples e rápida de fazer.

Video do Youtube

2009-10-30T21:08:00.004-02:00

Colocar qualquer vídeo do Youtube ou algum outro site no seu blog é bem simples de fazer basta copiar o código que está em incorporar como podemos ver na imagem logo abaixo, mas se quiser colocar um link para a pagina use o endereço acima onde está escrito url, então o código fica assim:

<a href="http://www.youtube.com/watch?v=NBQXLNM-tnM" target="_blank">Motoboy – Terça Insana</a>

Voltando ao assunto como colocar um vídeo do Youtube no seu blog se quiser personalizar o modo de exibição (cor e tamanho do player) usado para mostrar o vídeo é só clicar na imagem de engrenagem ao lado do código incorporar e fazer suas escolhas, isto é muito útil para combinar as cores e principalmente por causa do tamanho (espaço) que o vídeo ocupará no blog, deste modo podemos e evitar que a largura do vídeo seja maior que a da coluna onde ele está colocado.

Cópia de segurança

2009-10-26T16:09:00.005-02:00

Quando o assunto são computadores é sempre bom ter uma copia de segurança de nossos arquivos e isso vale também na hora de editar o html do blog. Quando vamos modificar o html sempre corremos o risco de apagar ou colocar algo no lugar errado e não conseguir mais encontrar o erro e acabamos desconfigurando o template inteiro do blog com isso.

Para evitar estragar o layout do blog quando mexemos no html dele vale à pena salvar uma cópia do modelo antes de começar, então na hora que entrar na pagina editar html clique em baixar modelo completo, aparecerá uma janela para inicio do download para você escolher onde salvará o arquivo.

Esse é um trabalho simples e rápido, depois que fizer isso pode alterar seu html tranquilamente, pois em caso de problemas será só enviar o arquivo que baixou clicando no botão enviar arquivo, achando o arquivo do template e depois clique em upload e seu blog voltará ao que era no inicio.

Já que estamos no assunto copias de segurança, pense também nos arquivos que tem no seu computador: fotos, textos, musicas e tantas outras coisas é muito recomendáveis salvar um copia delas em um CD, DVD, ou qualquer outra forma de armazenamento, pois nunca sabemos quando vamos pegar um vírus ou ter problemas no computador e ter essas cópias de segurança evitam muitas perdas de tempo e às vezes dinheiro.

Barra do blogspot transparente

2009-10-23T20:36:00.005-02:00

O blogger criou a opção de usar a barra padrão do blogspot com fundo transparente, para isso colocou a disposição duas versões: uma para blogs que usam fundo claro e outra para blogs escuros.
Entre na pagina layout e clique para editar a barra do blogspot e verá essas novas opções:

Gostei muito da novidade no blog porque permite mostrar a textura por baixo da barra que uso como plano de fundo em meu outro blog Frases Curtas. Além disso, agora tem a opção seguir e compartilhar incluídas na barra padrão. E também uma busca dentro do próprio blog. Talvez isso tudo faça que algumas das pessoas que até optaram por ocultar a barra padrão do blogger passaram a exibi-la nos seus blogs. Se no seu blog a barra estiver oculta e quiser mostra-la é só entrar no link para ver o código que não deixa a barra aparecer, depois entre na pagina editar html, procure e apague esse código.

A imagem acima é um exemplo de textura por baixo de uma barra semi transparente da cor clara, usamos o blog Frases Curtas para testar essas opções de barra do blogspot.

Colocar botão retweet no blog

2009-10-21T15:19:00.008-02:00

Colocar um botão Retweet no seu blog é bem simples e pode ajuda na divulgação do seu blog trazendo mais visitas e melhorando sua posição em resultados de pesquisas e nas redes sociais, para colocar o Retweet no blog é praticamente do mesmo jeito que colocar links para redes sociais.

Entre na pagina editar html, clique para expandir o modelo, e procure por esse trecho <data:post.body/> e coloque esse código logo depois:

<div style='float:right;margin-right:10px'>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script type='text/javascript' src='http://tweetmeme.com/i/scripts/button.js'> </script>
</div>

A linha <div style=”float:right;margin-right:10px”> faz que o botão fique no canto direito se quiser do lado esquerdo é só trocar duas palavras right por left. O valor 10px é a distancia da margem da postagem pode alterar como desejar. Se quiser deixar o botão centralizado troque float:right;margin-right:10px por text-align: center.

Colocar mural de recados ou chat no blog

2009-10-17T11:12:00.004-03:00

Veja como é fácil colocar um mural de recados ou chat no seu blog, isso pode servir como uma forma de manter contato mais direto com seus leitores ou ainda como uma sala de bate papo no blog, afinal como todos podem ler os recados poderão conversar uns com os outros. Além disso, se não quiser deixar o mural no blog para que não demore para carregar o site cria automaticamente uma pagina individual para o seu mural.

O primeiro passo é entrar no site http://www.cbox.ws, clicar para criar uma conta (sign up), se já tiver cadastro é só fazer login. Para fazer o cadastro escolha bem o que vai digitar na primeira linha no campo Cbox name, porque esse será o endereço do seu mural de recados se quiser usar separadamente do blog.

Após fazer um cadastro simples verá uma mensagem dizendo que foram enviados alguns detalhes sobre seu cadastro para o email que usou e já está pronto. Agora é só fazer login e pegar o código do seu mural de recados, clique em Publish! e verá essa tela:

Nela você pode escolher se colocará o mural aparecendo no blog ou como um link para um pop up (janelinha com o mural, como em alguns blogs usam os comentários) para isso marque a opção Popup Cbox que está sobre a caixa do código. Depois é só copiar o código e colocar no blog pela pagina layout, adicionar gadget, html/javascript.

Mas ainda na pagina onde pegou o código do mural veja no final daquela pagina Remember that you..... na linha abaixo tem o link da pagina do mural, ou seja, se quiser pode criar um link para esse endereço como se fosse para qualquer outra pagina na internet e assim usar o mural em uma pagina individual separadamente do blog.

Agora que já está tudo instalado e funcionando se quiser pode navegar no site Cbox e certamente achará muitas opções interessantes para personalizar esse mural de recados que acabamos de criar. Por exemplo, clicando em LooK & Feel >> Style Gallery poderá achar vários modelos só precisa clicar sobre um deles e confirmar (botão aparece sobre o modelo). Outra coisa interessante é entrar em Options >> Posting opitions, lá você poderá definir se permite ou não as pessoas deixarem seus links, o tamanho maximo da mensagem e outras coisas. Enfim quando mais mexer no site mais coisas poderá encontrar para incrementar seu blog.

Mostrar resumo da postagem

2009-10-13T15:52:00.008-03:00

O Blogger colocou a opção leia mais na sua pagina de postagem, entre nas configurações do seu blog e veja no final da pagina selecionar editor de postagem, selecione a primeira opção (Editor atualizado) e clique para salvar.

Agora vamos fazer uma nova postagem, na pagina onde escreve seu texto clique na guia escrever e note essa ferramenta que destacamos na imagem

Clique na parte do seu texto que deseja colocar o leia mais e depois clique na ferramenta destacada acima. Depois pode publicar o seu texto, mas ainda não está pronto, ainda não será possivel ver funcionando.
Vamos até a pagina editar html, clique para expandir o modelo e procure por:
<div style='clear: both;'/>
</div>

e coloque isso logo depois:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Veja o texto Completo</a>
</div>
</b:if>

o trecho ficará assim:

Agora é só clicar para salvar as alterações e visualizar o blog que aparecerá a frase veja o texto completo no final da postagem que acabamos de fazer. Lembramos que esse procedimento feito na pagina editar html só é necessário na primeira vez, nos próximos textos que publicar basta clicar na ferramenta na pagina de postagens e escolher o lugar onde aparecerá essa frase. E naturalmente você pode escrever o que quiser no lugar onde colocamos veja o texto completo.

Fonte: Blogging Tutorial, Free Templates and Sites Info

Conteúdo e acessórios para blogs

2009-10-12T00:19:00.006-03:00

Onde achar coisas legais e interessantes para colocar no blog, quais são os melhores acessórios para colocar no blog e também como incrementar o visual do blog, recebemos essas e outras perguntas semelhantes com freqüência e respondemos da mesma maneira o melhor modo de encontrar coisas para seu blog é visitando outros blogs, assim verá contadores, relógios, previsão do tempo, mural de recados e muitas outras coisas. Se clicar sobre a maioria dessas ferramentas encontrará como coloca-las no seu blog também.

Porém isso não quer dizer para colocar tudo aquilo que ver por ai no seu blog, lembre-se que nem todas as pessoas ficarão esperando seu blog carregar (aparecer) porque tem coisas demais nele. Uma coisa que devemos fazer é excluir todo o histórico de internet e depois entrar em nosso blog para ver o real tempo que ele demora, pois sabemos que quando visitamos mais de uma vez o mesmo site o computador usa o histórico fazendo que do segundo acesso em diante o site apareça mais rápido. Isso acaba nos dando a ilusão que o nosso blog não demora para carregar.

Outro ponto precisa ser esclarecido quando dizemos para encontrar coisas em outros blogs não queremos dizer para fazer um blog igual ao de ninguém, mas apenas achar um ou outro acessório interessante e não copiar um modelo completo.

Uma maneira bem fácil de ter um conteúdo sempre atualizado e diferente é adicionar feeds de outros sites como, por exemplo, noticias esportes, fofocas, piadas e muitas outras coisas. Inclusive se quiser adicionar nossas dicas no seu blog o endereço do nosso feed é http://www.dicasparablogs.com.br/atom.xml

Gadget para tradução com imagens das bandeiras

2009-10-07T15:58:00.003-03:00

Colocar uma ferramenta de tradução no blog pode ser útil afinal nunca sabemos de onde viram nossos visitantes, já publicamos anteriormente um código para traduzir o blog, mas algumas pessoas tiveram dificuldades para alterar o código e colocar as imagens das bandeiras nele. Então estamos fazendo essa nova versão já com as bandeiras.

Para colocar esse novo tradutor de sites no seu blog entre na pagina layout, adicionar gadget, html/javascript e cole o código abaixo:

<style type="text/css">

</style>
<script type="text/javascript">
endereco = encodeURIComponent(location.href)
</script>
<div style="text-align: center" class="bandtradu">
<script src="http://www.acessoriosparablogs.com.br/tradutor.js" type="text/javascript"></script></div>

Depois é só clicar para salvar e fazer o teste. Se quiser pode alterar a distancia entre as bandeiras modificando o valor padding: 3px. Esse código usa o site de tradução de textos e paginas do Google.

Veja também:

Perfil com acesso restrito
O que não fazer no blog
Publicidade no blog
Deixar o visitante alterar cor de fundo
Contador de visitas
Aparência da caixinha link-me

Como dividir o cabeçalho do blog em duas partes

2009-10-04T06:47:00.003-03:00

Já recebemos alguns pedidos e agora vamos mostrar como fazer para dividir o cabeçalho do blog em duas partes, assim podemos colocar mais alguma coisa ao lado do titulo do blog em vez de ter que usar alguma imagem gigantesca para ocupar espaço.

Esse procedimento é simples, mas leia essa explicação até o final antes de começar, pois será necessário fazer algumas alterações no código antes de colocar no seu blog, entre na pagina editar html e procure por:

<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Frases Curtas (Cabeçalho)' type='Header'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>

Depois substitua por:

<div id='header-wrapper'>
<div id='header-column-container'>
<div id='header2' style='width: 74%; float: left; margin:0; '>
<b:section class='header-column' id='header-column-left' preferred='yes' style='float:left;'>
<b:widget id='Header1' locked='true' title='Frases Curtas (Cabeçalho)' type='Header'/>
</b:section>
</div>
<div id='header3' style='width: 25%; float: right; margin:0; '>
<b:section class='header-column' id='header-column-right' preferred='yes' style='float:right;'>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div style='clear:both;'/>
<div id='header-bottom'>
<b:section class='header' id='header-column-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div></div>

Como já dissemos antes modificar qualquer coisa no seu blog repare nas linhas que estão em negrito no código, no seu blog elas serão parecidas com essas não exatamente iguais e dependendo podem ter até mais do que duas linhas desse tipo, então você precisa copiá-las e substituí-las neste código antes de colocar no seu blog.

Você pode notar que a parte onde está a linha <b:widget id='Header1' locked='true' title='Frases Curtas (Cabeçalho)' type='Header'/> é a parte mais larga do cabeçalho(74%) e a outra <b:widget id='HTML7' locked='false' title='' type='HTML'/> na segunda parte que tem 25%, então coloque que estão neste trecho no seu blog como desejar e depois será fácil mudá-las de lugar pela pagina layout somente arrastando como qualquer outro gadget.

Para alterar as larguras ou lado das colunas do cabeçalho é só modificar essas partes do código:

width: 25%; float: right;
width: 74%; float: left;

Você notou que a soma dos valores não chega a 100% isso é para evitar que em alguns navegadores uma coluna fique embaixo da outra devido à falta de espaço. E para trocar as colunas de lado só precisa mudar de lugar as palavras left e right nos códigos. Espero que essa dica seja muito útil e ajude a melhorar o visual do blog.

Veja outras dicas:

Lista de links ou banners em ordem aleatória
Usando o Twitter
Melhorando a aparência dos marcadores
Links para traduzir o blog
Editar fotos online

Mostrar assuntos relacionados no blog

2009-10-02T13:53:00.007-03:00

Mostrar as postagens relacionadas com uma miniatura da imagem, isso é no final de cada um de seus textos aparece o link de alguns outros textos do seu blog com uma imagem, isso é muito útil para gerar trafego entre suas paginas, pois mantêm as pessoas mais tempo no seu blog e isso faz melhorar sua classificação nos sites de busca. Podendo até gerar mais visitas.

É muito fácil de fazer usando o site LinkWithin você só precisa digitar o seu email, endereço do seu blog, escolher a plataforma (sugerimos escolher a opção Other e não a opção Blogger) assim poderá pegar o código em vez de adicionar diretamente no blog, isso é útil, pois dependendo do seu template se usar a opção blog poderá ter alguns problemas como aparecer um gadget vazio, mas se quiser fazer o teste usando a opção blog pode dar certo. e o numero de links que mostrará(Width:). Caso seu blog tenha um fundo escuro e letras claras marque a opção My blog has light text on a dark background, depois é só clicar em Get Widget e copiar o código para colocar no seu blog.

Agora que já copiamos o código para mostrar os assuntos relacionados no Blogger entre na pagina editar html, clique para expandir o modelo e procure por:

<data:post.body/>

Quando encontrar coloque o código que copiou exatamente abaixo dessa linha, clique para visualizar e se estiver tudo certo é só salvar e já está pronto. Agora seu blog mostra o link de algumas postagens com miniaturas no final de cada um dos textos. Se você achar que esses links ficaram muito juntos com sua postagem ou dos comentários pode colocar <br/> antes e depois do código, isso faz deixar uma linha em branco, pode repetir quantas vezes quiser, ou seja, cada <br/> é uma linha em branco.

Para fazer esse tutorial instalei LinkWithin no blog Frases Curtas.

Leia também:

Criar enquetes
Colocar bordas nas imagens
Problemas com os comentários
Criar uma separação entre as postagens

Personalizar título do blog

2009-09-29T14:43:00.005-03:00

Talvez você já notou que alguns blogs inclusive esse quando entra nas paginas individuais das postagens o titulo da postagem aparece antes do nome do blog. Fazer essa alteração ajuda os mecanismos de busca localizar suas postagens e com isso aumentar o numero de visitas.

Normalmente na barra do navegador aparece assim: nome do blog – nome da postagem, depois que inserir esse código aparecerá nome da postagem – nome do blog. Agora vamos começar, entre na pagina editar html e procure por:

<title><data:blog.pageTitle/></title>

Apague essa linha e coloque isso no lugar:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/><title><data:blog.pageTitle/></title>
</b:if>

Salve e visualize seu blog, depois clique para ver somente uma postagem e notará que o nome da postagem trocou de lugar com o nome do blog. Em pouco tempo essa alteração também aparecerá também quando seu blog aparecer entre os resultados das pesquisas do Google.

Fonte: Blogging Tutorial, Free Templates and Sites Info

Veja também:

Endereço .com.br no blogspot
Erros comuns nos códigos
Colocar ou tirar bordas das imagens
Resolver problemas com o comentários
Criar enquete no blog

Como alterar o favicon do Blog

2009-09-27T03:27:00.007-03:00

Para colocar um Favicon no seu blog, ou seja, a imagem que fica na barra de endereços ao lado da url do seu blog, precisamos criar e hospedar uma imagem e depois colocar um código no html do blog. Mas vamos explicar por partes e você verá que é fácil de fazer.

Primeiro crie ou encontre uma imagem que gostaria de usar na barra de endereços, ela deve ser quadrada, lembre-se que a imagem ficará bem reduzida (16 x 16 pixels), portanto não adianta usar uma cheia de detalhes pequenos. Aconselhamos já salvar a imagem neste tamanho 16x16px para depois enviar para os sites de hospedagem e conversão para o formato ícone.

Depois que tiver a imagem pronta entre no site Free Online Icon Editor nele é possível desenhar seu ícone se quiser (para aqueles que são bons em pixelart), mas se for fazer selecione o tamanho 16 x 16. Mas viemos aqui principalmente para mostrar como converter sua imagem de qualquer formato (gif, jpg, png) em um ícone, ou seja, formato .ico, clique em enviar arquivo, encontre sua imagem, deixe selecionado 16x16(favicon) e clique em upload.

Agora clique no botão save icon e escolha um lugar para salvar o ícone no seu computador. Essa parte já está pronta, agora vamos hospedar o favicon (colocar a imagem do ícone na internet).

Vamos até o site Image Boo Hosting clique no botão enviar arquivo e localize o ícone, envie também a imagem original (que usou para converter no outro site para o formato ícone), deixe selecionado Public em upload type e clique em start uploading. Agora copie o código da ultima linha (Direct) das duas imagens que enviamos.

Até o momento já temos nosso ícone criado e hospedado na internet, agora só falta colocar no blog. Entre na pagina layout > editar html e procure por </head>, antes dessa linha coloque o código abaixo substituindo os endereços das imagens que você acabou de hospedar.

<link href='imagem formato icone' rel='shortcut icon'/>
<link href='imagem original' rel='shortcut icon' type='image/png'/>

No final da segunda linha troque png pelo formato da imagem original gif, jpg, se achar mais fácil poderia fazer isso já com uma imagem png desde o inicio. Clique para salvar e já está tudo pronto o resultado final é esse:

Fizemos e testamos esse tutorial no Firefox e Internet Explorer que são os navegadores mais utilizados atualmente.

Mostrar backlinks - links recebidos

2009-09-24T16:34:00.004-03:00

Para mostrar no seu blog uma lista dos backlinks, ou seja, o endereço dos blogs que recentemente criaram um link para o seu blog, você deve usar esse endereço:

http://search.blogger.com/blogsearch?q=link:www.dicasparablogs.com.br

Substituindo o endereço do nosso blog pelo seu, mas preste atenção o blogspot não tem www, esse nosso endereço tem porque registramos um domínio, o endereço padrão do blogger é http://seublog.blogspot.com. Essa busca pelos últimos links recebidos pelo blog funciona exatamente para o endereço que digitar, então é necessário ser exato.

Agora entre na pagina layout, clique para adicionar um gadget, escolha a opção Feed

Coloque o endereço já modificado para o seu blog, clique em continuar e escolha as opções de quantos links mostrará e se vai ou não exibir a data e as fontes/autores do item.

Não se esqueça de trocar o titulo do gadget, pois normalmente ele aparece mais ou menos assim: link:www.dicasparablogs.com.br – Pesquisa de blogs do Google e certamente escrever backlinks, links recebidos ou algo do tipo é muito mais simpático. Depois disso é só clicar para salvar e pronto.

Isso pode ser útil como um acessório a mais no seu blog mas também serve como incentivo para que outras pessoas criem links para o seu blog e apareçam nesta lista, ou seja funciona como um meio de divulgação do blog podendo atrair mais links e visitas.

Se tiver duvidas sobre o funcionamento do código pode fazer o teste visitando a pagina Pesquisa Google de Blogs e digitando o endereço do blog. Infelizmente em alguns caso como blogs novos parece não haver links apontando para eles ainda.

Veja também:

Google Analytics
Formulário em PHP
Perfil com acesso restrito
O que não fazer ou colocar no blog
Anúncios no blog
Deixar o visitante escolher a cor de fundo do blog
Contador de visitas online

Como dividir a sidebar em duas

2009-09-22T16:06:00.007-03:00

Em vez de colocar 3 colunas no blog (um menu de cada lado das postagens) uma opção bem interessante é dividir a sidebar em duas colunas, isso deixar a sidebar (menu do blog) largo no começo e a partir do ponto que desejar ele se divide em duas colunas, com na imagem abaixo:

Para fazer isso no seu blog entre na pagina editar HTML, antes de começar salve uma cópia do seu template (baixar modelo completo) assim poderá facilmente voltar ao modelo atual se tiver algum problema. Usamos o template Mínima do Blogger para fazer essa explicação, procure por:
#sidebar-wrapper {
width: 220px;......}

ou somente #sidebar {....

Logo abaixo desse trecho coloque:

#sidebar-wrapper-doble {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#columna-izda {
width: 48%;
float: left;
}
#columna-dcha {
width: 48%;
float: right;
}

Depois disso procure por
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>

O trecho em negrito são os gadgets que tem no seu blog, portanto no seu blog deverá ter varias linhas parecidas com essa, elas não interferem em nada essa modificação é apenas o conteúdo da sua sidebar. O importante é colocar o código abaixo entre </b:section> e </div>

<div id='sidebar-wrapper-doble'>
<b:section class='sidebar' id='columna-izda' showaddelement='yes'>
</b:section>
<b:section class='sidebar' id='columna-dcha' showaddelement='yes'>
</b:section>
<div style='clear: both;'/>
</div>

Salve e depois entre na pagina layout e arraste os gadgets para essas novas sub colunas (coluna dividida em dois), você deve visualizar ela mais ou menos assim:

Para ficar melhor podemos aumentar a largura total do blog, volte a pagina editar html e procure por:
#header-wrapper {
width:660px;.........
#outer-wrapper {
width: 660px;............
#footer {
width:660px;............

E troque esses três valores 660px por 980px, depois note que nos trechos acima onde modificamos a sidebar tem o valor 220px, ele aparece duas vezes então modifique os dois para 460 e visualize seu blog, acho que agora ficou com uma aparência bem melhor com essas novas larguras pra as colunas.
Fonte: El Escaparate de Rosa

Veja também:

Ajustar as larguras do blog e das colunas
Efeitos em links
Lista de banner ou links em ordem aleatória
Usar o Twitter
Melhorar os marcadores
Ferramenta de tradução no blog

Fazer uma apresentação de slides no blog

2009-09-20T07:13:00.003-03:00

Criar uma apresentação de slides no blog existem varias maneiras uma delas é fazer um álbum de fotos no http://www.flickr.com, se não tiver uma conta no site crie é grátis. Depois que enviar todas as imagens que desejar usar no seu slide show no blog para o Flickr, veja que na pagina inicial dele tem um link “sua galeria”, no caso da nossa que criamos para demonstrar neste tutorial sobre como colocar uma apresentação de slides no blog o endereço é http://www.flickr.com/photos/14971067@N02/, isso é importante, pois será pedido no blogger na hora de criar os slides.

Agora entre no Blogger na pagina layout, clique em adicionar gadget e procure a opção apresentação de slides. Na próxima tela vamos criar nossa apresentação veja na imagem abaixo, como preencher os campos principais:

Coloque o titulo que desejar, depois em origem selecione a Flickr, opção marque usuário. Agora vem uma parte importante nome de usuario aqui vai o endereço do seu algum no Flickr em nosso caso é 14971067@N02/. Após isso defina a velocidade, mais algumas opções são abrir os link em nova janela (aconselhamos marcar) e posicionar imagens aleatoriamente.

Você poderá visualizar sua apresentação de slides enquanto modifica as opções depois que terminar é só salvar. Outro detalhe interessante é se você já tiver vários álbuns no Flickr pode fazer uma apresentação usando somente um deles, por exemplo, criamos um álbum com algumas fotos de animais, o endereço é http://www.flickr.com/photos/14971067@N02/sets/72157622406994126/ se fossemos usar somente essas imagens nos slides colocaríamos o nome de usuario assim: 14971067@N02/sets/72157622406994126/ essa é uma maneira de usar somente uma parte das imagens que você já tem nos seus álbuns de fotos no Flickr.

Leia também:

Fundo semi transparente
Personalizar Gadget - barra de rolagem
Colocar imagens no título das postagens
Gerador de Tags
Configurar domínio no Uolhost
Artigos relacionados

Personalizar Caixinha link-me

2009-09-18T13:43:00.004-03:00

É possível dar uma nova aparência(formatar) a caixinha link-me retirando a barra de rolagem ou alterando suas bordas, isso tudo é fácil para fazer basta colocar um estilo (style) no código do textarea, esse é o nome correto da caixinha link-me. O código para fazer isso é:

<textarea style="overflow:hidden; border:1px dashed #0000FF; background:#FFFFCC; width:100px; height:40px"onfocus="this.select()" onmouseover="this.focus()">Conteudo da caixinha</textarea>

Quem já sabe um pouco de CSS já notou que a única coisa diferente é que aplicamos os mesmos recursos usados na formatação de uma pagina, texto ou botão no código da caixinha link-me, veja que o faz cada parte do código:

overflow:hidden – oculta a barra de rolagem
border:1px dashed #0000FF - estilo e cor da borda, veja aqui como usar outros tipos de bordas.
background:#FFFFCC – cor de fundo, veja o código de outras cores.
width:100px; height:40px – largura(100) e altura(40) da caixinha.

Depois que terminar de formatar para deixar com uma aparência que combine com o seu blog é só colocar do mesmo jeito que qualquer outra pela pagina layout, adicionar gadget, html/javascript. Se você usa varias caixas de texto desse tipo no blog e quiser mudar a aparência de todas elas também é possível e muito simples de fazer. Entre na pagina editar html e procure por body{.....} logo depois que fechar as chaves do body coloque isso:

textarea {overflow:hidden; border:1px dashed #0000FF; background:#FFFFCC; width:100px; height:40px}

Fazer alterações aqui é da mesma forma que mostramos acima para uma caixinha individualmente, mas aqui as mudanças que fizer serão aplicadas a todas as caixas de texto (textarea) do seu blog. Note que o inicio do código é textarea não tem ponto nem qualquer outro sinal antes da palavra.

Veja também:

Caixinha com o link da postagem
Fazer galeria de fotos
Registrar domínio (blog com endereço .com.br)
Configurar o domínio no Uolhost
Gerador de tags
Imagem no título das postagens
Modificar gadgets separadamente

Como e onde editar fotos online

2009-09-16T02:23:00.004-03:00

Já publicamos uma lista com programas grátis para editar imagens e fotos, mas também é possível modificar as fotos ou imagens diretamente pela internet sem precisar baixar nada e gratuitamente. Veja alguns sites onde você pode modificar suas fotos com apenas alguns cliques:

http://www.change-images.com
Na pagina inicial tem um menu que algumas opções que são muito simples de usar, por exemplo:
Resize Images: modificar o tamanho da foto
Convert Images: converte para outros formatos de arquivo (gif, jpg, png, ico, pdf e outros)
Photo Frames: coloca vários estilos de molduras nas imagens.

http://www.photofunia.com
Esse também é muito fácil de mexer e serve para se divertir com as imagens principalmente para dar alguns efeitos especiais no seu álbum de fotos no Orkut. Entre outras coisas tem a possibilidade de transformar sua foto numa parece, ou aparecer na íris do olho, ou ainda o site faz uma montagem para sua imagem parecer estar numa galeria, até em forma de vestido... enfim gostei muito da diversidade de efeitos. São interessantes para postagens de blogs, mas acho que as pessoas que gostam de fotos e Orkut acharam muito mais legais.

http://www.pizap.com
Já falei desse site uma vez, mas vale à pena repetir, ele permite fazer modificações na sua foto colocando outros olhos, cabelo, boca e tudo mais. É possível escrever sobre as fotos, colocar aqueles bolões de texto ou pensamentos igual das revistas em quadrinhos. Adicionar alguns efeitos e até pintar sobre a imagem.

Espero que gostem e se divirtam com esses sites, embora sejam para editar fotos e não fazer templates, banners e outras coisas para blogs são bem interessantes e sempre podemos aproveitar algumas coisas onde menos esperamos... Se preferir veja uma lista de programas gratuitos para fazer alterações e criar suas imagens.

Sites indicados por pessoas que visitam esse blog:

Photoshop Online
PicNik

Separação entre as postagens do blog

2009-09-13T14:28:00.002-03:00

Uma coisa fácil de fazer e que melhora muito a aparência do blog é colocar uma separação bem defina entre as postagens. Você já reparou que alguns blogs fica difícil ver claramente onde é o inicio e o final de cada postagem? Então vamos dar um espaço entre as postagens e colocar uma linha para separá-las melhor.
Entre na pagina editar html e procure por .post{....} se não encontrar coloque:

.post{padding-bottom:5px; border-bottom: 2px dashed #990000; margin-bottom:30px}

Mas se encontrar apague ou altere os valores, veja o que faz cada parte desse código:
padding-bottom:5px
margem entre a linha tracejada (borda) e o final da postagem ou comentários

border-bottom: 2px dashed #990000
estilo, cor e espessura da borda, vejam aqui como alterar as bordas

margin-bottom:30px
margem depois da borda, esse é o espaço que ficará vazio entre uma postagem e outra.

Porém se já tiver algo no seu html igual a isso ou seja .post{...} veja se dentro dele já tem alguns desses valores definidos border, margin e padding, se tiver pode só alterar ou inserir os valores que mostramos acima separadamente. Depois clique para visualizar o blog e se ficou do jeito que você queria clique para salvar as alterações.

Agora já está tudo pronto o seu blog tem uma melhor separação entre as postagens, assim ninguém ficará perdido procurando onde começa ou termina cada um dos textos do seu blog.

Veja também:
Código das Cores
Deixar o visitante escolher a cor de fundo do blog
Anúncios no blog
O que não fazer ou colocar no seu blog
Acesso negado ao perfil blogger
Imagem na barra de endereços
Botões fixos no canto da pagina

Criar uma enquete no blog

2009-09-11T14:37:00.004-03:00

Um dos melhores jeitos de saber o que as pessoas procuram ou gostariam de ver em um blog ou na internet é através de pesquisas, o próprio blogger tem essa função, basta entrar na pagina layout, adicionar gadget e encontrar a opção enquete e preencher os dados da sua pesquisa.

Ou então podemos criar nossa pesquisa em sites fora do blogspot como, por exemplo, no site http://www.enquetes.com.br, ele tem mais opções que as pesquisas criadas diretamente no blog e também é muito fácil de usar, ao entrar no site você verá um link: clique aqui e faça já a sua! Quando clicar precisará fazer um cadastro (é gratuito). Mas é simples, forneça o endereço do seu site ou blog no cadastro, será útil depois.

Após terminar o cadastro vamos criar a enquete, preencha os campos com sua pergunta, opções e selecione uma categoria.

Quando clicar para avançar (próximo passo) irá fazer algumas configurações da sua pesquisa as principais opções em nossa opinião são:

Exibir seus dados como "criador" da enquete, isso faz aparecer na pagina de votação e resultados da pesquisa um link (criador da enquete) com seu site e email por isso dissemos no começo para colocar o endereço do seu blog no cadastro.

Controle avançado de duplicidade de votos: isso impede que uma pessoa vote diversas vezes seguidas na mesma enquete, após votar o site bloquear o IP por aproximadamente 7 minutos.

Permitir que os visitantes criem comentários sobre a sua enquete se quiser que as pessoas comentem sobre a enquete marque essa opção.

Enquete temporária e/ou limitada: se marcar essa opção a enquete terá um dia para terminar, isso é uma questão de gosto pessoal se você quer ou não um prazo final para votar na sua pesquisa.

Comportamento da enquete: aqui define se é permitido votar em somente uma ou mais opções da pesquisa.

Forma de exibição dos resultados parciais da enquete: como o próprio nome diz é a forma que os resultados serão exibidos, nós sempre usamos a opção: Automático: exibe o número de votos após 20 votos computados.

Agora clique em salvar e na tela seguinte tem varias opções entre elas ver a enquete e instruções sobre como instalar a enquete em seu website

Você verá varias jeito de utilizar sua enquete para colocar no menu do seu blog copie o código da Opção 2 - formulário com a enquete e recursos Java depois entre na pagina layout do seu blog, clique em adicionar gadget, html/javascript e cole o código. Agora o seu blog já tem uma pesquisa de opinião que você pode controlar muito melhor do que as pesquisas geradas pelo próprio blogger.

Trocar o cursor do mouse por uma imagem

2009-09-08T00:37:00.005-03:00

Muita gente procura como mudar ou trocar o cursor do mouse por uma imagem, encontramos um jeito bem fácil de fazer isso. Usando os cursores que o site Totally Free Cursors oferece, e como o próprio nome diz são grátis.

Você só precisa entrar no site e escolher qual imagem quer usar no lugar do cursor do mouse, veja que no menu tem muitas opções, quando achar uma que goste, clique sobre ela, então vai aparecer uma pagina com o código desse cursor, onde além de pegar o código poderá visualizar o cursor em funcionamento.

A pagina diz MySpace Codes, mas testei e funcionou perfeitamente aqui no blogspot e apareceu a imagem em vez do ponteiro do mouse, apenas quando passar o mouse sobre vídeos e alguns anúncios o cursor volta ao modelo padrão, mas na maior parte fica com a imagem que escolheu.

Então copie esse código e coloque no seu blog pela pagina layout, adicionar gadget, html/javascript e cole o código que pegou no site. Não importa o lugar da pagina que ficará isso ele funcionará normalmente.

Veja também como colocar uma imagem seguindo o ponteiro do mouse.

Contador de visitas para blog

2009-09-06T00:38:00.008-03:00

Coloque no seu blog um contador de visitas online que ainda mostra nas estatísticas o total de visitantes, países de origem, sistema operacional e navegador utilizado. Além disso, esse contador de visitas pode ser facilmente personalizado com as cores que desejar para ficar com o jeito do seu blog.

Entre no site TrendCounter e clique no botão Get your own Counter

Então é só escolher as cores clicando nos quadrinhos que estão em branco e preto aguardar alguns segundos e ver como ficou o contador na imagem logo abaixo (preview).

Quando chegar num estilo que gostar clique em create counter-code, copie o código e coloque no seu blog pela pagina layout, adicionar gadget, html/javascript.

Outra coisa interessante que podemos dizer é que mesmo após colocar o contador no seu blog é possível editá-lo, trocar suas cores sem perder o histórico do contador. Para modificar o contador após instalar-lo primeiro copie o código do contador que colocou no seu blog, depois entre no site do TrendCounter, no menu clique na opção Adjust Widget
Iamgem

Na tela seguinte você verá Adjust Widget, Your current HTML-Code: então coloque o código do seu contador atual neste campo de texto e clique em submit form. Agora é só escolher as novas cores ou aparência, clicar em create counter-code, pegar o código e colocar no blog novamente igual fez da primeira vez.

Veja também

Contadores de visitas grátis
Quem está visitando o blog agora?
Contador de visitas invisível