Dicas Blogger

Home » Archives for outubro 2010

Slideshow no Blogger

A última moda em matéria templates personalizados para o Blogger, é o uso de um slideshow no alto dos posts ou embaixo do cabeçalho. 
 
Já existiam várias formas de se colocar um slideshow no Blogger, mas a maioria delas dependia de  hospedar externamente um arquivo do tipo .js (javascript). 
 
Por que isso era ruim? Porque no Blogger não existe um serviço de hospedagem de arquivos; dos serviços gratuitos, muitos mudam as regras sem aviso prévio, apagando os arquivos ou mudando as URLs (endereços) dos mesmos. 
 
Hoje eu vi no excelente metablog espanhol <a href="http://gemablog-.blogspot.com/">Gema Blog</a>, uma forma de usar um slideshow sem precisar de hospedagem externa do arquivo em javascript. 
 
Vejam um exemplo neste lindo template da Mamanunes – <a href="http://demo-animal.blogspot.com/">Template Animal</a> 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="http://demo-animal.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_EttevOw0KeE/TM1jHtG-wgI/AAAAAAAALI4/7zYuxhL5H9Q/image%5B5%5D.png?imgmax=800" /></a></div>
  
<div align="center">
<a href="http://demo-animal.blogspot.com/">Demo</a> – <a href="http://blogger-dicasmamanunes.blogspot.com/2010/10/template-animal-blogger-templates.html">Download e Instruções</a> </div>
Para colocar um slideshow em seu blog, antes de mais nada é preciso encontrar as imagens que farão parte do conjunto de slides. No tutorial da amiga Gema, foram utilizadas imagens no tamanho 750 x 250 px. Edite as imagens de sua preferência, usando um site ou programa apropriado e hospede-as no Picasa. 
<ul>
<li><a href="http://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html">Como hospedar imagens no Picasa</a> 
</li>
<li><a href="http://www.dicasblogger.com.br/2010/07/imagem-para-o-cabecalho-do-blogger.html">Imagem para o cabeçalho do Blogger com Photoshop</a> 
</li>
<li><a href="http://www.google.com.br/url?sa=t&source=web&cd=1&ved=0CBkQFjAA&url=http%3A%2F%2Fpixlr.com%2F&ei=9GHNTNCbII-q8Ab8h7CdAQ&usg=AFQjCNFXHCnqgSKhbFb5IdckiuqHXI8c6g&sig2=UiLyr6HL8AG4u9asV0sw2A">Photo editor online - Pixlr.com edit image</a> </li>
</ul>
Faça um <a href="http://www.dicasblogger.com.br/2008/05/backup-template-widgets-blogger.html">backup do template</a>. Vá em design>editar HTML e, usando o comando Crtl+F do teclado,  procure pela tag </head>. Cole antes dela o seguinte código: 
 
<pre><code>
<style>

#slidearea{
height: 250px;
overflow: hidden;
position: relative;
width:980px;
background:#fff;
border:5px solid #fff;
margin:20px 0px 20px 0px;
box-shadow: 0 0 10px #aaa;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
}
ul.kwicks{
margin:0px;
padding:0px 10px;
list-style:none;
}
.kwicks li {
float: left;
width: 196px;
height: 250px;
position:relative;
}
.kwikmet{
position:absolute;
bottom:10px;
left:10px;
right:10px;
display:none;
background:url(http://4.bp.blogspot.com/_q4j3j-JA2ro/TMjDwdoKEbI/AAAAAAAAP3s/J9Ori-ePdao/s1600/trans.png);
padding:10px;
width:710px;
color:#888;
}
.kwikmet h2 a{
color:#fff;
font-size:16px;
font-family:georgia;
font-weight:normal;
padding-bottom:10px;
}
.slidimg{
width:750px;
height:250px;
}
.rounded{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
</style>

Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/
(function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);
//--><!]]></script>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
Conteúdo
</div>
</li>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
Conteúdo
</div>
</li>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
Conteúdo
</div>
</li>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
Conteúdo
</div>
</li>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título</a></h2>
Conteúdo
</div>
</li>
</ul>

<div class='clear'/>
</div></div> </code></pre>
 
A cada slide que você for incluir, faça as seguintes substituições: 
 
<blockquote>
<a href='#'> (coloque o link que será associado à imagem) 
<img alt="" class="slidimg" src="URL da imagem" style="width: 750px; height: 250px;" /> 
</a> (cole a URL e o tamanho da da imagem) 
<div class='kwikmet rounded'> 
<h2><a href='#' rel='bookmark' title=''>Título</a></h2> (dê um título à imagem) 
Conteúdo (escreva uma descrição)</blockquote>
 
Vejam um exemplo, usando o template Style: 
 
<blockquote>
<a href='<a href="http://www.templates.dicasblogger.com.br/2010/09/template-style.html" title="http://www.templates.dicasblogger.com.br/2010/09/template-style.html">http://www.templates.dicasblogger.com.br/2010/09/template-style.html</a>'> (link que será associado à imagem) 
<img alt="" class="slidimg" src="<a href="http://lh5.ggpht.com/_EttevOw0KeE/TJgEV_dZ75I/AAAAAAAAKY4/iB6NWZbRlx8/image16.png?imgmax=800" title="http://lh5.ggpht.com/_EttevOw0KeE/TJgEV_dZ75I/AAAAAAAAKY4/iB6NWZbRlx8/image16.png?imgmax=800">http://lh5.ggpht.com/_EttevOw0KeE/TJgEV_dZ75I/AAAAAAAAKY4/iB6NWZbRlx8/image16.png?imgmax=800</a>" style="width: 750px; height: 250px;" /> 
</a> ( URL e tamanho da imagem) 
<div class='kwikmet rounded'> 
<h2><a href='#' rel='bookmark' title=''>Template Style</a></h2> (título) 
O template Style possui  1 coluna de cada lado etc… (descrição)</blockquote>
<blockquote>
</blockquote>
 
Gostou da caixinha de códigos?Aprendi a fazer lá no Mundo Blogger ;) 
<ul>
<li><a href="http://www.mundoblogger.com.br/2010/10/caixa-de-codigos-personalizada-com.html">CAIXA DE CÓDIGOS PERSONALIZADA COM IMAGEM NO TOPO</a> </li>
</ul>
 
Fonte do tutorial: Gema Blog – <a href="http://gemablog-.blogspot.com/2010/10/otro-slider-de-jquery.html">Otro slider de JQuery</a>

Slideshow no Blogger

A última moda em matéria templates personalizados para o Blogger, é o uso de um slideshow no alto dos posts ou embaixo do cabeçalho. Já ex...

Continue Lendo >>

11:36

Blogger Touch - seu blog no celular

Com o aumento crescente de acessos via telefones celulares, é essencial oferecermos aos nossos visitantes uma versão mobile de nossos blogs. 
É muito chato entrar em um site pelo celular ( no meu caso, pelo iPhone) e não encontrar uma versão apropriada. As fontes ficam pequenas e as imagens distorcidas. 
Em julho deste ano, eu mostrei pra vocês uma forma de exibir blogs do Blogger em versão mobile, própria para celulares - <a href="http://www.dicasblogger.com.br/2010/07/versao-mobile-blogger-blogspot.html">versão mobile de blogs do Blogger/Blogspot</a>. 
O serviço Onbile até que cumpre o que promete, mas notei dois problemas: 
<ol>
<li>não permite desabilitar a versão mobile </li>
<li>aumenta o tempo de carregamento das páginas</li>
</ol>
Ontem, lendo meus feeds, vi que o JMiur, do blog Vagabundia, estava apresentando uma outra opção - <a href="http://vagabundia.blogspot.com/2010/10/blogger-touch-version-del-blog-para.html">Blogger Touch: Versión del blog para móviles</a>. Testei e gostei. 
O <a href="http://bloggertouch.sopili.net/">Blogger Touch</a> trabalha com um script leve, que pode ser inserido diretamente no gadget HTML/javascript dos elementos de página do Blogger. 
 
<table border="1" bordercolor="#cccccc" class="bordasimples" style="width: 550px;"> <tbody>
<tr> <td valign="top" width="272"><img alt="" border="0" height="336" src="http://lh6.ggpht.com/_EttevOw0KeE/TMmydumurkI/AAAAAAAALGw/mrwcj9LeR3I/foto%201.jpg?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="" width="225" /> 
<div align="center">
Versão tradicional</div>
</td> <td valign="top" width="244"><img alt="blogger-touch" border="0" height="334" src="http://lh4.ggpht.com/_EttevOw0KeE/TMmyfyaDn5I/AAAAAAAALG4/p1bTpe1aGBk/foto%202.png?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="" width="223" /> 
<div align="center">
Versão mobile</div>
</td></tr>
</tbody></table>
Para colocar o Blogger Touch em seu blog, clique em <a href="http://bloggertouch.sopili.net/mobile-edition-maker">mobile edition maker</a>. 
Escreva o endereço do seu blog na caixa que aparece em branco. Se você usa domínio próprio, clique em custom domain e escreva o domínio do seu blog. 
<table border="0" cellpadding="2" cellspacing="4" style="width: 555px;"> <tbody>
<tr> <td valign="top" width="277"><img alt="blogger-mobile" border="0" height="91" src="http://lh3.ggpht.com/_EttevOw0KeE/TMmvrqvXuwI/AAAAAAAALG8/-4C5OahVwEQ/blogger-touch-1%5B2%5D.png?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="" width="263" /></td> <td valign="top" width="277"><img alt="blogger-mobile" border="0" height="92" src="http://lh3.ggpht.com/_EttevOw0KeE/TMmvuacMoiI/AAAAAAAALHI/-45SfGyfQc4/blogger-touch%5B2%5D.png?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="" width="276" /></td></tr>
</tbody></table>
Clique no botão go. Você será direcionado para a seguinte página: 
<img alt="blogger-touch-step2" border="0" height="145" src="http://lh5.ggpht.com/_EttevOw0KeE/TMmvwhzZAWI/AAAAAAAALHM/szHmcXQk98Q/blogger-touch-step2%5B6%5D.png?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-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="452" /> 
Na caixa em branco, digite o nome do blog. No exemplo acima, usei o DB Templates. 
A seguir, clique em check availability para verificar se o nome está livre e prossiga 
Na página seguinte, clique em view code e copie todo o código que aparece. 
Entre no painel do Blogger, acesse a guia design e clique em adicionar gadget. Escolha o gadget HTML/javascript, cole o código e salve. 
<table border="0" cellpadding="2" cellspacing="4" style="width: 555px;"> <tbody>
<tr> <td valign="top" width="277"><img alt="blogger-touch-step3" border="0" height="124" src="http://lh6.ggpht.com/_EttevOw0KeE/TMmxK7-15tI/AAAAAAAALHY/wAKlaC4wGZw/blogger-touch-step3%5B3%5D.png?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="" width="262" /></td> <td valign="top" width="277"><img alt="blogger-touch4" border="0" height="125" src="http://lh3.ggpht.com/_EttevOw0KeE/TMm0KZjgGBI/AAAAAAAALHg/BZaN1W_Um74/blogger-touch4%5B3%5D.png?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="" width="247" /></td></tr>
</tbody></table>
Clicando no botão add code, o código será inserido automaticamente no topo do blog. Depois, é só movê-lo para um outro local dos elementos de página. 
Ainda tem mais um passo, mas agora é o último (ufa!). Volte no Blogger Touch e verifique se o código foi instalado corretamente, clicando em verification. 
<a href="http://lh5.ggpht.com/_EttevOw0KeE/TMm34TiuvyI/AAAAAAAALHo/adlJIxgIFu0/s1600-h/blogger-touch-5%5B7%5D.png"><img alt="blogger-touch-5" border="0" height="201" src="http://lh5.ggpht.com/_EttevOw0KeE/TMm35n2pNXI/AAAAAAAALHw/nz2BlALSbbQ/blogger-touch-5_thumb%5B5%5D.png?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="" width="452" /></a> 
O Blogger Touch mostra o título dos posts na página inicial, os marcadores e um botão para desligar a versão mobile. Dentro dos posts vemos o número de comentários e alguns anúncios, porque nem relógio trabalha de graça :) 
<table border="0" cellpadding="2" cellspacing="4" style="width: 555px;"> <tbody>
<tr> <td valign="top" width="185"><a href="http://lh4.ggpht.com/_EttevOw0KeE/TMm7TFe2zoI/AAAAAAAALGU/FRaLOsmn1Bg/s1600-h/foto%203%5B3%5D.png"><img alt="blogger-mobile" border="0" height="234" src="http://lh3.ggpht.com/_EttevOw0KeE/TMm7UOktIjI/AAAAAAAALGc/-lkxilUXC4A/foto%203_thumb%5B1%5D.png?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="" width="156" /></a></td> <td valign="top" width="185"><a href="http://lh5.ggpht.com/_EttevOw0KeE/TMm7VYlyrdI/AAAAAAAALGg/l_tvHQfFjxc/s1600-h/foto%204%5B3%5D.png"><img alt="blogger-mobile" border="0" height="235" src="http://lh6.ggpht.com/_EttevOw0KeE/TMm7XHB8RaI/AAAAAAAALGk/9Qlp82y3xaY/foto%204_thumb%5B1%5D.png?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="" width="157" /></a></td> <td valign="top" width="185"><a href="http://lh6.ggpht.com/_EttevOw0KeE/TMm7Y2EpHZI/AAAAAAAALGo/0hZbdw9rPwY/s1600-h/foto%205%5B3%5D.png"><img alt="blogger-mobile" border="0" height="235" src="http://lh3.ggpht.com/_EttevOw0KeE/TMm7ar6rPsI/AAAAAAAALGs/uPcu8Bpppo4/foto%205_thumb%5B1%5D.png?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="" width="157" /></a></td></tr>
</tbody></table>

Blogger Touch - seu blog no celular

Com o aumento crescente de acessos via telefones celulares, é essencial oferecermos aos nossos visitantes uma versão mobile de nossos blogs....

Continue Lendo >>

16:16

5 encurtadores de URL com estatísticas

Com o sucesso do Twitter, os serviços para encurtar URLs (links) se transformaram em ferramentas indispensáveis, já que, em cada tweet, só podemos usar 140 caracteres e as URLs ocupam muito espaço. 
Já existem centenas de sites encurtadores de URL e vários deles já vêem integrados aos aplicativos mais populares, como TweetDeck, Echofon, Seesmic, Saezuri e etc. 
<blockquote>
Link normal: <a href="http://www.dicasblogger.com.br/2010/10/google-preview.html">http://www.dicasblogger.com.br/2010/10/google-preview.html</a> 
Link encurtado: <a href="http://bit.ly/dsaA7N">http://bit.ly/dsaA7N</a> </blockquote>
Para conseguirem destaque em meio a grande concorrência, alguns serviços estão agregando estatísticas em tempo real. O que isso quer dizer? Que é possível medir o impacto de um tweet ou de um RT frente aos nossos seguidores, através da quantidade de cliques recebidos por um link e/ou através dos retweets ao link. 
<a href="http://lh4.ggpht.com/_EttevOw0KeE/TMmeCLWawuI/AAAAAAAALB0/0MtSRDD8r2Y/s1600-h/image%5B59%5D.png"><img alt="image" border="0" height="189" src="http://lh3.ggpht.com/_EttevOw0KeE/TMmeEnOrguI/AAAAAAAALB4/yaWDEP-QrOs/image_thumb%5B69%5D.png?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="image" width="532" /></a> 
Na imagem acima, vemos um tweet divulgando um post, onde coloquei um link encurtado no bit.ly.  Usando a análise estatística, vemos que o post recebeu 36 cliques, sendo 28 através do link encurtado pelo bit.ly e 34 retweets. 
Selecionei cinco encurtadores de URLs com estatísticas,  para vocês testarem. 
<a href="http://bit.ly/" target="_blank">bit.ly</a> – Após fazer um cadastro, você vai ter acesso a gráficos detalhados, que exibem a quantidade de cliques que seu link recebeu e de onde eles partiram.<a href="http://lh3.ggpht.com/_EttevOw0KeE/TMmZbPARNbI/AAAAAAAALB8/kXkBo6lHswA/s1600-h/image%5B44%5D.png"><img alt="bit.ly" border="0" height="216" src="http://lh4.ggpht.com/_EttevOw0KeE/TMmZcWJtdaI/AAAAAAAALCA/vRNPPi5m7so/image_thumb%5B52%5D.png?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="bit.ly" width="532" /></a> 
<a href="http://goo.gl/">Google URL Shortener</a> – Encurtador de URLs do Google, oferece estatísticas sobre a quantidade de cliques nas últimas duas horas, no dia, na semana e no mês. Para ter acesso às estatísticas, basta usar a sua conta do Google/Blogger. É super prático. 
<a href="http://lh4.ggpht.com/_EttevOw0KeE/TMmZkDlSc5I/AAAAAAAALCI/a2YjVBwmQJ4/s1600-h/image%5B48%5D.png"><img alt="Google URL Shortener " border="0" height="270" src="http://lh6.ggpht.com/_EttevOw0KeE/TMmZl3oZZlI/AAAAAAAALCQ/a2Ujn1vJtsU/image_thumb%5B56%5D.png?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="Google URL Shortener " width="532" /></a> 
<a href="http://migre.me/" target="_blank">migre.me</a> – Pioneiro entre os encurtadores nacionais, o Migre.me permite acesso aos  cliques através desta url: http://migre.me/@seu_usuário. Na página incial, vemos os links recentes, os mais retuitados e os mais clicados. 
<a href="http://lh4.ggpht.com/_EttevOw0KeE/TMmeMkUI7mI/AAAAAAAALCY/IsIHKm9GMio/s1600-h/image%5B50%5D.png"><img alt="migre.me" border="0" height="238" src="http://lh3.ggpht.com/_EttevOw0KeE/TMmeO-CSnLI/AAAAAAAALCc/5DQ_i8t8X1M/image_thumb%5B58%5D.png?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="migre.me" width="532" /></a> 
<a href="http://zapt.in/">Zapt.In</a> – Trata-se de um serviço nacional, idealizado pelo Manoel Lemos, do BlogBlogs. O serviço possui rankings de tweets e RTs e pode ser facilmente inserido na barra de favoritos do seu navegador apenas arrastando um ícone. 
<a href="http://lh3.ggpht.com/_EttevOw0KeE/TMmZo1L6BQI/AAAAAAAALBk/2qI8G2IePUY/s1600-h/image%5B30%5D.png"><img alt="zapt.in" border="0" height="276" src="http://lh6.ggpht.com/_EttevOw0KeE/TMmZstv-zhI/AAAAAAAALBo/WEzgltIPouI/image_thumb%5B40%5D.png?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="zapt.in" width="532" /></a> 
<a href="http://bitw.in/" target="_blank">bitw.in</a> – Idealizado e mantido por dois metabloggers, o Bitw.in vem passando por reformulações. Mostra as estatísticas de links individuais, mediante um cadastro, bem como os links mais recentes, mais clicados e retuitados das últimas 48 horas. 
<a href="http://lh6.ggpht.com/_EttevOw0KeE/TMmZuxk5b7I/AAAAAAAALCg/GDjk4SLzONg/s1600-h/image%5B54%5D.png"><img alt="bitw.in" border="0" height="305" src="http://lh5.ggpht.com/_EttevOw0KeE/TMmZxheFW_I/AAAAAAAALCk/n4w2YOIKYnI/image_thumb%5B62%5D.png?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="bitw.in" width="532" /></a> 
Se vocês quiserem recomendar outros serviços que encurtam URLs e que mostram as estatísticas de cliques e de Rts, deixem um comentário com o endereço do site.

5 encurtadores de URL com estatísticas

Com o sucesso do Twitter, os serviços para encurtar URLs (links) se transformaram em ferramentas indispensáveis, já que, em cada tweet, só p...

Continue Lendo >>

13:42

Google Preview - nova funcionalidade do Google

Recentemente, e sem grande alarido, o Google começou a liberar para alguns usuários a função Google Preview, que nada mais é do que a inserção de uma miniatura do site que aparece nos resultados de pesquisas. Como exemplo, temos uma pesquisa por "dicas blogger", onde aparece do lado direito o preview do DicasBlogger: 
 
<a href="http://lh4.ggpht.com/_c1Bv1rmLa6M/TMg0k-w8rJI/AAAAAAAAHBs/gmO_qWbR8P0/s1600-h/google%20preview%202%5B4%5D.png"><img alt="google preview" border="0" height="250" src="http://lh3.ggpht.com/_c1Bv1rmLa6M/TMg0mDIKjLI/AAAAAAAAHBw/wc0q4oZt7iY/google%20preview%202_thumb%5B2%5D.png?imgmax=800" style="border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="google preview" width="480" /></a> 
A funcionalidade é bastante interessante, vai dar uma idéia para o usuário de como é o site ou blog em questão. Ao passar o cursor pela área em volta do link a cor fica azulada, como mostra a figura abaixo: 
 
<a href="http://lh6.ggpht.com/_c1Bv1rmLa6M/TMg0m612NuI/AAAAAAAAHB0/CY6VexbCFCo/s1600-h/google%20preview%201%5B4%5D.png"><img alt="google preview" border="0" height="186" src="http://lh5.ggpht.com/_c1Bv1rmLa6M/TMg0n6hNrqI/AAAAAAAAHB4/lKShsPL6n0k/google%20preview%201_thumb%5B2%5D.png?imgmax=800" style="border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="google preview" width="480" /></a> 
 
Ao clicar em qualquer parte desta zona azul, aparece o thumbail (miniatura do site) e a função preview é ativada. A partir daí, é só passar o cursor sobre os outros links nos resultados da pesquisa que as miniaturas aparecem automaticamente. Para desativar basta clicar em qualquer outra zona da página, as miniaturas deixam de aparecer. Para aceder à página desejada o usuário poderá clicar diretamente no link dos resultados de pesquisa ou na miniatura. 
 
Isto irá influenciar bastante o utilizador quando fizer alguma pesquisa, a aparência do site vai acabar determinando se será clicado ou não. Durante os nossos testes também foi possível observar alguns pormenores, como por exemplo sites com o fundo escuro, ficam menos favorecidos nas miniaturas. O logotipo dos sites e blogs também ganham uma importância maior, a presença de palavras chave em tamanho grande no logotipo também pode influenciar os usuários: quanto mais visível, melhor. 
 
Nos próximos tempos com a liberação do Google Preview para todos os utilizadores vai ser possível determinar que alterações devem ser feitas em cada site ou blog para que adquiram maior visibilidade. As páginas que aparecem nas miniaturas também não podem ser alteradas, são escolhidas de acordo com o algorítimo secreto do Google e ainda não há informações se futuramente webmasters e donos de blogs poderão mudar as imagens que são apresentadas.

Google Preview - nova funcionalidade do Google

Recentemente, e sem grande alarido, o Google começou a liberar para alguns usuários a função Google Preview , que nada mais é do que a inser...

Continue Lendo >>

12:31

Como salvar arquivos do Word 2007 em PDF

Esta dica é muito interessante. Existe um plugin para o Office 2007, lançado pela própria Microsoft, que converte e salva em PDF, arquivos criados no Word. 
O  Microsoft Save as PDF or XPS está disponível para download em: 
<ul>
<li><a href="http://info.abril.com.br/download/4719.shtml">Info Downloads</a> </li>
<li><a href="http://www.microsoft.com/downloads/details.aspx?familyid=4d951911-3e7e-4ae6-b059-a2e79ed87041&displaylang=pt-br">Central de downloads da Microsoft</a></li>
</ul>
Depois de instalar o plugin, crie o texto no Word, selecione salvar (ícone em formato de disquete), escolha salvar como e clique em PDF ou XPS. 
<img alt="word-pdf-converter" border="0" height="218" src="http://lh6.ggpht.com/_EttevOw0KeE/TMcSFoxAISI/AAAAAAAAK_4/Ax0ZTHDYzFQ/image%5B23%5D.png?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="salvar o arquivo em PDF" width="532" /> 
Escolha o local onde irá salvar o PDF, dê um nome a ele e clique no botão publicar 
<img alt="image" border="0" height="234" src="http://lh6.ggpht.com/_EttevOw0KeE/TMcSKGj6vkI/AAAAAAAAK_8/O1NDI7FA7T0/image%5B25%5D.png?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="image" width="532" /> 
O plugin funciona nos seguintes programas da suíte Office 2007: 
<blockquote>
Microsoft Office Access 2007 
Microsoft Office Excel 2007 
Microsoft Office InfoPath 2007 
Microsoft Office OneNote 2007 
Microsoft Office PowerPoint 2007 
Microsoft Office Publisher 2007 
Microsoft Office Visio 2007 
Microsoft Office Word 2007</blockquote>
Um luxo, não? É o tipo de aplicativo que merece ser guardado por muito tempo. 
Você deve estar se perguntando qual é a utilidade disso para um blogueiro, certo? Bom, existem inúmeras utilidades, já que blogueiros estudam, trabalham e, certamente, mais cedo ou mais tarde, vão precisar converter arquivos do Word para PDF.  Entretanto, a principal utilidade se refere à criação de um belo <a href="http://www.dicasblogger.com.br/2010/01/o-que-e-midia-kit-e-como-criar-um.html">Midia Kit</a> ;)

Como salvar arquivos do Word 2007 em PDF

Esta dica é muito interessante. Existe um plugin para o Office 2007, lançado pela própria Microsoft, que converte e salva em PDF, arquivos c...

Continue Lendo >>

15:38

Envie artigos do Google Reader para o Twitter

Se você é um jurássico (a) como eu e ainda lê seus feeds diariamente pelo Google Reader, saiba que é possível compartilhá-los com seus seguidores do Twitter. 
Entre em sua conta do Google Reader e clique em ítens compartilhados (menu de links à esquerda). Procure por configurações de compartilhamento. 
<img alt="GoogleReader" border="0" height="151" src="http://lh4.ggpht.com/_EttevOw0KeE/TMYPewoO9oI/AAAAAAAAK8k/8JbKp9SS9mY/greader-twitter%5B7%5D.jpg?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-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Itens Compartilhados" width="552" /> 
Na janela das configurações, clique no link página de ítens compartilhados. 
<img alt="shared-google-reader" border="0" height="140" src="http://lh6.ggpht.com/_EttevOw0KeE/TMYPgaLyq9I/AAAAAAAAK8o/-tMkVuVuTn0/shared-google-reader%5B7%5D.jpg?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-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Página dos ítens compartilhados" width="552" /> 
Na nova página, clique com o botão direito do mouse em feed atom e copie o link 
<img alt="feed-atom" border="0" height="190" src="http://lh5.ggpht.com/_EttevOw0KeE/TMYPiSkVWaI/AAAAAAAAK80/jXT0k-4KzE0/feed-atom%5B12%5D.jpg?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="Copiar link do feed" width="552" /> 
Agora vá em sua conta do <a href="http://feedburner.google.com/">Google FeedBurner</a> e cole o link que você acabou de copiar, dentro da caixa Burn a feed right this instant. Você está criando um novo feed para seus ítens compartilhados do Google Reader. 
<img alt="feedburner" border="0" height="154" src="http://lh3.ggpht.com/_EttevOw0KeE/TMYPkDh8aQI/AAAAAAAAK84/OtmvqIaSONk/image%5B8%5D.png?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="Criar um novo feed" width="552" /> 
Configure o novo feed. Depois de pronto, clique na aba publicize. Na coluna da esquerda, encontre o link Socialize e faça as configurações, conforme expliquei neste post: <a href="http://www.dicasblogger.com.br/2009/12/socialize-twitter-feedburner.html">Socialize - envie posts ao Twitter pelo FeedBurner</a> 
Caso você não saiba queimar um feed, acesse: <a href="http://www.dicasblogger.com.br/2009/10/usar-e-configurar-feedburner.html">Como usar e configurar o FeedBurner</a> 
Quando você quiser compartilhar algum artigo legal com seus seguidores do Twitter, clique no link compartilhar, que fica no rodapé dos feeds do Google Reader. 
<img alt="shared" border="0" height="240" src="http://lh4.ggpht.com/_EttevOw0KeE/TMYSrBQlPvI/AAAAAAAAK9E/iphyGZ-bppM/shared%5B7%5D.jpg?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="Compartilhar artigo" width="552" /> 
O post/artigo será enviado em forma de tweet, automaticamente, para o Twitter.

Envie artigos do Google Reader para o Twitter

Se você é um jurássico (a) como eu e ainda lê seus feeds diariamente pelo Google Reader, saiba que é possível compartilhá-los com seus segui...

Continue Lendo >>

21:29

Novo FeedBurner mostra estatísticas em tempo real

O <a href="http://feedburner.google.com/">Google FeedBurner</a> – melhor serviço para criar e gerenciar feeds – está com uma nova interface experimental, na qual mostra as estatísticas de acesso em tempo real. 
A informação foi publicada no blog oficial do AdSense - <a href="http://adsenseforfeeds.blogspot.com/2010/10/your-stats-right-away.html">Your stats, right away</a> 
Para testar a nova interface, acesse este link:  <a href="http://feedburner.google.com/gfb/">interface experimental do FeedBurner</a> 
Na página inicial (home), nos deparamos com algumas mensagens e, logo abaixo, aparecem os posts mais lidos do dia. Clicando na aba feeds, aparecerão todos os blogs ou sites cadastrados. É aí que começa a diversão. 
<img alt="new-feed-burner" border="0" height="199" src="http://lh6.ggpht.com/_EttevOw0KeE/TMX-5aFbtQI/AAAAAAAAK7s/bm4ilczUOpA/new-feed-burner%5B7%5D.jpg?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="Nova interface do FeedBurner" width="552" /> 
Para ver as estatísticas em tempo real, clique sobre um dos feeds cadastrados. 
Aparecerá uma janela com os dados dos últimos 30 dias, tal como no Analytics: 
<img alt="novo-feed-burner" border="0" height="275" src="http://lh3.ggpht.com/_EttevOw0KeE/TMX-7wROdkI/AAAAAAAAK70/zM2vEDEb_Wg/image%5B16%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="Estatísticas" width="552" /> 
Navegando pelo menu de links que fica à esquerda – overview – teremos acesso a: 
<ul>
<li>Top Items:  ítens mais acessados </li>
<li>Top Countries: países que enviam mais visitantes </li>
<li>Top Referrers:  de onde partem os acessos </li>
<li>Subscribers: de quais agregadores partem os acessos </li>
<li>Configure Analytics: configurações básicas das estatísticas</li>
</ul>
Clicando em cada um dos Top Items, veremos quais os dias em que os posts foram mais acessados e quantos cliques eles receberam. 
<img alt="novo-feedburner" border="0" height="167" src="http://lh6.ggpht.com/_EttevOw0KeE/TMX--J9EA6I/AAAAAAAAK74/2u9LMhSHlH8/image%5B17%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="Estatísticas de cada post" width="552" /> 
Se você não sabe usar o FeedBurner, acesse: <a href="http://www.dicasblogger.com.br/2009/10/usar-e-configurar-feedburner.html">Como usar e configurar o FeedBurner</a> 
Eu gostei muito da nova interface e dos recursos de estatísticas. Agora dá para ter idéia da conversão real dos acessos x o número de assinantes de feeds. 
E essa foi mais uma das grandes sacadas da gigante de Mountain View ;)

Novo FeedBurner mostra estatísticas em tempo real

O Google FeedBurner – melhor serviço para criar e gerenciar feeds – está com uma nova interface experimental, na qual mostra as estatística...

Continue Lendo >>

20:03

Como usar o novo Twitter

<img alt="logo-new-twitter-" border="0" height="140" src="http://lh5.ggpht.com/_EttevOw0KeE/TMQtQqpeIrI/AAAAAAAAK5w/UTEz4pdj7Cc/logo-new-twitter-1%5B5%5D.png?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-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="574" /> 
<div align="center">
Como usar o Novo Twitter – dicas e novidades </div>
O Novo Twitter  (new twitter) já está disponível para todos os usuários e, em breve, não será mais possível voltar para o antigo twitter: 
<ul>
<li><a href="http://blogs.estadao.com.br/rodrigo-martins/2010/10/15/usuarios-nao-poderao-mais-usar-versao-antiga-do-twitter/">Usuário não poderá mais optar por versão antiga do Twitter</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/10/como-voltar-para-o-antigo-twitter.html">Como voltar para o antigo Twitter</a></li>
</ul>
Sendo assim, resolvi fazer este tutorial explicando como mexer no Novo Twitter, mostrando o que mudou e como encontrar os novos e antigos recursos do Twitter.  
Pra quem já usava o Twitter há bastante tempo, não existem grandes segredos. Tudo que tinha no velho Twitter, também tem no novo, só que em lugares diferentes. 
Para começar a usar o novo Twitter, clique em try it now! 
(Clique sobre as imagens para ampliá-las) 
<table border="0" cellpadding="2" cellspacing="4" style="width: 555px;"> <tbody>
<tr> <td valign="top" width="277"><a href="http://lh6.ggpht.com/_EttevOw0KeE/TMQjN2dGjZI/AAAAAAAAK3k/6kGo2-U33w0/s1600-h/image%5B1%5D.png"><img alt="older-twitter" border="0" height="135" src="http://lh6.ggpht.com/_EttevOw0KeE/TML-5La7XvI/AAAAAAAAK3o/uthOHUhR64U/image_thumb.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Antigo Twitter" width="259" /></a></td> <td valign="top" width="277"><a href="http://lh3.ggpht.com/_EttevOw0KeE/TML-7N68v7I/AAAAAAAAK3w/2r98dRT8m70/s1600-h/image5%5B5%5D.png"><img alt="new-twitter" border="0" height="135" src="http://lh6.ggpht.com/_EttevOw0KeE/TML-8ivVfQI/AAAAAAAAK34/vFnJBMCjdTY/image5_thumb%5B4%5D.png?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-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Novo Twitter" width="266" /></a></td></tr>
</tbody></table>
Como escrever e atualizar tweets no Novo Twitter 
Escreva sua mensagem na caixa What’s a happening e clique no botão Tweet 
<a href="http://lh6.ggpht.com/_EttevOw0KeE/TML-9utNi3I/AAAAAAAAK38/q8dG5lPXepQ/s1600-h/image11%5B2%5D.png"><img alt="post-tweets" border="0" height="164" src="http://lh6.ggpht.com/_EttevOw0KeE/TML--ogVXeI/AAAAAAAAK4E/vV-ZCjP2RRc/image11_thumb%5B1%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Postar um tweet" width="532" /></a> 
Como enviar retweets no Novo Twitter 
Passe o mouse sobre o tweet que será retuitado e clique em retweet 
<a href="http://lh5.ggpht.com/_EttevOw0KeE/TML_AobAA8I/AAAAAAAAK4M/Kj2gUHJzUbU/s1600-h/image16%5B2%5D.png"><img alt="twitter-retweet" border="0" height="181" src="http://lh5.ggpht.com/_EttevOw0KeE/TML_BpUASzI/AAAAAAAAK4U/LjHS1pVT87I/image16_thumb%5B1%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Retuitar um tweet" width="532" /></a> 
Como ler as respostas (mentions) e os Rts que recebemos 
Navegue pelo menu que fica embaixo da caixa de atualizações: 
<a href="http://lh6.ggpht.com/_EttevOw0KeE/TML_Ow9wLhI/AAAAAAAAK4g/DQVsrxTIna4/s1600-h/image26%5B2%5D.png"><img alt="menu-twitter" border="0" height="134" src="http://lh5.ggpht.com/_EttevOw0KeE/TML_P61TXlI/AAAAAAAAK4o/9DGnPzatkIw/image26_thumb%5B1%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Menu " width="532" /></a> 
Como ler e enviar as Direct Messages (DM) 
Acesse o menu que fica do lado esquerdo do seu nome e avatar: 
<a href="http://lh5.ggpht.com/_EttevOw0KeE/TMQjVxnZ-yI/AAAAAAAAK4w/dVOLGm2XG84/s1600-h/dm%5B6%5D.jpg"><img alt="dm-twitter" border="0" height="165" src="http://lh3.ggpht.com/_EttevOw0KeE/TMQjWi1wccI/AAAAAAAAK40/bD1iJKzTomo/dm_thumb%5B3%5D.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Enviar DMs" width="532" /></a> 
Como mudar as configurações da conta e do perfil 
Clique na setinha que fica do lado direito do seu nome e procure por settings 
<a href="http://lh4.ggpht.com/_EttevOw0KeE/TMQjXQGSW9I/AAAAAAAAK44/5Eob9JnnyAQ/s1600-h/settings-twitter%5B6%5D.jpg"><img alt="settings-twitter" border="0" height="188" src="http://lh4.ggpht.com/_EttevOw0KeE/TMQjYZgq0MI/AAAAAAAAK48/J1eLhOt6qEg/settings-twitter_thumb%5B3%5D.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Configurar conta" width="532" /></a> 
<a href="http://lh6.ggpht.com/_EttevOw0KeE/TMQjZIZ5hsI/AAAAAAAAK5A/f7bkrO346Qs/s1600-h/image%5B8%5D.png"><img alt="account-twitter" border="0" height="115" src="http://lh6.ggpht.com/_EttevOw0KeE/TMQjaLgpe_I/AAAAAAAAK5E/R_LNZW9Xmc0/image_thumb%5B9%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Gerenciar conta" width="532" /></a> 
Dentro das configurações, temos algumas novidades. Agora é possível ver fotos e vídeos diretamente da página do Twitter. Para ativar esse recurso, acesse settings>account e marque a caixa Show photos and videos from everyone 
Para mostrar de onde você está tuitando, marque a caixa Add a location to your tweets; para proteger seus tweets, marque Protect my tweets. 
Para mudar sua senha, clique na aba password. Para fazer alterações em seu perfil, clique em profile. Para mudar o plano de fundo, acesse a aba design 
<ul>
<li><a href="http://www.baixaki.com.br/info/6010-como-personalizar-o-plano-de-fundo-do-novo-twitter.htm">Como personalizar o plano de fundo do novo Twitter</a> (via Baixaki)</li>
</ul>
Na aba connections, iremos escolher e gerenciar quais aplicações externas que terão acesso à nossa conta. É muito importante verificar, periodicamente, essa aba, a fim de evitar malwares e invasões. 
<ul>
<li><a href="http://meiobit.com/37406/cuidados-para-n-o-perder-sua-conta-no-twitter/">Cuidados para não perder sua @conta no Twitter</a> (via Meio Bit)</li>
</ul>
Como criar e gerenciar listas no Novo Twiter 
Para ver suas listas, acesse o menu que fica em baixo da caixa de tweets, clique na setinha que fica do lado direito de Lists e depois clique em lists by you 
<a href="http://lh3.ggpht.com/_EttevOw0KeE/TMQjaxTH9II/AAAAAAAAK5I/_MX2kP951WU/s1600-h/lists-twitter%5B9%5D.jpg"><img alt="lists-twitter" border="0" height="163" src="http://lh5.ggpht.com/_EttevOw0KeE/TMQjbuZCuEI/AAAAAAAAK5M/Ipg-XRyMHVk/lists-twitter_thumb%5B6%5D.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Gerenciar listas" width="532" /></a> 
Para criar, editar ou apagar uma lista, veja a imagem abaixo: 
<a href="http://lh5.ggpht.com/_EttevOw0KeE/TMQjcSWnrlI/AAAAAAAAK5Q/8vQp3bkl35k/s1600-h/list-twitter%5B11%5D.jpg"><img alt="list-twitter" border="0" height="254" src="http://lh5.ggpht.com/_EttevOw0KeE/TMQjdVQToAI/AAAAAAAAK5U/KCELFtdi-3Q/list-twitter_thumb%5B8%5D.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Criar listas" width="532" /></a> 
Como gerenciar follower e following (seguidores e seguidos) 
Acesse o menu que fica do lado esquerdo do seu nome e clique em profile. 
Em profile, é possível também editar o perfil,  as listas e os favoritos 
<a href="http://lh5.ggpht.com/_EttevOw0KeE/TMQjeR63u_I/AAAAAAAAK5Y/vvx4pTELLww/s1600-h/edit-profile-twitter%5B8%5D.jpg"><img alt="edit-profile-twitter" border="0" height="232" src="http://lh6.ggpht.com/_EttevOw0KeE/TMQjfFjdVYI/AAAAAAAAK5c/9u2FYUNzuqo/edit-profile-twitter_thumb%5B5%5D.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Editar e gerenciar perfil" width="532" /></a> 
Uma forma ainda mais simples de gerenciar followers e followings, é clicando no avatar. Abrirá uma nova janela à direita, com todas as opções de configuração: 
<a href="http://lh3.ggpht.com/_EttevOw0KeE/TMQjgFLCvyI/AAAAAAAAK5g/brQk7Cc7qlk/s1600-h/edit-followers%5B8%5D.jpg"><img alt="edit-followers-new-twitter" border="0" height="236" src="http://lh3.ggpht.com/_EttevOw0KeE/TMQjgytfcGI/AAAAAAAAK5k/mXTQq55jlfE/edit-followers_thumb%5B5%5D.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Gerenciar seguidos e seguidores" width="532" /></a> 
Como trocar a minha foto no Novo Twitter 
Clique em profile>edit your profile>profile>change image>selecionar arquivo. 
<a href="http://lh3.ggpht.com/_EttevOw0KeE/TMQnGX7JXMI/AAAAAAAAK5o/SrFcIlbrcLk/s1600-h/change-image-new-twitter%5B6%5D.jpg"><img alt="change-image-new-twitter" border="0" height="207" src="http://lh6.ggpht.com/_EttevOw0KeE/TMQnHJRJW6I/AAAAAAAAK5s/ncUMohhXLr8/change-image-new-twitter_thumb%5B3%5D.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Trocar foto Novo Twitter" width="532" /></a> 
Selecione a foto dentro do seu computador e clique no botão save. 
Para tirar dúvidas sobre sobre o funcionamento geral do Twitter, acesse: 
<ul>
<li><a href="http://www.dicasblogger.com.br/search/label/Twitter">http://www.dicasblogger.com.br/search/label/Twitter</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/10/colocar-comentario-rt-twitter.html">Twitter - Como enviar RT com comentário</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/03/como-mudar-nome-username-twitter.html">Como mudar o nome de usuário (username) no twitter</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/11/como-criar-listas-no-twitter.html">Como criar listas no Twitter</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/09/as-hashtags-e-linguagem-twitter.html">As # hashtags e a linguagem no Twitter</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/07/como-usar-o-twitter.html">O que é e como usar o Twitter</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/06/dicas-twitter-duvidas-frequentes_19.html">Dicas Twitter - dúvidas frequentes</a> </li>
<li><a href="http://www.dicasblogger.com.br/2009/02/como-usar-o-twitter-um-guia-para.html">Como usar o Twitter – um guia para iniciantes</a></li>
</ul>
Com relação ao Novo Twitter, acredito que não ficou faltando nada, mas sinta-se à vontade para refrescar minha memória através da caixa de comentários :) 
<a href="http://twitter.com/dicas_blogger"><img alt="twitter-follow" border="0" height="111" src="http://lh5.ggpht.com/_EttevOw0KeE/TLPRpLuZyVI/AAAAAAAAKto/SYZwm9E9Kqs/twitter_exc2%5B5%5D.png?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-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Siga o Dicas Blogger!" width="224" /></a> 
<div align="center">
<a href="http://twitter.com/dicas_blogger">http://twitter.com/dicas_blogger</a></div>

Como usar o novo Twitter

Como usar o Novo Twitter – dicas e novidades O Novo Twitter (new twitter) já está disponível para todos os usuários e, em breve, não...

Continue Lendo >>

11:03

CSS3 - efeito gradiente/degradê

<div align="left">
Artigo de Marco Damaceno –<a href="http://www.dicasbrowser.com/">Dicas Browser</a> – @<a href="http://twitter.com/dicasbrowser">dicasbrowser</a></div>
Algo que todo blogueiro deve se preocupar é se seu blog está bem estruturado. Isso é muito importante! Depois de ter este blog estruturado, ou seja, organizado, é hora de partir para os enfeites para dar maior beleza à obra. 
Vou falar sobre como usar o efeito gradiente em seu layout de uma forma bem fácil que você vai passar a usar em seu blog. 
Primeiramente, é preciso saber o que significa o efeito gradiente ou degradê: 
<blockquote>
"Degradê ou dégradé é uma sequencia de tons contínuos, podendo ser limitado ou ilimitado. Significa o mesmo que gradiente"</blockquote>
Fonte: <a href="http://pt.wikipedia.org/wiki/Degrad%C3%AA" target="_blank">Wikipedia</a> 
Veja um exemplo de degradê na imagem abaixo: 
<div style="height: 0.01%; width: 574px;">
<img src="http://lh3.ggpht.com/_0lCpg_jMUQs/TMLfn0J9pAI/AAAAAAAABn8/PqWEdFoLbig/degrade.jpg" style="display: inline;" /></div>
Repare que a transição do vermelho para o azul é feita de forma suave sem um limite definido para ambas as cores. Isso é um efeito gradiente ou degradê. 
Hoje, com o suporte ao CSS3 fornecido pelos navegadores mais atuais, esse tipo de efeito se torna cada vez mais comum na internet. Vejamos os principais navegadores que suportam o efeito gradiente: 
Firefox 3.6 em diante Google Chrome Safari Internet Explorer 7 em diante 
Cada um desses navegadores utilizam códigos diferentes para mostrar o efeito gradiente. Há três formas de se obter o efeito: vertical, horizontal e radial. Vejamos a estrutura básica de cada um em seus respectivos navegadores: 
Firefox 
<blockquote>
background: -moz-[linear ou radial]-gradient([posição], [cor inicial], [cor final]) 
background: -moz-linear-gradient (top, #CF0000 , #0000FF) /*-- efeito vertical --*/ background: -moz-linear-gradient (left, #CF0000 , #0000FF) /*-- efeito horizontal --*/ background: -moz-radial-gradient (70% 50%, circle [atributo de tamanho], #CF0000, #0000FF) /*-- efeito radial ou central --*/</blockquote>
Se não for determinada uma posição para o efeito, será usado o padrão como de cima para baixo para o vertical, da esquerda para a direita para o horizontal e central para o radial. 
No efeito gradiente radial para o Firefox, é possível determinar onde estará o foco. Para isso, basta inserir dois valores em % no lugar da posição. O primeiro servirá para a posição horizontal e o segundo para a vertical. Veja o exemplo: 
<blockquote>
background: -moz-radial-gradient(50% 50%, circle closest-side #CF0000, #0000FF) /*-- aparece no centro --*/</blockquote>
Todos os atributos para se utilizar efeito gradiente no Firefox se encontram no <a href="https://developer.mozilla.org/en/CSS/-moz-radial-gradient" target="_blank">Mozilla Developer Center</a> 
Google Chrome e Safari 
<blockquote>
background: -webkit-gradient ([linear ou radial], [posição inicial], [posição final], color-stop([espaço em %], [cor inicial]), color-stop([espaço em %], [cor final])) 
background: -webkit-gradient (left top, left bottom, color-stop(80%, #CF0000), color-stop(20%, #0000FF)) /*-- efeito vertical --*/ background: -webkit-gradient (left top, right top, color-stop(80%, #CF0000), color-stop(20%, #0000FF)) /*-- efeito horizontal --*/</blockquote>
O degradê de navegadores webkit nos faz usar um pouco de matemática para a sua aplicação. Como pode ver, nesse nosso exemplo a cor #CF0000 (vermelho) possui 80% de espaço dentro do elemento em que está. O #0000FF tem 20%. O espaço da transição entre uma cor e outra, ou seja, do degradê, será a diferença entre 80% e 20% que é 60%. Logo, o tamanho do espaço do degradê será de 60%. 
Pegamos um outro exemplo, observe o código abaixo: 
<blockquote>
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#cf0000), color-stop(90%,#0000ff))</blockquote>
Nesse exemplo, a cor #CF0000 (vermelho) ocupa 50% do espaço. Já a #0000FF (azul) terá 100% (tamanho total do elemento) - 90% de espaço que dá um total de 10%. Os 40% restantes ficam para o espaço de transição entre as cores. 
Para o efeito radial do degradê para navegadores webkit, o código é um pouco mais complicado. Vejamos a estrutura básica: 
<blockquote>
background: -webkit-gradient(radial, [posição x cor1] [posição y cor1], [intensidade cor1], [posição x cor2] [posição y cor2], [intensidade cor2], from([cor1]), to([cor2]))</blockquote>
Para se formar um círculo perfeito é preciso que x de cor1 seja igual ao x de cor2 e y de cor1 seja igual ao y de cor2. Esses valores devem ser dados em %. Sendo assim, x determina a posição horizontal do foco e y determina a posição vertical. 
O terceiro valor se refere a intensidade do degradê. Quanto mais alto for o valor, maior será o campo de transição entre uma cor e outra. 
Veja como ficaria o código do efeito no exemplo abaixo: 
<blockquote>
background: -webkit-gradient(radial, 70% 50%, 90, 70% 50%, 10, from(#CF0000), to(#0000FF));</blockquote>
Internet Explorer 
O Internet Explorer sempre foi limitado em efeitos do CSS3, mas, mesmo assim, existe código para degradê destinado a ele. Vejamos a estrutura básica: 
<blockquote>
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='[cor inicial]', endColorstr='[cor final]', GradientType=0) para efeito vertical filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='[cor inicial]', endColorstr='[cor final]', GradientType=1) para efeito horizontal</blockquote>
Então, para o nosso exemplo, o código ficaria assim: 
<blockquote>
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CF0000', endColorstr='#0000FF', GradientType=0) /*-- degradê vertical --*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CF0000', endColorstr='#0000FF', GradientType=1) /*-- degradê horizontal --*/</blockquote>
Infelizmente, o Intenet Explorer não enxerga gradiente radial como o Firefox e Google Chrome. Pode ser que o IE 9 acrescente mais código para obter este tipo de efeito em sua versão final. 
O efeito 
Agora, veja todos os exemplos que foram dados. Somente o gradiente radial não poderá ser visto no Internet Explorer. Quem usa o Opera e outros navegadores sem suporte verá um fundo vermelho: 
Vertical 
<a href="http://lh3.ggpht.com/_EttevOw0KeE/TMQ1_VBx5PI/AAAAAAAAK50/YHhUdyQBpS8/s1600-h/vertical%5B4%5D.png"><img alt="vertical" border="0" height="215" src="http://lh5.ggpht.com/_EttevOw0KeE/TMQ2AUm7eRI/AAAAAAAAK54/mI4M4hivshk/vertical_thumb%5B2%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="vertical" width="422" /></a> 
<div id="box-vertical">
</div>
Horizontal 
<a href="http://lh4.ggpht.com/_EttevOw0KeE/TMQ2BJqrysI/AAAAAAAAK58/oHOyjxLqfQg/s1600-h/horizontal%5B4%5D.png"><img alt="horizontal" border="0" height="222" src="http://lh3.ggpht.com/_EttevOw0KeE/TMQ2CGK-upI/AAAAAAAAK6A/JbQ9szDfV5I/horizontal_thumb%5B2%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="horizontal" width="417" /></a> 
<div id="box-horizontal">
</div>
Radial 
<a href="http://lh4.ggpht.com/_EttevOw0KeE/TMQ2C4fQRdI/AAAAAAAAK6E/aeeD_gYkY84/s1600-h/radial%5B4%5D.png"><img alt="radial" border="0" height="217" src="http://lh5.ggpht.com/_EttevOw0KeE/TMQ2DtaeBkI/AAAAAAAAK6I/ylvdRNlGV3U/radial_thumb%5B2%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="radial" width="414" /></a> 
<div id="box-radial">
</div>
Como aplicar o efeito gradiente no blog 
Para aplicar o efeito, é preciso entender que existem navegadores que ainda não tem suporte para esse efeito como, por exemplo, o Opera. Para contornar esse problema, usamos dois tipos de códigos para o background. Um servirá para os que suportam degradê e o outro não. Fica, então, assim: 
<blockquote>
background: #CF0000; background: -moz-linear-gradient(top, #CF0000 , #0000FF); background: -webkit-gradient (left top, left bottom, color-stop(80%, #CF0000), color-stop(20%, #0000FF)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CF0000', endColorstr='#0000FF', GradientType=0);</blockquote>
Observe que há o código destinado ao Google Chrome, Safari, Firefox, Internet Explorer. Caso o navegador não suporte o efeito, ele vai usar o background da primeira linha. 
Para aplicar em seu blog, faça backup do layout antes de qualquer modificação. Depois, vá em Design > Designer do modelo > Avançado. No campo em branco cole o código abaixo mudando as cores que deseja para o seu blog: 
<blockquote>
#header-wrapper     background: #CF0000;     background: -moz-linear-gradient(top, #CF0000 , #0000FF);     background: -webkit-gradient (left top, left bottom, color-stop(80%, #CF0000), color-stop(20%, #0000FF));     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CF0000', endColorstr='#0000FF', GradientType=0); }</blockquote>
Clique em Aplicar ao blog. 
Recomendo que aplique este efeito em um blog de testes para se habituar. Depois que entender e dominar o código, a sua aplicação se torna bem mais fácil. 
Para aqueles que não souberem onde escolher as cores, existe uma <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm" target="_blank">tabela de cores da web</a> com várias opções. Com certeza, irá te ajudar na hora de aplicar o efeito. 
Espero que tenham gostado desse tutorial de gradiente em CSS3 e também espero que muitos de vocês usem esse recurso que pode dar aquele toque a mais no seu blog. 
Abraço a todos 
Sobre o autor: <a href="http://twitter.com/dicasbrowser">Marco Damaceno</a> é editor do excelente <a href="http://www.dicasbrowser.com/">Dicas Browser</a> – blog especializado em dicas, novidades e tutoriais sobre os principais navegadores web.

CSS3 - efeito gradiente/degradê

Artigo de Marco Damaceno – Dicas Browser – @ dicasbrowser Algo que todo blogueiro deve se preocupar é se seu blog está bem estruturado. I...

Continue Lendo >>

09:14

Seu blog foi invadido por imagens do Tinypic?

Há alguns dias venho recebendo pedidos de ajuda de blogueiros que relatam que o template de seus blogs foi “invadido” por imagens do site Tinypic. Pois bem, saibam que vocês não estão sozinhos, mas também que esse problema não está relacionando com o Blogger e nem com a recente manutenção no serviço padrão de upload de imagens -  <a href="http://www.dicasblogger.com.br/2010/10/upload-de-imagens-sera-desabilitado.html">Upload de imagens será desabilitado hoje para manutenção</a>. 
O que que acontece? Quando nós fazemos templates para o Blogger, precisamos usar imagens pra deixar tudo mais bonitinho. O problema é que essas imagens são hospedadas externamente, ou seja, fora do Blogger. Do dia para a noite, alguns sites que aceitam hospedar imagens gratuitamente, fecham suas portas ou apagam esses arquivos sem aviso prévio, estragando milhares de templates. 
O mais recente caso aconteceu com o site Tinypic. Vejam a imagem abaixo, gentilmente cedida pela nossa leitora <a href="http://www.dicasblogger.com.br/2010/10/upload-de-imagens-sera-desabilitado.html?showComment=1287602065820#c9046143763163058728">Rita</a> (clique na imagem para ampliá-la): 
<a href="http://lh3.ggpht.com/_EttevOw0KeE/TL_xPrTdVLI/AAAAAAAAKzE/DXOC0F4ja4g/s1600-h/tynipic%5B4%5D.png"><img alt="tynipic" border="0" height="250" src="http://lh4.ggpht.com/_EttevOw0KeE/TL_xRpI2aJI/AAAAAAAAKzI/BYxiQkTkDUI/tynipic_thumb%5B2%5D.png?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-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Blog com imagens do Tynipic" width="502" /></a> 
Percebam que grande parte do blog foi tomado por imagens com o logotipo do site Tinypic. Essas imagens ilustravam várias camadas de plano de fundo (background), com o intuito de embelezar o layout – que acabou inutilizado. 
Em setembro de 2008, eu passei por algo semelhante - <a href="http://www.dicasblogger.com.br/2008/09/comunicado-importante.html">comunicado Importante</a>. Vários dos meus templates tiveram suas imagens apagadas ou consideradas como hotlink. Na época, os grandes vilões eram os sites ImageShack e Photobucket. 
<table border="0" cellpadding="2" cellspacing="4" style="width: 555px;"> <tbody>
<tr> <td valign="top" width="185"><a href="http://lh6.ggpht.com/_EttevOw0KeE/TL_xSpRIaXI/AAAAAAAAKzM/QcmMqEFvC7g/s1600-h/jeffsz1.gif%5B3%5D.png"><img alt="image-shack" border="0" height="121" src="http://lh5.ggpht.com/_EttevOw0KeE/TL_xTdh0ZRI/AAAAAAAAKzQ/6Z2aVMEMX0U/jeffsz1.gif_thumb%5B1%5D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="ImageShack" width="149" /></a></td> <td valign="top" width="185"><a href="http://lh5.ggpht.com/_EttevOw0KeE/TL_xUBP90ZI/AAAAAAAAKzU/ktqK1NywJKE/s1600-h/bandwidth%5B5%5D.jpg"><img alt="bandwidth-photobucket" border="0" height="122" src="http://lh3.ggpht.com/_EttevOw0KeE/TL_xVMrj4gI/AAAAAAAAKzY/BihWn2yWz5o/bandwidth_thumb%5B1%5D.jpg?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Photobucket" width="162" /></a></td> <td valign="top" width="185"><a href="http://lh3.ggpht.com/_EttevOw0KeE/TL_xVkhpJOI/AAAAAAAAKzc/D6hE4VbQVJM/s1600-h/tiny%5B2%5D.gif"><img alt="tinypic" border="0" height="122" src="http://lh6.ggpht.com/_EttevOw0KeE/TL_xWVp5xBI/AAAAAAAAKzg/1aMex1l-PWE/tiny_thumb.gif?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="TinyPic" width="162" /></a></td></tr>
</tbody></table>
Afinal de contas, o que aconteceu com o Tinypic? Segundo informações da Ariane e da Mamanunes, o site simplesmente fechou suas portas para os usuários estrangeiros e, consequentemente, inutilizou as URLs das imagens que estavam hospedadas lá. 
E agora, o que fazer? Bom, se você usa templates da Ariane ou da Mama, acesse estes links e siga as instruções sugeridas por elas: 
<ul>
<li><a href="http://templatesparanovoblogger.blogspot.com/2010/10/importante-sobre-as-imagens-dos.html">Importante: Sobre as imagens dos Templates</a> ( por Ariane) </li>
<li><a href="http://blogger-dicasmamanunes.blogspot.com/2010/09/tinypic-fechando-para-estrangeiros-e.html">Tinypic - Fechando Para Estrangeiros e Retira os Links</a> (por Mamanunes)</li>
</ul>
Se esse não for o seu caso, será necessário trocar de template. 
<ul>
<li><a href="http://www.dicasblogger.com.br/2009/01/como-trocar-o-template-do-blogger.html">Como trocar o template do Blogger</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/02/templates-para-blogger-blogspot.html">Templates para Blogger Blogspot</a></li>
</ul>
Desde que tive problemas desse tipo, eu optei por hospedar as imagens dos meus templates no Picasa – que é um serviço do Google e que raramente apresenta limitações. Isso não quer dizer que os meus templates estão a salvo de terem suas imagens apagadas. Tanto é verdade, que eu SEMPRE recomendo que o usuário salve as imagens em sua própria conta do Picasa, para não ficar dependendo da minha conta e eu evito  usar muitas imagens externas. 
<ul>
<li><a href="http://www.dicasblogger.com.br/2009/08/instrucoes-para-uso-dos-templates.html">Instruções para uso dos templates gratuitos</a> </li>
</ul>
Se você está usando um template e não quer perder suas imagens, acesse: 
<ul>
<li><a href="http://www.dicasblogger.com.br/2008/09/backup-no-picasa-de-imagens-contidas.html">Backup no Picasa de imagens contidas nos templates</a> </li>
<li><a href="http://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html">Como hospedar imagens no Picasa</a></li>
</ul>
E não paramos por aí! Além do backup das imagens, é altamente recomendado fazer backup do template inteiro, dos posts e dos gadgets. 
<ul>
<li><a href="http://www.dicasblogger.com.br/2009/08/como-fazer-backup-no-blogger.html">Como fazer backup dos posts no Blogger</a> </li>
<li><a href="http://www.dicasblogger.com.br/2008/05/backup-template-widgets-blogger.html">Backup do template e dos widgets</a></li>
</ul>
Eu sei que tudo isso pode parecer  muito complicado, mas será ainda pior perder meses ou anos de trabalho por falta de backup ou por medo de aprender.

Seu blog foi invadido por imagens do Tinypic?

Há alguns dias venho recebendo pedidos de ajuda de blogueiros que relatam que o template de seus blogs foi “invadido” por imagens do site Ti...

Continue Lendo >>

06:17