Como alterar o favicon do Blog

Para colocar um Favicon no 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. Veja também nosso video tutorial Colocar Favicon no Blogger - Imagem na Barra de Endereços.

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.

Outro site para hospedagem de icones é o Free Favicon Hosting, afinal é sempre bom ter mais opções. 

Como dividir o cabeçalho do blog em duas partes

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 

Gadget para tradução com imagens das bandeiras

Colocar uma ferramenta de tradução no blog pode ser útil podemos receber visitas de qualquer lugar, 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 designer, adicionar gadget, html/javascript e cole o código abaixo:

<style type="text/css">
<!--
.bandtradu img{padding: 3px;display:inline}
-->
</style>
<script type="text/javascript">
endereco = encodeURIComponent(location.href)
</script>
<div style="text-align: center" class="bandtradu">
<script src="http://www.acessoriosparablogs.com.br/scripts/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 

Mudar template do blog - Designer do modelo

Uma novidade no blogger tem sido muito comentada recentemente é o novo recurso Designer do modelo. Realmente isso torna muito mais simples modificar o blog,colocar imagens de fundo e muitas outras coisas, porém ele tem muitas funções então recomendamos que faça uma coisa por vez.


Primeiro entre no Blogger in Draft, clique em Layout depois em Designer do modelo, você verá a seguinte tela.


Nela já está seleciona da opção Modelos (menu do lado esquerdo) podemos trocar o modelo completo apenas clicando nos template no topo da pagina (Simple, Picture Window, Awesome Inc., Watermark) note sempre aparecerão algumas opções logo abaixo, então poderá selecionar qualquer uma delas.

Agora vamos falar sobre trocar o fundo do blog, clique no menu esquerdo em plano de fundo podemos trocar a cor de tema principal apenas clicando na caixinha (Change the color theme of your blog Go to the Advanced tab to customize colors for specific elements.) Ou num dos temas sugeridos que estão logo abaixo. Outra coisa muito útil é colocar uma imagem de plano de fundo repare que do lado esquerdo de onde mudamos a cor tem uma miniatura da imagem de fundo que estamos usando atualmente se clicar nela verá essa janela onde poderá escolher entre muitas imagens de fundo para o seu blog.


Então é só achar uma que goste clicar sobre ela, depois em concluído e aplicar ao blog (botão no canto direito, parte superior).

Não falamos de todas as opções desta nova pagina por serem coisas demais para um tutorial somente, portanto voltaremos ao assunto da pagina Designer de Modelo outras vezes, mas se explorar e fizer alguns testes sabemos que gostará muito desta novidade do blogger. Como por exemplo, o próximo item layout, ficou muito fácil colocar um blog de 3 colunas, dividir a sediar ou rodapé em duas partes, mas isso já é assunto para uma próxima vez... 

Trocar imagem de fundo no blog - Designer do modelo

Agora o blogger permite enviar imagens de fundo diretamente pela pagina designer do modelo, ficou muito mais simples usar uma imagem de fundo personalizada. Você pode achar ou editar uma imagem para usar como fundo do blog e depois enviar para o blogger sem se preocupar com hospedagem ou endereços de imagens de fundo.

Veja esse video tutorial: Trocar imagem de fundo do seu blog


Faça login no Blogger in Draft, clique em designer, depois em designer do modelo,plano de fundo e clique no link fazer upload da imagem, então é só achar a imagem que desejar uma com background(fundo do blog), depois salvar. E já está pronto, mas veja que temos algumas opções interessantes nesta pagina.

O posicionamento da imagem de fundo ficou muito simples de fazer, isso é o mesmo que posicionar a imagem de fundo, veja na imagem abaixo e escolha o lugar onde a imagem aparecerá no seu blog.

Outra novidade muito legal é escolher se a imagem de fundo se repetirá ou não e também podemos deixar ofundo do blog fixo deixando apenas o conteúdo se mover e a imagem de fundo permanecendo fixa quando usar a barra de rolagem.

Veja como funciona cada uma das opções:
Não dividir em blocos: a imagem aparece apenas uma vez
Bloco: a imagem se repete pela pagina toda
Dividir horizontalmente: ela aparece lado a lado
Dividir verticalmente: aparece uma embaixo da outra

A opção abaixo Rolar com a página faz a imagem do blog acompanhar a barra de rolagem, se desmarcar essa opção a imagem de fundo ficará fixa, somente o conteúdo (postagens, sidebar) irão se mover quando usar a barra de rolagem da pagina.

Vimos essa informação no blog do Blogger, para nós foi um pouco chato afinal faz pouco tempo fizemos um tutorial falando como colocar uma imagem de fundo no blog, o que agora ficou muito mais simples e rápido, mas tudo bem, não poderíamos adivinhar.

Outros tutoriais para ajudar Blogueiros

• Imagem personalizada para o fundo do site/blog
• Imagem para fundo do blog
• Posicionar imagem de fundo
• Imagem fixa de fundo

Mais Opções Fontes no Blogger - Novos Tipos de Letras

Agora o Blogger in Draft (O que é o Blogger Draft? (Blogger em Rascunho)) tem novas fontes para você usar no seu blog, isso para quem já usa os templates novos, mas se não for seu caso você pode usar o Google fontes para adicionar novas fontes no seu blog. Esperamos que em breve esse recurso esteja também disponível no blogger para todos os blogueiros, afinal são poucos que usam o blogger in draft.



Para usar esses novos tipos de letras no seu blog você só precisa entrar em designer,designer do modelo. Na janela seguinte clique em avançado e já poderá escolher as fontes que desejar usar no seu blog. Além disso, nesta pagina existem outras alterações possíveis para fazer no seu template, como por exemplo trocar imagem de fundo no blog.



Após alterar os tipos de letras do seu texto(veja também: Como Formatar o Texto do Blog), títulos das postagens, títulos dos gadgets e tudo mais que desejar só precisa clicar em aplicar ao blog, mas sugerimos fazer isso (salvar) varias vezes ao longo do trabalho, sempre que chegar a um resultado que goste então salve, assim não vai perder caso faça alterações que não lhe agradem posteriormente.