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.

Veja também a novidade do blogger(junho/2011) que agora permite enviar o favicon diretamente na pagina design: Como Colocar Favicon no Blogger

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 (recentemente esse site apresentou problemas, então sugerimos que veja aqui outra opção para colocar favicon no seu blog:Converter imagem jpg ou gif em ícone (.ico)) 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. 

Imagem personalizada para o fundo do site/blog

Com a pagina designer de modelo o blogger tem muitas imagens de fundo prontas para serem instaladas no blog com apenas um clique do mouse, porém ainda é possível que você queira colocar sua própria imagem de fundo no seu blog, então vamos ver como colocar uma imagem de fundo personalizada no blog.


O primeiro passo é ter essa imagem que iremos usar em nosso computador depois disso vamos hospedar a imagem para isso sugerimos o site Imageshack, após enviar a imagem copie o endereço dele, isso aparece em direct link, se tiver duvidas veja aqui como saber se está usando o endereço certo da imagem porque a maioria dos problemas na hora de trocar o fundo do blog é endereço errado de imagem.

Depois disso vamos entrar na pagina do blogger >> designer >> editar html, aqui vamos procurar por body{...} isso é o responsável pelo fundo da pagina(blog), ele deve ser mais ou menos assim:

body {background-color: #66ccff;
margin: 0;border: 0;
text-align:center;color: #333333}

body {
text-align:center;
color:#cc0000;
background:#fff url(endereço da imagem) repeat top right;
font-family:arial,verdana,helvetica,tahoma,Sans-serif;
font-size:100%;

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;

Não tenho como dizer exatamente como é, pois isso irá variar conforme o modelo de template que você usa, mas o importante é achar body e dentro dele background. Agora você deve apagar a linha background que está em destaque nos exemplos e trocar por isso aqui, claro que usando o endereço da imagem que enviou para o Imageshack.

background-image: url(endereço da imagem);

O restante você não deve modificar somente o trecho background, se quiser pode ver aqui como deixar a imagem de fundo fixa, isso faz que ao rolar a pagina o fundo não se mova, ou ainda como posicionar a imagem de fundo, isso é muito útil no caso de usar imagens pequenas e sem repetição.

Após publicamos esse tutorial o blogger fez alterações e agora permite enviar as imagens de fundo diretamente pela pagina designer do modelo, veja mais detalhado:Trocar imagem de fundo no blog - Designer do modelo. 

Como Fazer um Blog

Os primeiros passos para criar um blog são bem simples e rápidos de fazer, embora sempre apareçam algumas duvidas como, por exemplo, qual o melhor lugar para criar um blog ou se precisa pagar alguma coisa para fazer um blog.

Para começar o seu blog sugerimos usar o site Blogger, muitos chamam de blogspot por causa do endereço dos blogs criados nele, mas na verdade é o mesmo site. Outro site muito usado por blogueiros é o Wordpress, mas vamos mostrar hoje como fazer seu blog usando o Blogger, então entre no site e clique em criar blog

Na próxima tela será necessário criar uma conta Google (isso também é grátis), se você já tiver Orkut ou Gmail é só clicar no link acesse-a primeiro e fazer login com seu email e senha que usa no Orkut, senão será mesmo necessário fazer o cadastro.



Vamos começar a fazer nosso blog, coloque um titulo no campo indicado (Título do blog) e um endereço no espaço Endereço do blog (URL), o que digitar aqui será o link do seu blog, por exemplo: http://dicasparablogs.blogspot.com, após digitar clique no link verificar disponibilidade. O link e o titulo do blog não precisam ser exatamente iguais, embora quando mais parecidos melhor para a divulgação do blog posteriormente. Depois de achar um endereço disponível digite os caracteres de verificação e clique em continuar.

Agora vamos escolher um modelo para o seu blog, essa será a aparência dele depois de pronto, claro que tudo pode ser modificado depois e quantas vezes você quiser. Portanto escolha um deles e clique em continuar.

E já está tudo pronto, você já criou o blog, clique no botão começar a usar o blog isso levará você para a pagina onde fará sua primeira postagem no blog, ou seja, escrever seu primeiro texto.

Digite um titulo e depois o texto, se quiser pode enviar imagens clicando na barra de ferramentas que aparece encima de onde escrevemos o texto do blog, quando terminar é só clicar em publicar.

Com isso terminamos de criar e publicar nosso primeiro texto na internet. Quando clicar em visualizar blog verá sua pagina pronto com o texto já publicado nela. Agora comece a divulgar o blog, visite e comente outros blogs que eles também comentarão o seu... Enfim o blog está pronto, mas o trabalho está só começando.

Sabemos que a maioria das pessoas que visita este blog já tem blogs e sabe como fazer isso mas não podemos esquecer de quando começamos o primeiro blog e quantas duvidas e dificuldades tivemos para dar os primeiros passos como blogueiros

Mostrar Somente os Títulos das Postagens

Mostre somente os títulos das postagens nas paginas dos marcadores ou paginas mais antigas do blog, deixando as postagens completas(ou resumo das postagens) somente na pagina inicial e nas paginas individuais de cada post do blog. Você também pode alterar a quantidade de posts por pagina dos marcadores.

Já testamos esse código e funcionou perfeitamente nas paginas estáticas do blogger(também conhecidas como paginas extras). A utilidade de mostrar apenas os títulos das postagens é o carregamento mais rápido das paginas e, além disso, podemos ganhar mais pageviews (visualizações de pagina) que é uma das técnicas de SEO para mostrar aos buscadores(pesquisa Google principalmente) que o seu blog é relevante ou seja as pessoas entraram nele e visitaram mais paginas.


Entre na pagina editar HTML, mas antes de começar salve uma cópia do seu template atual, assim se tiver algum problema poderá facilmente voltar ao seu modelo original do blog. Clique para expandir os modelos de widgets e procure por(use o ctrl + F):

<b:include data='post' name='post'/>

Agora troque essa linha de código por esse aqui:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='titulopost'><a expr:href='data:post.url'>
<data:post.title/></a></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Se quiser mostrar somente os títulos das postagens na pagina inicial do blogentão retire do código essa linha <b:if cond='data:blog.homepageUrl != data:blog.url'> e também esse trecho no final:

<b:else/>
<b:include data='post' name='post'/>
</b:if>

Outro trecho que vamos adicionar é a formatação do texto, você pode colocar esse código CSS antes da linha body{....} também na pagina editar html.

.titulopost a{background-color: #FF0;border: solid 1px #000000}
.titulopost a:hover{background-color: #F96;border: solid 1px #FF0000}

Você pode formatar o texto como quiser ou usar nosso outro tutorial para deixar oslinks com aparência de botões (Como fazer e colocar botões no blog). Agora clique para salvar e já pronto quando alguém entrar na pagina de um dos marcadores do blog ou paginas de postagens mais antigas aparecerão somente os títulos das postagens. Usamos como base para fazer esse tutorial a explicação postada pelo blogIceBreacker. 

Menu horizontal

Para colocar um menu horizontal no site precisamos colocar o código em duas partes distintas. Primeiro vamos colocar o CSS, no blogspot isso é feito através da pagina editar html, colocando o código abaixo junto com os demais códigos CSS do seu blog (body, main, sidebar, etc...), basta colocar o trecho abaixo junto com o restante dos códigos. Para outros blogs a regra é a mesma junto com os demais estilos CSS.
Código CSS do menu horizontal:

#menu{padding: 0px;
font: bold 12px Verdana;
margin: 0px;
width: 650px;}
#menu li{list-style: none;
display: inline;
margin: 0;
}
#menu li a:link, #menu li a:visited{
color: #0000FF;
text-decoration: none;
margin-right: 3px;
border: 2px solid #000000;
padding-top: 4px;
padding-bottom: 4px;
width: 150px;
display: block;
float: left;
text-align: center;
background-color: #FFFFCC;
}
#menu li a:hover{
color: #FFFFFF;
background-color: #FF9933;
border: 2px solid #0099FF;
}

Aqui existem algumas coisas que podemos mudar para deixar esse menu com uma aparência melhor para nosso site. Começando pela largura de cada item, isso é alterado nessa parte: width: 150px; basta trocar esse valor e pronto, contudo modificando isto mudaremos também a largura total do menu que precisará ser corrigida aqui: width: 650px. Quando colocar isso no seu site os itens do menu devem ficar um do lado do lado se isso não ocorrer modifique um destes dois valores que resolverá o problema.
Nesse exemplo o menu não está todo junto existe um pequeno espaço entre os itens para remover ou aumentar esse espaço altere o 3 nesta parte: margin-right: 3px. Finalmente as bordas:

border: 2px solid #000000;
border: 2px solid #0099FF;

Você pode mudar a largura ou a cor da borda (clique aqui e veja o código das cores), ou se preferir sem bordas basta apagar essas duas linhas.

Agora vamos para a segunda parte colocar o menu propriamente dito. Na página editar layout clique para adicionar um gadget e escolha a opção html/javascript, então coloque o código do menu, fizemos esse exemplo com nossos sites, mas para alterar é somente trocar os links:

<ul id="menu">
<li><a href="http://jornaljd.blogspot.com" target="_blank">Meu Jornal</a></li>
<li><a href="http://frasecurta.blogspot.com" target="_blank">Frases Curtas</a></li>
<li><a href="http://mensagens.110mb.com" target="_blank">Frases e Mensagens</a></li>
<li><a href="http://cidadeweb.110mb.com" target="_blank">Cidade Web</a></li>
</ul>

Caso tenha dificuldades com este código publicamos um outro artigo sobre menu horizontal mas lá mostramos como colocar o código num lugar só, sem entrar na pagina editar html.

Personalizar gadgets do Blog

Esse tutorial vai mostrar como é simples formatar o texto dos links dos marcadores do blog e isso pode ser utilizado para formatar qualquer gadget do seu blogger, pois o modo de fazer é o mesmo e funcionará bem em qualquer texto que esteja dentro de um gadget. 

Primeiro vamos entrar na pagina editar HTML e procurar pelos marcadores do blog, aperte ctrl+F no seu teclado que aparecerá uma caixa para procurar texto na pagina, então digite o título dos seus marcadores em nosso caso utilizamos o título guia rápido. 


Então encontramos a linha: 

<b:widget id='Label1' locked='false' title='Guia Rápido' type='Label'/> 

O que procuramos aqui é a id do gadget, no caso é label1 que está logo no começo widget id='Label1', então deve ver e usar como está nos marcadores do seu blog. 

Depois volte ao começo do código html e procure por body{....}, se precisar ajuda para achar o lugar certo no html do blogger veja aqui:Onde colocar os códigos no blog, então coloque esse código antes dele(body): 

#Label1 a{text-indent:15px;letter-spacing: 1px;background-image: url(endereço da imagem);background-repeat: no-repeat;background-position: left;padding-left:15px} 
#Label1 a:hover{letter-spacing: normal; font-weight: bold;background-image: url(endereço da imagem);background-repeat: no-repeat;background-position: left} 

Aqui você poderá escolher qualquer formatação de texto, imagem de fundo(veja que no código tem endereço da imagem, então coloque uma ou apague aquele trecho), além disso podemos colocar bordas, ou seja, poderá deixar com a aparência que desejar (veja nossa postagem sobre fazer botões). Novamente vamos repetir que neste estilo que acabamos de criar usamos label1 no inicio dele porque é a id dos marcadores de nosso blog, então você usará igual está no seu blog senão não funcionará. 

Esse mesmo procedimento serve para formatar o texto de qualquer gadget, basta entrar a id e criar um estilo utilizando o mesmo nome. Mantenha as letras maiúsculas e minúsculas como estão no código do gadget para evitar erros. 

Esse tutorial foi feito atendendo alguns pedidos e duvidas sobre como fizemos o nosso menu guia rápido mudando o estilo dos links dos marcadores do blog. 

Postar em varias redes sociais ao mesmo tempo

Você pode atualizar varias redes sociais ao mesmo tempo, sem precisar entrar em cada uma delas. Isso é uma boa opção para melhor aproveitar seu tempo na internet, divulgar e conseguir mais visitas para seu blog. No caso do Twitter temos outras opções para enviar automaticamente as atualizações do blog para o Twitter. Com esse site você poderá até postar no Blogger e Wordpress ao mesmo tempo.

Entre no site Ping.fm e crie um cadastro isso é fácil de fazer eles só pedem email e senha, depois configure as redes sociais que deseja utilizar através do site clicando no link Click here to add networks.

Escolha qual delas vai incluir no site, vamos demonstrar usando o Twitter.


Clique no link Add Network ao lado do Twitter


Agora clique no link Link Ping.fm to Twitter


Isso vai para a pagina do Twitter perguntando se você autoriza o site Ping.fm fazer postagens através de sua conta, então confirme. E já está pronta a configuração do Twitter no Ping.fm.



Quando voltamos a pagina inicial dele veja que no menu Ping My tem a opção Twitter na lista, se postar algo na opção default ele publicará em todas as redes sociais que cadastrou. Então você pode escolher em qual rede irá publicar algum texto, naturalmente isso só terá utilidade depois que colocar vários sites no seu cadastro.


A caixa de texto grande Type Your Message Below: é onde escreverá a mensagem a ser publicada nas redes sociais, depois é só clicar em ping it !

Veja aqui os códigos dos botões para redes sociais:

Botão do Facebook, Twitter, Google Buzz no mesmo Gadget
Botão Curtir do Facebook no Blogger
Colocar botão retweet no blog
Botão Promova no Orkut

Esse é um jeito fácil e rápido para atualizar seu perfil em vários sites sem perder tempo, mas não exagere publicando a mesma coisa de forma idêntica em muitos lugares ou repetidas vezes. Como todas as ferramentas úteis que temos na internet precisaram testar e descobrir a melhor maneira de utilizar. 

Espaço entre as colunas do blog

Uma grande dificuldade que vejo entre os blogueiros é acertar a distancia entre as colunas e a postagem do blog, ou seja, às vezes os menus ficam encostados um no outro ou muito distante, isso acontece tanto em relação às colunas como os posts do blog afinal todos são colunas. Para corrigir esse problema é só colocar padding-left ou padding -right no código da coluna que deseja dar um espaço.

Fazer essa correção pode parecer um pouco confusa, pois existem muitos modos de fazer a mesma coisa e, além disso, as variações de lado também podem confundir na hora de alterar os códigos, então vamos primeiro localizar o que vamos alterar. Vamos usar o exemplo da coluna das postagens estar encostada na coluna do lado esquerdo, você pode entrar na pagina editar HTML e procurar por:

#main {width: 490px;color:#000000;float: left;line-height: 140%;padding-left:5px;….

E colocar padding -left:15px, se já tiver algo assim no seu blog apenas altere o valor (não repita o mesmo código duas vezes) isso fará surgir um espaço de 15 pixels entre a coluna das postagens e o menu do lado esquerdo, note que aumentamos o espaço ocupado pela coluna (mais 10 px) então isso pode fazer que uma das colunas do seu blog vá parar no final da pagina por falta de espaço então normalmente quando fazemos esse tipo de alteração devemos reduzir a largura da coluna que em nosso exemplo é 490 isso está logo no inicio, assim manteremos a mesma largura total que a coluna ocupava. Note como funciona a coluna tinha 490 de largura mais 5 de margem, ou seja, 495, se aumentarmos a margem para 15 vamos diminuir a largura da coluna para 480 assim continuaremos ocupando 495.

O mesmo que fizemos com a coluna main(postagem) poderia ser feito com qualquer uma das colunas do blog. Para saber qual lado deve colocar a margem veja o float que está no código, geralmente a margem deve ser do mesmo lado. Outro detalhe é que dependendo do seu template usar padding pode atrapalhar no layout (dependendo das imagens e cores de fundo) então o mesmo que fizemos com padding poderia ser feito com margin, assim margin-left:15px; e tudo funciona do mesmo jeito apenas trocamos o código. Apesar de funcionar do mesmo padding e margin não são exatamente a mesma coisa você pode ver aqui a diferença entre usar padding ou margin, outra dica relacionada com esse tema é como alterar as larguras do blog.

Outra coisa que não poderíamos deixar de falar é que é muito bom visualizar seu blog em vários navegadores (pelo menos Internet Explorer e Firefox), pois é possível haver uma variação na aparência do seu blog entre eles. 

Dividir um gadget em duas colunas

Vamos mostrar como colocar duas imagens lado a lado ou então criar duas colunas dentro do mesmo gadget e também como fazer para mostrar vários acessórios diferentes no final de cada postagem um do lado do outro. Com esse código é possível dividir um gadget em duas colunas e assim aproveitar melhor o espaço na sua página.

Exibir acessórios um do lado do outro no final das postagens ou em qualquer gadget pode ser muito útil, veja, por exemplo, no final de nossas postagens, mostrarmos o botão retweet, link da pagina e o link para enviar a postagem por email.

Lembramos que esse código é para ser utilizado como um gadget de html (pagina layout > adicionar gadget > html/javascript) ou então para mostrar acessorios um ao lado do outro no final de cada postagem neste caso entre na pagina editar html, clique para expandir o modelo e coloque o código após post.body, como neste tutorial sobre mostrar o link da postagem.

Isso é feito com o seguinte código:

<div style="float:left;padding:2px;text-align:center">esquerda</div>
<div style="float:right;padding:2px;text-align:center">direita</div>
<div style="clear:both;padding:2px;text-align:center">embaixo</div>


Esse código faz como se fossem 3 caixas: uma a direita outra a esquerda e uma terceira embaixo, você pode colocar o que desejar dentro de cada uma delas. A parte padding:2px;text-align:center repete-se em todas para centralizar e dar uma pequena margem(2px) dentro das “caixas”. Se quiser pode retirar esse trecho e apenas perderá o alinhamento ao centro e a margem, o posicionamento continuará o mesmo.

Se achar que o conteúdo das duas colunas ficaram muito distantes uma da outra pode corrigir isso trocando o padding:2px por padding-left:5px, claro que usando o valor que achar melhor e fazendo a mesma coisa nas duas colunas, ou seja na coluna onde tem float:right use padding-right:5px.

É com um código parecido com esse que fazemos nossos contadores do Feed eTwitter um do lado do outro no inicio da pagina, claro que antes disso tivemos quedividir o cabeçalho do blog em duas partes.

Esperamos que gostem de mais essa dica sobre layout do blog. Apenas tome cuidado para não colocar imagens ou objetos largos demais dentro deste código isso poderá gerar erros. 

Template do Blog, colunas de tamanhos iguais

Algumas pessoas já perguntaram como fazer para coluna das postagens acompanhar (ficar do mesmo tamanho) que a sidebar do blog, ou seja, a cor de fundo das postagens ou das colunas (sidebar) acompanha o conteúdo dela, fazendo que no final da pagina fiquem desiguais. Corrigir isto e fazer as colunas do blog ficarem todas do mesmo tamanho não é difícil só precisa modificar alguns códigos.

Para resolver este problema o que fazemos na verdade é retirar a cor de fundo das postagens e sidebar e colocar somente uma cor ou preferencialmente uma imagem no blog todo. Isso pode variar um pouco dependendo do modelo de layout que seu blog usa. Por causa disto sugerimos salvar uma copia do seu modelo antes de começar as alterações.

Agora vamos começar as mudanças no seu blog. Então vamos começar entre na pagina editar html, procure por #main{...}, #sidebar{....}, #newsidebar{......} e qualquer outro código que seja das colunas ou postagens do blog, como já dissemos isso irá variar conforme o modelo. Quando achar apague qualquer cor de fundo(background....) e bordas (border:...) que achar neles. Isso faz que fique somente o fundo do blog e mais nada.

Encontre a parte #content-wrapper{.... } e coloque uma cor ou imagem de fundo. Para fazer as divisões entre as colunas será necessária uma imagem de fundo, então crie um da largura do seu blog e com as medidas certas de cada uma das colunas e postagens do blog, mas tudo isso numa imagem só, veja abaixo como é a imagem que usamos para fazer isso aqui no Dicas para Blogs atualmente:

Mas isso faz a imagem ocupa todo o espaço do blog inclusive aonde vai o titulo, para deixar o titulo com a cor de fundo do restante do blog usamos o seguinte código:

#header-wrapper{background-color: #66ccff;margin: 0 auto;padding-bottom: 5px;border-bottom: 2px solid #000000} isso faz aparecer a mesma cor de fundo do blog debaixo do titulo, a parte da borda é para encaixar no inicio da imagem de fundo das colunas, porém se quiser fazer os cantos arredondados como aqui no Dicas para Blogs, o código é o seguinte:

#header-wrapper{padding-top:10px;background-color: #66ccff;margin: 0 auto;padding-bottom: 20px;background-image: url(cantos arredondados);background-repeat: no-repeat;background-position: bottom;}

Atualmente usamos a imagem acima aqui no Dicas para Blogs, repare na parte em negrito background-color: #66ccff; isso é a cor do fundo do blog que aparecerá por baixo do titulo. padding-bottom: 20px é uma distancia para não ter nenhum texto ou imagem sobre os cantos arredondados, e o restante background-image: url(cantos arredondados);background-repeat: no-repeat;background-position: bottom; é a imagem com os cantos arredondados e o posicionamento dela na parte de baixo, claro que onde está escrito cantos arredondados você precisará trocar pelo endereço de uma imagem.

A maioria dos modelos do blogspot usa essas tags ou bem parecidas. O modelo que usamos é o Son of Moto (Mean Green Blogging Machine variation) e no blog Frases Curtas usamos o modelo Minima(Designer: Douglas Bowman) que também tem as mesmas tags. Nele usamos está imagem de fundo sob as postagens e menu:

E na parte do título repetimos a imagem de fundo do restante do blog e colocamos uma borda de 2 pixels como já falamos aqui. Tento este resultado:
Colocamos essa imagem além do link para o Frases Curtas caso daqui algum depois que fizermos alguma alteração no template dele, mesmo assim as pessoas possam ver do que estávamos falando. 

Achar e baixar imagens, fotos, icones para Blog

Já faz tempo que os blogueiros trocam o favicon (imagem da barra de endereço) do blog, mas há pouco tempo o blogger colocou essa função na sua pagina design o que facilitou muito a troca desta imagem sem precisar mexer com códigos, mas ainda restou um problema como achar ou fazer icones no tamanho certo?

Por isso vamos mostrar mais um site onde você pode encontrar e baixar icones para usar no seu blog. Claro que você mesmo pode fazer sua imagem, mas devido ao tamanho dela é um pouco complicado.


O site http://www.iconspedia.com tem muitos icones prontos para download você só precisa pesquisar sobre o que deseja e quando encontrar é só salvar o icone, depois enviar para o blogger, caso tenha duvidas veja esse link: Como Colocar Favicon no Blogger

Como falamos você pode criar sua própria imagem, mas se quiser usar como favicon ela deve ser quadrada e lembre-se: a imagem será reduzida para o tamanho 16x16 pixels, portanto não adianta criar uma imagem grande cheia de detalhes que ela não aparecerá corretamente. Veja aqui alguns programas e sites para criar e editar imagens online:

Programas Gratuitos para Edição de Imagens
Editor de Imagens, Fotos e Banners Online
Colocar Efeitos em Fotos e Imagens: Bordas, Desenhos, Texto, Editar Cores

Além dos icones os blogueiros também usam muitas imagens. Afinal sempre é bom colocar imagens nas postagens do seu blog, pois isso ajuda e tornar a leitura mais agradável, além disso, serve para ilustrar e demonstrar sobre o que estamos falando, então veja alguns lugares onde podemos achar imagens para usar no blog:

25 sites com Imagens Grátis para Baixar e Usar
Texturas para Imagem de Fundo do Site ou Blog
Download de Icones para Redes Sociais (Twitter, Facebook, Orkut)

Para terminar queremos deixar um aviso sobre direitos autorais porque nem todas as imagens que você encontra na internet podem ser copiadas, portanto o melhor é editar ou criar suas próprias imagens. Pois em alguns casos o dono das imagens pode denunciar seu blog por plagio mesmo que seja somente uma imagem. 

Como fazer um banner

Aprender a criar seus próprios banners é uma coisa muito importante para quem tem um blog porque eles servem tanto para fazer parcerias como também banners para colocar no lugar do titulo do blog ou mesmo para usar nas suas postagens, afinal todos são imagens apenas utilizamos de formas diferentes cada uma delas. Então vamos começar a falar sobre criar, editar, hospedar imagens para usar no blog.

Links úteis com dicas de criação e edição de imagens:
Como Fazer Gifs Animados Online para o Blog, Orkut e outros
Como Fazer Imagens e Banners Online
Editor de Imagens, Fotos e Banners Online


Para criar banners para parcerias ou qualquer outro tipo de imagens precisamos um programa de edição de imagens os mais conhecidos são Photoshop e Fireworks, mas ambos são pagos, além disso, exigem muito do computador (são programas bem pesados), então veja aqui uma lista de programas gratuitos para fazer ou editar imagens. Se desejar ver outros programas sugerimos visitar e ler a opinião das pessoas sobre programas de edição de imagens no site Baixaki e Superdownloads ou então em qualquer outro site que confie.

Depois que terminar de fazer a imagem que será seu banner para parcerias precisamos hospedar essa imagem (colocar na internet) para que qualquer computador possa visualizar, recomendamos o site Imageshack para isso, já usamos faz algum tempo e sem grandes problemas, entre no site, clique em browse localize onde salvou a imagem, clique em start upload, aguarde carregar a imagem e copie o endereço que está em direct link. Se tiver duvidas veja aqui sobre problemas com hospedagem de imagens.

Para fazer o código da caixinha link use nosso gerador de códigos que está logo abaixo, use o endereço completo do seu blog incluvise o http://

Agora que está com o código pronto é só entrar na pagina layout, adicionar gadget, html/javascript e adicionar o código do seu banner com caixinha link-me, ele deverá ficar igual ao nosso: mostrando o banner e a caixa embaixo com o código do banner já com o seu link nele.

Se quiser fazer banners para usar no lugar do titulo do seu blog é mais simples ainda, pois não precisa hospedar a imagem basta entrar na pagina layout, clicar para editar o cabeçalho depois encontrar a imagem.


Antes de clicar para salvar não se esqueça de escolher a opção se quer a imagem substituindo o titulo (Em vez de título e descrição) ou usar essa imagem como fundo com o título escrito sobre ela (Por trás de título e descrição), também temos a opção de Reduzir para ajustar, se marcar essa opção e sua imagem for maior que a largura do seu blog ela será reduzida automaticamente.