Dicas Blogger

Home » Archives for março 2011

Como colocar anúncios nos posts do Blogger

<img align="right" alt="money_bag" border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLISiqYlBN3z01T3ooEiXYoYgnXKanjoOOAowLr7ujRUk0CO1E8mR0r30tL7Fd7-vty4bpLLW7_aWphJArmoGqccaYjhPITJd_8zwNMl2I3Njtlw_KxPbqXO4Aygg8PAQFK6ag509nGJXd/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="money_bag" width="128" /> Apesar de já ter feito <a href="http://www.dicasblogger.com.br/2008/05/anuncios-nas-postagens-do-blogger.html" target="_blank">1 post anterior</a> ensinando a colocar anúncios dentro dos posts (artigos) do Blogger, ainda recebo comentários de leitores com dúvidas sobre esse tema. Na verdade, o problema reside no fato de que o local onde se deve inserir os anúncios varia de template para template, ou seja, o que pode dar certo para alguns, pode não ser o correto para outros. 
Outra dúvida comum é como fazer para colocar anúncios lado a lado – como é aqui no Dicas Blogger – ou anúncios à esquerda ou à direita dos posts. 
Antes de mais nada, você precisa saber se quer colocar o anúncio entre o título e o post ou no rodapé do post. Daí, será preciso entrar no HTML do template, marcar “expandir modelos de widgets” e procurar ( Crtl +F do teclado) pelas seguintes linhas, incluindo o código do anúncio nos locais indicados em amarelo. 
<blockquote>
ENTRE O TÍTULO E OS POST 
<div class='post-header-line-1'> 
Código do anúncio 
NO FINAL DO POST 
Código do anúncio 
<div class='post-footer'> </blockquote>
ATENÇÃO! Para que o Blogger aceite o código, é preciso fazer uma conversão. Eu uso o site <a href="http://blogcrowds.com/resources/parse_html.php" target="_blank">Blogcrowds</a>. Basta colocar o código no local indicado e clicar em “parse” 
Para saber os demais locais que aceitam anúncios, acesse: 
<ul>
<li><a href="http://www.dicasblogger.com.br/2011/01/como-colocar-recursos-nos-posts-via.html">Como colocar recursos nos posts via HTML</a></li>
</ul>
Como colocar os anúncios lado a lado 
<img alt="2-anuncios" border="0" height="239" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9YcN04DkgdfE5CgnrZoI0KBCai5ErGsILsUpw7hQl4uAL_d5641VFUyXcm7AscbKpN9zseYaH379joQMfWZJE-xNWcHoaVz8RPGUNURtWvIukzMSRQul1nc7-XtUIYAaJjkXzN2WdH8HS/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="2-anuncios" width="452" /> 
Isso vai depender da largura da área de postagens. Para checar, procure por #main no HTML e verifique o valor em width. Aqui no meu blog está assim: 
<blockquote>
#main { width:626px;</blockquote>
No DB, consegui colocar 1 anúncio de 300 x 250 ao lado de 1 anúncio de 250 x 250. 
Para tanto, gere os códigos em seu programa de afiliados, faça a conversão e cole – no HTML do template -  um código embaixo do outro . Ficaria assim: 
<blockquote>
ENTRE O TÍTULO E OS POST 
<div class='post-header-line-1'> 
Código 300 x 250 
Código 250 x 250</blockquote>
Como colocar anúncios à direita ou à esquerda dos posts 
<img alt="anuncio-esquerda" border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhckgu0SXpTl8Zb8WmjPxrVgqrGbIRas4x_quE4kjsFXu5mCQ8RER9lO3_1EgNAYJ1PpvBCaNiAgE71iOlQBCkodwOeGqgXSnwTr1xRhTwnRavtD3CaBVgKKDyP2UlxZCziNx8XLrI5GnY7/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="anúncio à esquerda" width="426" /> 
Será preciso usar um pouco de CSS: 
<blockquote>
Á ESQUERDA 
<div class='post-header-line-1'> 
<div style="float: left; margin: 5px”> 
Código  do anúncio 
</div></blockquote>
ou 
<blockquote>
Á DIREITA 
<div class='post-header-line-1'> 
<div style="float: right; margin: 5px”> 
Código do anúncio 
</div></blockquote>
Esses métodos funcionam nos meus templates, mas pode não funcionar em outros e eu não vou ter como ajudá-los, pois cada modelo tem suas características próprias. O que eu  recomendo é que vocês usem um blog de testes e façam suas descobertas :) 
Nunca se esqueçam de verificar se o programa de afiliados que vocês usam ,permite anúncios entre as postagens. Bons rendimentos a todos!

Como colocar anúncios nos posts do Blogger

Apesar de já ter feito 1 post anterior ensinando a colocar anúncios dentro dos posts (artigos) do Blogger, ainda recebo comentários de lei...

Continue Lendo >>

16:05

Como colocar banner em flash no Blogger

<img align="left" alt="flash" border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOqtajEJkhTG5QdYPrm3bBa5zo4OgFU0WZ1aZODxJ-vqGnQ8xzzpU5j30yqBJbcip9j_8LhADo7HIvOUmpvTCk1LbUW34yhhX8Pe0feohxpBjLL4cKdfKINtVeXydYAfFXvqm0tU8rWyls/?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: inline; float: left; margin: 0px 18px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="flash" width="100" />Para inserir um banner no formato flash (.swf) no Blogger, é preciso hospedar a animação em algum servidor que suporte flash, copiar a URL (endereço) e utilizar o código abaixo, colando-o no gadget HTML/javascript. 
Antes de colar o código, faça as substituições necessárias, assinaladas em verde (largura e altura do banner) e em vermelho (URL do banner). 
O Picasa Web não aceita arquivos em flash, mas o site <a href="http://imageshack.us/">Imageshack</a> sim. 
 
<blockquote>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="<a href="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"">http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"</a> width="LARGURA" height="ALTURA" >         <param name="movie" value="URL DO BANNER" />         <param name="quality" value="high" />         <embed src="URL DO BANNER" quality="high" pluginspage="<a href="http://www.macromedia.com/go/getflashplayer%22">http://www.macromedia.com/go/getflashplayer"</a> type="application/x-shockwave-flash" width=" LARGURA" height=" ALTURA "> </embed> </object></blockquote>

Como colocar banner em flash no Blogger

Para inserir um banner no formato flash (.swf) no Blogger, é preciso hospedar a animação em algum servidor que suporte flash, copiar a URL (...

Continue Lendo >>

08:29

Novo gadget para enviar postagens por e-mail

<img align="right" alt="image" border="0" height="128" src="http://lh4.ggpht.com/_VzIuuMOitPE/TYJvKLgNZ1I/AAAAAAAAB9k/gPOCn-3cjVI/image%5B5%5D.png?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="image" width="128" />Frequentemente vemos no <a href="http://www.google.com/support/forum/p/blogger?hl=pt-BR" target="_blank">Fórum de Ajuda do Blogger</a> usuários perguntando como colocar em seus blogs um gadget que permita a seus visitantes cadastrarem um e-mail para receber as novas postagens; até hoje a melhor forma de fazer isso era usando a opção Email Subscriptions do Feedburner, mas agora temos um novo gadget disponível no painel do Blogger que adiciona esta mesma função em nossos blogs sem ter de configurar nada no painel do Feedburner. 
 O <a href="http://buzz.blogger.com/2011/03/engage-your-audience-with-follow-by.html" target="_blank">Blogger Buzz anunciou o Gadget Follow by e-mail</a>, que permite que os leitores de um blog cadastrem seus e-mails para receber as novas postagens publicadas. Para usar este novo gadget, vá até a guia Elementos de Página do painel do Blogger, clique em Adicionar um gadget e escolha na lista o gadget Seguir por e-mail como é mostrado na imagem abaixo. 
<a href="http://lh5.ggpht.com/_VzIuuMOitPE/TYJiK58LAFI/AAAAAAAAB9M/NDZH1NXNHB4/s1600-h/seguir%20por%20e-mail%5B4%5D.png"><img alt="seguir por e-mail" border="0" height="127" src="http://lh4.ggpht.com/_VzIuuMOitPE/TYJiMbmQ0fI/AAAAAAAAB9Q/skKVKsfJuu4/seguir%20por%20e-mail_thumb%5B2%5D.png?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="seguir por e-mail" width="395" /></a> 
Na próxima janela você pode configurar o Gadget inserindo o Título que preferir e verificar se o feed do seu blog foi detectado corretamento. Veja a imagem abaixo. 
<a href="http://lh4.ggpht.com/_VzIuuMOitPE/TYJkWYngSuI/AAAAAAAAB9Y/qJoEhREiBKM/s1600-h/configurar%20folow%20by%20e-mail%5B7%5D.png"><img alt="configurar folow by e-mail" border="0" height="244" src="http://lh6.ggpht.com/_VzIuuMOitPE/TYJkXcR-bOI/AAAAAAAAB9c/LPHhnz9nQJE/configurar%20folow%20by%20e-mail_thumb%5B5%5D.png?imgmax=800" style="background-image: none; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="configurar folow by e-mail" width="418" /></a> 
Caso o gadget informe que seu feed não foi encontrado é provavel que você não tenha o feed do seu blog configurado no Feedburner; neste caso leia o artigo <a href="http://www.dicasblogger.com.br/2009/10/usar-e-configurar-feedburner.html">Como usar e configurar o Feedburner</a>. 
O interessante de usar o Feedburner para oferecer subscrições por e-mail é que você tem acesso as estatísticas de assinantes que o sistema gera.

Novo gadget para enviar postagens por e-mail

Frequentemente vemos no Fórum de Ajuda do Blogger usuários perguntando como colocar em seus blogs um gadget que permita a seus visitantes c...

Continue Lendo >>

15:50

Album do Picasa com espaço ilimitado

Foi <a href="http://googlephotos.blogspot.com/2011/03/posted-by-matt-steiner-engineering-lead.html">anunciado</a> no dia 4 de março, que o serviço de imagens da Google – <a href="https://picasaweb.google.com/">Picasa Web Albuns</a> - terá espaço ilimitado para armazenamento de fotos de até 800px de tamanho e para vídeos de até 15 minutos de duração. Até então, o espaço era restrito a 1GB e quando o limite era ultrapassado, era preciso pagar por mais espaço.  
<img align="left" alt="picasa" border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWsOJDpmXYESt0_9aoM7DyCWybBNdgXU526mXqxRCZL8pMCpDoUuhc2vws6vXkt_EtnYC4yBbBS25XutcZeH-F11UZ4VFuvPNPzVs5k4cufTyvzUMvkpq3MTLrzXvnly-tkAWiP1CPHME4/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: left; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="picasa" width="128" />A notícia é especialmente importante para os usuários do Blogger, que costumam usar o Picasa para armazenar tanto as fotos inseridas nos posts quanto as imagens contidas no template - <a href="http://www.google.com.br/url?q=http://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html&sa=U&ei=N1J3Tb-FCOqT0QH1_7DtBg&ved=0CAUQFjAA&usg=AFQjCNGy_hw4VowSKiLiZHRy8_sT0biWwQ">Como hospedar imagens no Picasa</a>. É importante salientar que antes de enviar suas fotos, certifique-se de que elas são menores do que 800px passando o mouse sobre as mesmas enquanto estão em seu computador. Caso a foto seja maior, use um editor de imagens para reduzi-las (<a href="http://pixlr.com/">Pixrl,</a> Photoshop,<a href="http://www.picnik.com/">Picnik</a>, etc) 
O serviço Picnik já vem integrado ao Picasa. Para editar alguma imagem,faça o upload da mesma e clique no ícone que aparece à direita, onde está escrito “editar” 
<img alt="picasa" border="0" height="61" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrzmmLH71C_iV_n3SMu0fY0WZxqMzOjNVla7OOLD7-Jcsld0xvXTokTdvypakBaZV-YE_V6WdVSu7pwXF-2SdNF6CEwHxZfoVweLZGG7uItUd-gjyPf5ss-I9ntvgv4Sz6eLC8QuHAMOOH/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="editar" width="193" /> 
Fontes: 
<a href="http://www.querocriarumblog.com.br/2011/03/google-libera-espaco-ilimitado-para-o.html">Google libera espaço ilimitado para o Picasa</a> – Como criar um blog 
<a href="http://googlephotos.blogspot.com/2011/03/posted-by-matt-steiner-engineering-lead.html">More storage, more photos, more fun</a> – Google Photos Blog

Album do Picasa com espaço ilimitado

Foi anunciado no dia 4 de março, que o serviço de imagens da Google – Picasa Web Albuns - terá espaço ilimitado para armazenamento de foto...

Continue Lendo >>

08:10

Como filtrar atualizações no Facebook

<img align="right" alt="facebook" border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqk29F69sWlfTMU4cOqENJUo6TBhni7tp5uDdo4I-yGUqAhcRkUsG5eahxfpGCKNhyphenhyphenQdvgl2FfVLS293rH-QTyiBwW53wPTn3K8yA1mWR1IpLQ1Xv2zRzSZgz8SZyZplHX2DJDwnD5MAXj/?imgmax=800" style="background-image: none; border-right-width: 0px; margin: 0px 0px 0px 3px; padding-left: 0px; padding-right: 0px; display: inline; float: right; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="facebook" width="100" />Antes de mais nada, devo confessar que resisti MUITO em aderir ao Facebook, pois não via nessa ferramenta nada de diferente do Orkut. Ledo engano, assim como foi nos meus primórdios com o Twitter. Com o Facebook, é possível gerenciarmos amizades antigas, novas, reais, virtuais e de diversas tribos, bem como criarmos canais de divulgação de nossos blogs. As configurações de privacidade são fantásticas e a Central de Ajuda merece nota 10. No Facebook, temos uma área semelhante ao Twitter, onde aparecem as atualizações de nossos amigos que é chamada de Feeds de Notícias. Pra quem tem poucos amigos é até simples de acompanhar as atualizações, mas para quem tem muitos, pode ser bastante dificultoso. Isso sem contar quem acompanha o Twitter e o Facebook ao mesmo tempo acaba lendo, por exemplo, tweets repetidos. Para filtrar os Feeds de Notícias, basta clicar no X que fica à direita da atualização. <img alt="ocultar-feeds" border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2b1Iqw_31q85TmSXRs5gQZwGb2nKLD-Alza7VTmlxC1QX-reRVydrRl293Iyvm6ankYBWiTL4XwBy4S87WtG3jRRtX44txARHYu_bgVh_6wApm0tOPFO8qGuuMBjME_flPOOB_j3ZNmR-/?imgmax=800" style="background-image: none; border-right-width: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="ocultar-feeds" width="452" /> Na imagem acima, eu peguei uma atualização da Clau, do <a href="http://www.mundoblogger.com.br/" target="_blank">Mundo Blogger</a>, apenas para ilustrar este post. Notem que aparecem 4 opções: <ol> <li>Ocultar publicação: oculta apenas aquela atualização </li><li>Ocultar todos por Clau: oculta todas as publicações da pessoa </li><li>Ocultar todos por RSS Grafitti: oculta todas as publicações daquele aplicativo </li><li>Marcar como lixo eletrônico: serve para denunciar spam</li></ol> Então vamos supor que eu não queira receber nenhum post dos blogs dos meus amigos. Eu teria que marcar “Ocultar todos por RSS Grafitti”. Ou se eu não quisesse receber nada que viesse do Twitter, eu marcaria algum aplicativo que envie tweets, como por exemplo, o “smart tweets”. Fácil, né? Ah, mas e se depois eu quiser voltar a receber essas publicações que ocultei? Simples. Clique no link “mais recentes” e depois em “editar opções” Escolha o aplicativo ou o amigo que você não quer mais ocultar e clique no X ao lado do nome dele. <img alt="editar-opções" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxggMmgR7_Cwoqd34aErlUlTCWizjn8Y0hFqwnUZNwA0SFKAOTkLSaTerb5P8FYRXgNIQbl9SrvVPE0W5aA2V2w2cQJYdGcywEl8McruqKd0rrwS-UlWaMsDYnvANmR7AnutbqKIej2Dch/?imgmax=800" style="background-image: none; border-right-width: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="editar-opções" width="452" /> Me considero uma novata em Facebook, mas à medida que eu for aprendendo coisas interessantes e que possam ser úteis para vocês, virei aqui compartilhar ;) Se quiserem me seguir ou seguir o blog no Facebook, fiquem à vontade ;) <ul> <li><a title="http://www.facebook.com/blogdicasblogger" href="http://www.facebook.com/blogdicasblogger">http://www.facebook.com/blogdicasblogger</a> </li><li><a title="http://www.facebook.com/blogdicasblogger" href="http://www.facebook.com/dicasblogger">http://www.facebook.com/dicasblogger</a></li></ul>

Como filtrar atualizações no Facebook

Antes de mais nada, devo confessar que resisti MUITO em aderir ao Facebook, pois não via nessa ferramenta nada de diferente do Orkut. Ledo e...

Continue Lendo >>

11:08

Como personalizar a URL no Facebook

Como ter um endereço próprio (pessoal) no Facebook 
<img align="left" alt="facebook" border="0" height="98" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKCyMFgYv69_dT4Un8uQiKDaYJoifoI8p1HZNVfF5MTCRb7fFD1q6rVJf-bSWtV4Z7zNcjXeckd3hypKfo97V93_MnDwk_F94wRg4DucmQfyw62cu41m4m9KpS1AqlyvIsxgYuJZJ4-4Cg/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: left; margin: 3px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="facebook" width="94" />Por padrão, a URL ou endereço do seu perfil no Facebook aparece com letras e números, mas vocês já devem ter reparado que  em alguns perfis o endereço aparece assim: facebook.com/nomedousuario. Exemplo: <a href="http://www.facebook.com/dicasblogger">facebook.com/dicasblogger</a> 
O Facebook permite que o usuário personalize o endereço de sua conta, o que fica muito mais elegante e fácil de memorizar. 
Para personalizar a URL da sua conta, é preciso fornecer o número do seu celular ou, caso não tenha, infome um número que você tenha fácil acesso. 
<ol>
<li>Entre em conta>configurações de conta>configurações </li>
<li>Clique em “nome de usuário” </li>
<li>Siga as instruções para fornecer o número do celular </li>
<li>Chegará por SMS (torpedo) um código para ativação </li>
<li>Insira o código no local indicado </li>
<li>Escolha seu nome de usuário e pronto</li>
</ol>
Uma outra forma de fazer isso, é seguindo a ajuda do próprio Facebook: 
<ul>
<li><a href="http://pt-br.facebook.com/note.php?note_id=163350310344280" target="_blank">Como personalizar URL de perfil ou página</a></li>
</ul>
E seu eu não receber o código de ativação do Facebook? 
Visite <a href="http://www.facebook.com/help/?ref=drop#!/mobile/?texts" target="_blank">esta página</a> e veja qual o número vinculado a sua conta para enviar SMS ao Facebook. Envie um SMS para este número com a palavra “ativar” (sem aspas) 
Como eu faço para trocar o número cadastrado? 
Vá em configurações de conta e clique na aba celular. 
 
**Não sabe o que é URL? <a href="http://pt.wikipedia.org/wiki/Url" target="_blank">A Wikipedia te explica</a>. 
Atualização 
Segundo informações da Helen Fernanda, <a href="http://www.dicasblogger.com.br/2011/03/personalizar-url-conta-facebook.html?showComment=1299533873056#c9209802964102759337" target="_blank">via comentários</a>, não é preciso colocar o número do celular. Basta entrar em <a href="http://www.facebook.com/username/">facebook.com/username</a> e escolher o nome. 
Sendo assim, temos três formas de personalizar a URL no Facebook. Escolha a sua ;)

Como personalizar a URL no Facebook

Como ter um endereço próprio (pessoal) no Facebook Por padrão, a URL ou endereço do seu perfil no Facebook aparece com letras e números, ma...

Continue Lendo >>

18:28

Problemas com ImageShack e Picasa

<img align="right" alt="imageshack-bug" border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4EHRBMdX47NKjaAdgA0SQAcERnSbKtrkYRr2OEeFPoaBf9pTWyds7kKi5A2y8E7y-5uE5zl2QbGJWYy_BBcJwIUXMOPzwdvOln50M9cJNAVM4pudO1rT-HdApSQ0Wmc4Eqkf8GSWktxgy/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Bug no Imageshack" width="217" /> 
Há cerca de 1 semana, vários usuários estão reportando um grave problema com seus templates. No lugar das imagens habituais, aparece um sapo dentro de um cubo de gelo. Teoricamente não se trata de um bug do Blogger e sim do site <a href="http://imageshack.us/">ImageShack</a>. 
Por mais que a gente avise que é imprescindível fazer backup das imagens contidas nos templates, muita gente não faz e acaba se dando mal. 
Perdi a conta das vezes que sites que hospedam imagens deixaram templates completamente deformados, seja por causa de bugs, seja por causa de excesso de banda. Vou citar alguns dos posts que já escrevi a esse respeito: 
<ul>
<li><a href="http://www.google.com.br/url?q=http://www.dicasblogger.com.br/2008/09/backup-no-picasa-de-imagens-contidas.html&sa=U&ei=bsxvTZSACcL6lwfb2_CQAQ&ved=0CAoQFjAB&usg=AFQjCNGwKh0Q32VCTlxpLII_B1t4KKU3Nw">Backup no Picasa de imagens contidas nos templates</a> </li>
<li><a href="http://www.google.com.br/url?q=http://www.dicasblogger.com.br/2010/10/blog-com-imagens-do-tinypic.html&sa=U&ei=bsxvTZSACcL6lwfb2_CQAQ&ved=0CCgQFjAH&usg=AFQjCNHjY9wH0cIIInkBmVEYy0Np_KsMdQ">Seu blog foi invadido por imagens do Tinypic?</a> </li>
<li><a href="http://www.google.com.br/url?q=http://www.dicasblogger.com.br/2009/08/instrucoes-para-uso-dos-templates.html&sa=U&ei=bsxvTZSACcL6lwfb2_CQAQ&ved=0CC0QFjAI&usg=AFQjCNEz85MEjUlbMr4Q8K4r-SDeqBCMIg">Instruções para uso dos templates gratuitos</a></li>
</ul>
Para resolver o problema com o Imageshack, é preciso procurar as URLs dentro do template, colar no navegador, salvar as imagens e hospedá-las em um local seguro. Pra fazer isso, leia o 1º post da lista acima. 
Como nem tudo são flores e o Blogger faz coisas que até deus duvida, temos um novo probleminha com as URLs do Picasa. Sabe-se lá porque, ao colarmos um código no gadget HTML/javascript que contenha uma URL do Picasa, o Blogger está modificando o formato das URLs. 
Experimente colar o código abaixo no gadget HTML/javascript, salvar e visualizar. 
<blockquote>
<div id='socialmedia'><img alt='' src='<a href="https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BEKq7aTI/AAAAAAAAEUw/Lb9JMwUAiZ8/socialconnecttwitter.png">https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BEKq7aTI/AAAAAAAAEUw/Lb9JMwUAiZ8/socialconnecttwitter.png</a>' style='width: 32px; height: 32px; float:left;'/> 
<a href='URL DO TWITTER'>Siga no Twitter</a> 
</div> 
<div id='socialmedia'><img alt='' src='<a href="https://lh5.googleusercontent.com/_mcq01yDJ2uY/TW630L9WcaI/AAAAAAAAEUM/iLypEEa1b5Y/socialconnectrss.png">https://lh5.googleusercontent.com/_mcq01yDJ2uY/TW630L9WcaI/AAAAAAAAEUM/iLypEEa1b5Y/socialconnectrss.png</a>' style='width: 32px; height: 32px; float:left;'/> 
<a href='URL DOS FEEDS'>Assine os feeds</a> 
</div> 
<div id='socialmedia'><img alt='' src='<a href="https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BI34MoHI/AAAAAAAAEU0/GuFjmmcm87w/socialconnectfacebook.png">https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BI34MoHI/AAAAAAAAEU0/GuFjmmcm87w/socialconnectfacebook.png</a>' style='width: 32px; height: 32px; float:left;'/> 
<a href='URL DO FACEBOOK'>Curta no Facebook</a> 
</div></blockquote>
Notou que as imagens desapareceram? Agora abra o gadget e veja que as URLs são as mesmas, PORÉM ao invés de letras maiúsculas e minúsculas, aparecem somente letras  minúsculas. 
E a solução? É ainda mais bizarra! Basta clicar em “Formato Rich Text” e pronto. Lá estarão elas novamente. Prefiro nem comentar ¬¬ 
Atualização em 04/03/2011 
O Fabiano Roberto, do Dicas para Blogs, publicou um post bem legal explicando como hospedar imagens no próprio Blogger #ficadica 
<ul>
<li><a href="http://www.dicasparablogs.com.br/2011/03/hospedar-imagens-no-blogger-hospedagem.html">Hospedar Imagens no Blogger - Hospedagem Grátis</a></li>
</ul>

Problemas com ImageShack e Picasa

Há cerca de 1 semana, vários usuários estão reportando um grave problema com seus templates. No lugar das imagens habituais, aparece um s...

Continue Lendo >>

14:25