Dicas Blogger

Home » Archives for novembro 2010

Personalizando o gadget Postagens Populares

<img align="left" alt="" border="0" height="119" src="http://lh5.ggpht.com/_EttevOw0KeE/TPJVqVCZ4-I/AAAAAAAALaU/F_4HGuuyV6g/image%5B11%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; float: left; margin: 0px 7px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="107" />Um dos vários recursos recém lançados pelo Blogger, foi o gadget Postagens Populares, que exibe os posts mais acessados, baseando-se no serviço de estatísticas nativo. 
No post <a href="http://www.dicasblogger.com.br/2010/08/gadget-postagens-populares.html">Novo gadget – Postagens populares,</a> ensinei como colocar o gadget na barra lateral (sidebar) do blog. 
O problema é que em alguns templates – e os nosso estão incluídos – o gadget aparece desconfigurado. Vejam um exemplo na imagem abaixo: 
<img alt="postagens-populares" border="0" height="236" src="http://lh4.ggpht.com/_EttevOw0KeE/TPJVrJ6FnTI/AAAAAAAALaY/bPheSDVdnUs/postagens-populares%5B4%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="" width="452" /> 
Perceberam que as setinhas aparecem em cima do texto? Para consertar isso, segui este tutorial do Mundo Blogger -  <a href="http://www.mundoblogger.com.br/2010/10/instalar-e-personalizar-o-gadget-de.html">Instalar e personalizar o Gadget de Postagens Mais Populares do Blogger</a> e fiz as alterações necessárias para o meu template. 
Acredito que o código deve variar de template para template, mas vamos lá. 
Entrem em design>editar HTML. Antes de ]]></b:skin>, colem o código abaixo: 
<blockquote>
#PopularPosts1 li{ padding-left: 15px; padding-top: 3px; }</blockquote>
A parte padding-left, se refere à distância que deve existir entre a imagem e o texto. Já padding-top, se refere à altura da imagem. Façam os ajustes nesses dois elementos e vá visualizando até ficar do modo correto e daí salve o template. 
<img alt="" border="0" height="229" src="http://lh3.ggpht.com/_EttevOw0KeE/TPJVsCIcuzI/AAAAAAAALac/lzItzdAaVpY/image%5B20%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" /> 
Além de acertar  a distância entre o texto e a imagem,  podemos aplicar estilos, usando  CSS. Para exemplificar, colocarei borda e plano de fundo no gadget: 
<blockquote>
#PopularPosts1 li{ padding-left: 15px; padding-top: 3px; } #PopularPosts1 .widget-content{ border: 1px solid #ccc; background: #efefef; }</blockquote>
<img alt="" border="0" height="226" src="http://lh4.ggpht.com/_EttevOw0KeE/TPJVt6LeT2I/AAAAAAAALag/C0a2OTFlNcA/image%5B29%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" /> 
Para mudar a cor do resumo dos posts, acrescente este trecho: 
<blockquote>
.item-content{ color: #1d85dd; }</blockquote>
<img alt="" border="0" height="227" src="http://lh3.ggpht.com/_EttevOw0KeE/TPJVu8UhpBI/AAAAAAAALak/6wr70XsJUk0/image%5B39%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" /> 
Mude as cores a seu gosto. Se não sabe os códigos , acesse uma <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm">tabela de cores</a> 
O CSS final seria este, com as devidas modificações de acordo com cada template: 
<blockquote>
#PopularPosts1 li{ /*Estilo para acertar a imagem*/ padding-left: 15px; padding-top: 3px; } #PopularPosts1 .widget-content{ /*Estilo para o conteúdo*/ border: 1px solid #ccc; background: #efefef; } .item-content{ /*Estilo para o resumo dos posts*/ color: #1d85dd; }</blockquote>
ATUALIZAÇÃO: Para retirar o ícone que vem antes do texto, substitua: 
<blockquote>
#PopularPosts1 li{ /*Estilo para acertar a imagem*/ padding-left: 15px; padding-top: 3px; } </blockquote>
por este outro código: 
<blockquote>
#PopularPosts1 li{ /*Estilo para retirar o ícone*/ background-image:none; }</blockquote>
Este post foi criado à pedido de querida leitora <a href="http://amorepazsemfronteiras.blogspot.com/">Lucy – Amor e Paz Sem Fronteiras</a> 
Créditos de parte do código CSS ao <a href="http://www.mundoblogger.com.br/2010/10/instalar-e-personalizar-o-gadget-de.html">Mundo Blogger</a>, um dos meus blogs favoritos <img alt="Smiley piscando" class="wlEmoticon wlEmoticon-winkingsmile" src="http://lh5.ggpht.com/_EttevOw0KeE/TPJVvjSM54I/AAAAAAAALao/Cv0zGvNF2vI/wlEmoticon-winkingsmile%5B2%5D.png?imgmax=800" style="border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none;" />

Personalizando o gadget Postagens Populares

Um dos vários recursos recém lançados pelo Blogger, foi o gadget Postagens Populares , que exibe os posts mais acessados, baseando-se no ser...

Continue Lendo >>

11:12

Menu Horizontal no Designer do Modelo

<img align="left" alt="kmenuedit" border="0" height="128" src="http://lh5.ggpht.com/_EttevOw0KeE/TPD10B6YadI/AAAAAAAALaQ/zeruqmJZ0lw/kmenuedit%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; float: left; margin: 3px 13px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="128" />O menu horizontal ou linkbar, é aquela barra que aparece, geralmente, embaixo do cabeçalho do blog, onde colocamos links para destacar posts e páginas importantes.  
Os modelos mais antigos do Blogger (tipo o Mínima), não vinham com esse recurso; então, nós usuários é que tínhamos que implementá-lo em nossos blogs, através de HTML e CSS, como é o caso dos <a href="http://www.templates.dicasblogger.com.br/">templates do Dicas Blogger</a>. 
Relembrando, atualmente contamos com três opções de templates para Blogger/Blogspot. Vejam detalhes em <a href="http://www.dicasblogger.com.br/2010/09/opcoes-de-templates-para-blogger.html">Opções de templates para Blogger</a> 
Se você usa um modelo customizado que possui linkbar, já deve saber como  colocar os links em destaque, certo? Se não sabe, acesse: <a href="http://www.dicasblogger.com.br/2009/01/como-inserir-links-na-linkbar.html">Como inserir links na linkbar</a> 
No Designer do Modelo, o menu horizontal ou linkbar, recebeu o nome de guia. Para quem está começando a usar o Blogger agora, pode ser um pouco complicado  colocar os links nessas guias. Existem 2 formas pra fazer isso: 
<ol>
<li>através do gadget páginas </li>
<li>através do gadget lista de links </li>
</ol>
O gadget páginas exibe o título de cada página criada no blog, em diversas áreas do template e ainda permite que o usuário escolha quais os links que serão exibidos. 
Inserindo links através do gadget páginas 
Antes de mais nada, é preciso criar as páginas que vão compor a guia: 
<ul>
<li><a href="http://www.dicasblogger.com.br/2010/01/paginas-estaticas-no-bloggerblogspot.html">Páginas estáticas no Blogger/Blogspot</a> </li>
</ul>
Entre em design>elementos de página. No  espaço que fica logo embaixo do título do blog, clique em adicionar gadget e escolha o gadget páginas. 
<img alt="gadget-paginas" border="0" height="223" src="http://lh4.ggpht.com/_EttevOw0KeE/TPDxinX9rSI/AAAAAAAALZw/akf1UrYF4xk/gadget-paginas%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: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="adicionar gadget" width="452" /> 
Marque as páginas que deverão aparecer na guia horizontal e clique em salvar. 
<img alt="configurar páginas" border="0" height="229" src="http://lh4.ggpht.com/_EttevOw0KeE/TPDxjSVKDdI/AAAAAAAALZ0/yNpG4RWyYhE/configurar%20p%C3%A1ginas%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: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="configurar páginas" width="452" /> 
<img alt="image" border="0" height="233" src="http://lh6.ggpht.com/_EttevOw0KeE/TPDxkoC_yNI/AAAAAAAALZ4/O9Hrvi4JccY/image%5B28%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="resultado" width="450" /> 
Inserindo links através do gadget lista de links 
Siga o mesmo procedimento anterior, mas escolha o gadget lista de links. 
Coloque a URL no local indicado, dê um nome e clique em adicionar link. 
Repita esse passo para cada novo link que você quiser adicionar na guia, movimente-os de acordo com a sequência que deseja exibi-los e salve. 
<table border="0" cellpadding="2" cellspacing="4" style="width: 550px;"><tbody>
<tr> <td valign="top" width="275"><a href="http://lh4.ggpht.com/_EttevOw0KeE/TPDxluLB5oI/AAAAAAAALZ8/pF-xxQc7OJM/s1600-h/image%5B49%5D.png"><img alt="image" border="0" height="147" src="http://lh6.ggpht.com/_EttevOw0KeE/TPDxmiynhNI/AAAAAAAALaA/JfMO6yPKzUc/image_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: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Inserindo os links" width="261" /></a></td> <td valign="top" width="275"><a href="http://lh4.ggpht.com/_EttevOw0KeE/TPDxng2VwlI/AAAAAAAALaE/izRC6ZhR9RQ/s1600-h/blogger%5B6%5D.jpg"><img alt="blogger" border="0" height="145" src="http://lh6.ggpht.com/_EttevOw0KeE/TPDxoko_58I/AAAAAAAALaI/P5oQm19iie4/blogger_thumb.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="configurando os links" width="236" /></a></td> </tr>
</tbody></table>
<img alt="image" border="0" height="211" src="http://lh5.ggpht.com/_EttevOw0KeE/TPDxpumejfI/AAAAAAAALaM/K2GS_EYfs5E/image%5B47%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="resultado" width="450" /> Apesar da praticidade do gadget páginas, eu prefiro usar a lista de links, pois com ela eu posso colocar, além das páginas, links de posts e até links de outros sites.

Menu Horizontal no Designer do Modelo

O menu horizontal ou linkbar, é aquela barra que aparece, geralmente, embaixo do cabeçalho do blog, onde colocamos links para destacar posts...

Continue Lendo >>

10:16

Como colocar share buttons do Blogger

<img align="right" alt="social-media-icons" border="0" height="98" src="http://lh4.ggpht.com/_EttevOw0KeE/TPBhctw9UYI/AAAAAAAALZg/jrxaCgJhmtM/social-media-icons%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; float: right; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="social-media-icons" width="97" />Este é um post que estou devendo há tempos, já que o recurso foi lançado em junho. Trata-se de como ativar os botões de compartilhamento ou share buttons oficiais do Blogger. 
Esses botões servem para enviar os posts por email e/ou para o Twitter, Facebook e Google Buzz, com apenas 1 clique. 
Como ativar os share buttons nos templates do Designer do Modelo 
Entre em design>elementos de página. Em postagens do blog, clique em editar 
<img alt="share-buttons" border="0" height="237" src="http://lh5.ggpht.com/_EttevOw0KeE/TPBhezHxD0I/AAAAAAAALZk/D5zNRPPF9zU/share-buttons%5B4%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="" width="452" /> 
Irá abrir uma janela pop-up. Marque a caixa Mostrar botões de compartilhamento 
<img alt="image" border="0" height="156" src="http://lh4.ggpht.com/_EttevOw0KeE/TPBhgY6KFmI/AAAAAAAALZo/CK-2CXqvrg8/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="" width="452" /> 
Clique em salvar e pronto! Os botões de compartilhamento serão ativados. 
<img alt="image" border="0" height="76" src="http://lh6.ggpht.com/_EttevOw0KeE/TPDgvmCnvlI/AAAAAAAALZs/sUaeGRKJFp0/image%5B15%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: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="image" width="470" /> 
Os botões aparecem com fundo cinza e, ao passar o mouse, ficam coloridos. 
Como ativar os share buttons em templates personalizados 
Entre em design>editar HTML. Marque a caixa expandir modelos de widgets. 
Cole este código de acordo com o local onde você quer exibir os botões: 
<blockquote>
<div class='post-share-buttons'>         <b:if cond='data:post.sharePostUrl'>           <b:include data='post' name='shareButtons'/>         </b:if>       </div></blockquote>
Embaixo do título do post 
Colar antes de <div class='post-body'> ou de <div class='post-body entry-content'> 
No final do post 
Colar antes da linha <div class='post-footer'> 
No rodapé dos posts 
Colar antes de ou de <div class='post-footer-line post-footer-line-3'> 
Clique no botão visualizar e se tudo estiver ok, salve o template.

Como colocar share buttons do Blogger

Este é um post que estou devendo há tempos, já que o recurso foi lançado em junho. Trata-se de como ativar os botões de compartilhamento ou ...

Continue Lendo >>

23:52

Personalizando os links de navegação do Blogger

<img align="left" alt="image" border="0" height="133" src="http://lh4.ggpht.com/_EttevOw0KeE/TO6klOlR9wI/AAAAAAAALZA/QhRHr3aJQ6A/image%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: inline; float: left; margin: 0px 6px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="130" /> 
Os links de navegação, são aqueles 3 links que aparecem no final de cada página dos blogs do Blogger. Eles servem para auxiliar o visitante a “navegar” pelo arquivo do blog, avançando e retrocedendo as postagens do arquivo. 
 
<img alt="blog-pager-blogger" border="0" height="52" src="http://lh6.ggpht.com/_EttevOw0KeE/TO6kmrVtjeI/AAAAAAAALZI/xpkwWodnRB4/image%5B22%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="Links de navegação" width="491" /> 
Considero obrigatório, o uso dos links de navegação, já que sem eles ficaria muito complicado ter acesso a todos os posts que não se encontram na página inicial. 
<ul>
<li><a href="http://www.dicasblogger.com.br/2009/03/recuperar-links-de-navegacao-do-blogger.html">Como recuperar os links de navegação do Blogger</a> </li>
</ul>
Muito bem. Com um pouco de CSS e com algumas mudanças no código original do Blogger, podemos fazer maravilhas com os links de navegação. 
 
Primeiramente, irei ensinar como mudar o código original. Antes de começar, faça um <a href="http://www.dicasblogger.com.br/2008/05/backup-template-widgets-blogger.html">backup completo do template</a> ou use um blog de testes. 
 
Entre em design>editar HTML, marque a caixa expandir modelos de widgets  e, usando o comando Crtl+F do teclado, procure por: 
<blockquote>
 
<b:includable id='nextprev'> 
<div class='blog-pager' id='blog-pager'> 
<b:if cond='data:newerPageUrl'> 
 
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> 
 
</b:if> 
<b:if cond='data:olderPageUrl'> 
 
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> 
 
</b:if> 
<b:if cond='data:blog.homepageUrl != data:blog.url'> 
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> 
<b:else/> 
<b:if cond='data:newerPageUrl'> 
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> 
</b:if> 
</b:if> 
</div> 
<div class='clear'/> 
</b:includable> </blockquote>
 
Substitua tudo por: 
<blockquote>
<b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='posts mais recentes'>&#171; página anterior</a> </b:if> <b:if cond='data:olderPageUrl'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='posts mais antigos'>próxima página &#187;</a> </b:if> </div> <div class='clear'/> </b:includable></blockquote>
 Salve o template. 
Agora iremos aplicar o CSS.  Procure por este trecho: 
<blockquote>
#blog-pager-newer-link {   
float: $startSide; } #blog-pager-older-link {   float: $endSide; } #blog-pager {   text-align: center; }</blockquote>
**Para blogs com template do Designer do modelo, o trecho é este: 
<blockquote>
 .blog-pager {  background: $(paging.background); } 
.blog-pager-older-link, .home-link, .blog-pager-newer-link {   background-color: $(content.background.color);   padding: 5px; }</blockquote>
Substitua tudo por: 
<blockquote>
#blog-pager a { font-family: Arial; color: #333; /*Cor da letra*/ font-size: 13px; /*tamanho da letra*/ padding: 5px; text-decoration: none; background: #e6e6e6; /* cor do fundo*/ border: solid #ccc 1px; /*cor da borda*/ } 
#blog-pager a:hover { color:#fff;  /*Cor da letra ao passar o mouse*/ background-color:#0071bb;  /*Cor da fundo ao passar o mouse*/ } 
.blog-pager-older-link { float: right; } 
.blog-pager-newer-link { float: right; }</blockquote>
<img alt="image" border="0" height="93" src="http://lh6.ggpht.com/_EttevOw0KeE/TO6r245EMAI/AAAAAAAALZQ/7DVtWwVEZPw/image%5B20%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="resultado" width="547" /> 
Os ítens em vermelho, podem ser modificados livremente. Veja a <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm">tabela de cores</a>. 
Para colocar numeração nos links, vá até o Mundo Blogger: <a href="http://www.mundoblogger.com.br/2010/01/numerar-paginas-no-blog-corrigido.html">Numerar Páginas no Blog</a>

Personalizando os links de navegação do Blogger

Os links de navegação, são aqueles 3 links que aparecem no final de cada página dos blogs do Blogger. Eles servem para auxiliar o visita...

Continue Lendo >>

17:03

Novas fontes no Designer do Modelo

<img align="left" alt="image" border="0" height="166" src="http://lh6.ggpht.com/_EttevOw0KeE/TO0-5UADkVI/AAAAAAAALYw/OT3gBEpEufE/image%5B15%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; float: left; margin: 0px 7px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="125" />O blog oficial do Blogger in Draft (página de testes do Blogger), anunciou a chegada de 40 novas fontes para os templates do Designer do Modelo - <a href="http://bloggerindraft.blogspot.com/2010/11/more-fonts-means-more-choice.html">More Fonts Means More Choice</a>. 
As fontes ou <a href="http://pt.wikipedia.org/wiki/Fonte_%28tipografia%29" target="_blank">fontes tipográficas</a>, nada mais são do que o tipo de letra que usamos em nossos blogs. 
Para acessar as novas fontes, entre no painel do <a href="http://draft.blogger.com/" target="_blank">Blogger in Draft</a>, procure por design>designer do modelo> avançado. 
Na guia avançado, encontre a área do layout onde a nova fonte será aplicada. 
No exemplo abaixo, escolhi mudar a fonte da guia (também conhecida como  linkbar). 
<img alt="image" border="0" height="141" src="http://lh4.ggpht.com/_EttevOw0KeE/TO0-6aZl9OI/AAAAAAAALY0/Fmgy4vIELcM/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="" width="523" /> 
ATENÇÃO! Este recurso ainda não está disponível na <a href="http://blogger.com/" target="_blank">página padrão do Blogger</a>.

Novas fontes no Designer do Modelo

O blog oficial do Blogger in Draft (página de testes do Blogger), anunciou a chegada de 40 novas fontes para os templates do Designer do Mod...

Continue Lendo >>

14:35

Sorteio! Livro completo sobre o Google Analytics

<a href="http://lh4.ggpht.com/_EttevOw0KeE/TOhq98SExLI/AAAAAAAALYE/exm9k-rH5gA/s1600-h/image%5B3%5D.png"><img align="left" alt="" border="0" height="201" src="http://lh4.ggpht.com/_EttevOw0KeE/TOhq_j7xp8I/AAAAAAAALYI/-SdSRgQtKL8/image_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; float: left; margin: 0px 6px 0px 1px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Capa do livro Google Analytics" width="146" /></a> 
A <a href="http://www.novatec.com.br/" target="_blank">editora Novatec</a> está lançando o livro <a href="http://www.novatec.com.br/livros/googleanalytics/" target="_blank">Google Analytics</a>,  onde o autor - Justin Cutroni - desvenda os segredos de um dos melhores e mais usados serviços para monitoramento de dados de navegação, o Google Analytics. 
“Justin é um dos mais inteligentes gurus do Google Analytics que você pode encontrar. Já vi até mesmo clientes mais exigentes se impressionarem com o conhecimento e os insights oferecidos por ele” 
<div align="right">
—Phil Mui, gerente sênior, Google Analytics</div>
Nós blogueiros adoramos estatísticas, não é verdade? Agora imagine você, caro leitor, obtendo o máximo proveito do Google Analytics? A editora Novatec ofereceu um (1) exemplar desse livro para sortearmos entre os nossos seguidores do Twitter e mais 25% de desconto pra quem quiser comprá-lo. Que tal? 
Regulamento: Para participar do sorteio, é obrigatório ser seguidor do <a href="http://twitter.com/dicas_blogger" target="_blank">@dicas blogger</a> e tuitar ou retuitar a seguinte frase: 
<blockquote>
Dê RT e concorra ao sorteio do livro Google Analytics: <a href="http://kingo.to/mjG" title="http://kingo.to/mjG">http://kingo.to/mjG</a></blockquote>
O link é obrigatório e não pode ser modificado, pois será através dele que faremos o sorteio no site <a href="http://sorteie.me/" target="_blank">Sortei.me</a>. O resultado será divulgado no dia 25/11. 
<blockquote>
* Descubra exatamente como o sistema do Google Analytics funciona. * Aprenda como configurar esse sistema para medir dados mais relevantes aos objetivos de seu negócio. * Monitore ações de marketing on-line, incluindo campanhas de performance, e-mail e campanhas internas. * Monitore eventos nos sites, com recursos como mapas, vídeo incorporado e widgets. * Configure o Google Analytics para monitorar dados de negócio, incluindo domínios múltiplos. * Use técnicas avançadas como variáveis personalizadas e integração com um sistema CRM.</blockquote>
Para comprar o livro Google Analytics com 25 % de desconto, <a href="http://www.novatec.com.br/livros/googleanalytics/" target="_blank">clique aqui</a> e informe o código promocional dicasblogger, conforme aparece na imagem abaixo: 
<img alt="novatec" border="0" height="229" src="http://lh3.ggpht.com/_EttevOw0KeE/TOp0lGc0j6I/AAAAAAAALYs/hBUXXLzqnew/novatec%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="novatec" width="452" /> 
Atenção! O código promocional é válido até o dia 30 de novembro. Corram! 
Para quem leva seu site/blog a sério,  a leitura deste livro é altamente recomendada. 
ATUALIZAÇÃO: O resultado do sorteio será divulgado no Twitter, em 25/11, às 14h.

Sorteio! Livro completo sobre o Google Analytics

A editora Novatec está lançando o livro Google Analytics , onde o autor - Justin Cutroni - desvenda os segredos de um dos melhores e m...

Continue Lendo >>

11:48

Saiba quem está online no Twitter

<img align="right" alt="logo-ontw" border="0" height="90" src="http://lh6.ggpht.com/_EttevOw0KeE/TOkM_pB6-8I/AAAAAAAALYk/psOV8sbvLWo/logo%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: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="220" />Neste mês surgiu um serviço bem interessante para Twitter, o <a href="http://www.ontw.com.br/" target="_blank" title="ontw - Descubra quem está online no twitter agora">ONTW</a>, que te permite saber quais são os seus amigos online no microblog no momento. 
Informação muito útil caso você queria saber se certo amigo seu está online para enviar uma DM, ou até mesmo para inicar uma conversa, por exemplo. 
Para utilizar o serviço é bem simples, basta acessar <a href="http://www.ontw.com.br/" target="_blank" title="ontw - Descubra quem está online no twitter agora">www.ontw.com.br</a> e clicar em "Logar-ser via Twitter". Após logado, em alguns segundos uma lista com os seus amigos online (em verde) e ausentes (em vermelho) aparecerá na tela. Vale ressaltar que não necessariamente os usuários ausentes são offline, apenas quer dizer que os mesmos estão inativos à algum tempo na rede social. 
O site foi criado por mim, em parceria com o <a href="http://twitter.com/#!/isenna" target="_blank">@iSenna</a>.  
Qualquer dúvida ou pergunta será respondida nos comentários. 
<hr />
<div align="left">
Este é um guest-post do <a href="http://twitter.com/#!/OficialJoao" target="_blank">@OficialJoao</a> – desenvolvedor do ONTW.</div>
<div align="left">
<img align="left" alt="" border="0" height="72" src="http://lh5.ggpht.com/_EttevOw0KeE/TOkPiI9j4II/AAAAAAAALYo/zemCoEL7GU0/image%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: inline; float: left; margin: 0px 8px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="68" />João Pedro Carvalho Motta   Editor de conteúdo | Zuugy Networks <a href="http://www.webdicas.info/" target="_blank">www.webdicas.info</a> | <a href="http://www.zuugy.com.br/" target="_blank">www.zuugy.com.br</a></div>
<hr />

Saiba quem está online no Twitter

Neste mês surgiu um serviço bem interessante para Twitter, o ONTW , que te permite saber quais são os seus amigos online no microblog no mom...

Continue Lendo >>

10:13

Como colocar Skype e MSN no blog

Que tal colocar em seu blog um botão ou widget do Skype ou do MSN, para mostrar seu status (online ou offline) e ainda conversar com seus leitores em tempo real? 
Os dois comunicadores instantâneos oferecem várias opções de botões e o método para colocar em blogs do Blogger é relativamente simples. 
 
<img align="left" alt="skype-logo" border="0" height="69" src="http://lh5.ggpht.com/_EttevOw0KeE/TOhyVgcuiCI/AAAAAAAALYM/Zwf9jusf2Gw/image%5B48%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; float: left; margin: 0px 3px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="69" />Para colocar um botão do Skype, <a href="http://www.skype.com/share/buttons" target="_blank">clique aqui</a>. Coloque seu nome de usuário em enter your skype name, escolha um dos botões disponíveis e copie o código fornecido, conforme consta nas imagens abaixo. 
 
<img alt="skype-buttons" border="0" height="200" src="http://lh3.ggpht.com/_EttevOw0KeE/TOhyWgeQycI/AAAAAAAALYQ/OkT0krCT-6I/image%5B19%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="Botões do Skype" width="452" /> 
<img alt="skype-button" border="0" height="168" src="http://lh5.ggpht.com/_EttevOw0KeE/TOhyXc9_Y6I/AAAAAAAALYU/YRXXbfAfluU/image%5B39%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="Código" width="452" /> 
Entre no Blogger, clique em design>elementos de página> adicionar gadget. Escolha o gadget HTML/javascript, cole o código do Skype e salve. 
Atenção! Em alguns testes que fiz, o botão do Skype causou um pequeno desajuste nos templates. Nesse caso, elimine a parte do código que assinalei em vermelho: 
<blockquote>
 <script type="text/javascript" src="<a href="http://download.skype.com/share/skypebuttons/js/skypeCheck.js%22">http://download.skype.com/share/skypebuttons/js/skypeCheck.js"</a>></script> <a href="skype:nomedeusuario?call"><img src="<a href="http://mystatus.skype.com/bigclassic/nomedeusuario%22">http://mystatus.skype.com/bigclassic/nomedeusuario"</a> style="border: none;" width="182" height="44" alt="My status" /></a> </blockquote>
 
<img align="left" alt="msn-logo" border="0" height="69" src="http://lh4.ggpht.com/_EttevOw0KeE/TOhyYcq2u4I/AAAAAAAALYY/CY63ykLZnO0/image%5B49%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; float: left; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="69" />Para colocar um botão do MSN ou um mini-chat, <a href="http://settings.messenger.live.com/Applications/WebSettings.aspx" target="_blank" title="http://settings.messenger.live.com/Applications/WebSettings.aspx">clique aqui</a> e faça login no Windows Live. Em página inicial, marque a caixa que aparece. Depois, clique em criar HTML. Escolha uma das opções e copie o código. 
<img alt="msn-chat" border="0" height="150" src="http://lh3.ggpht.com/_EttevOw0KeE/TOhyZWV1scI/AAAAAAAALYc/HElFhGMlSu0/image%5B60%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="Configurações" width="452" /> 
<img alt="msn-button" border="0" height="228" src="http://lh5.ggpht.com/_EttevOw0KeE/TOhyabg_ZtI/AAAAAAAALYg/SvIpkiBffS4/image%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="Opções" width="452" /> 
Entre no Blogger, clique em design>elementos de página> adicionar gadget. Escolha o gadget HTML/javascript, cole o código do Skype e salve.

Como colocar Skype e MSN no blog

Que tal colocar em seu blog um botão ou widget do Skype ou do MSN , para mostrar seu status (online ou offline) e ainda conversar com seus ...

Continue Lendo >>

23:14

Destacar mensagens nos posts

<img align="right" alt="rss" border="0" height="128" src="http://lh3.ggpht.com/_EttevOw0KeE/TOQH8DsujLI/AAAAAAAALXU/fJLTt-Ngrxo/rss2_3_22%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: inline; float: right; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="" width="128" />Eu já expliquei uma vez como colocar uma mensagem no rodapé dos posts, convidando os leitores a assinarem os feeds -  <a href="http://www.dicasblogger.com.br/2008/09/widget-assine-o-feed-no-rodape-dos.html">Widget "Assine o Feed" no rodapé dos posts</a> 
Agora que fiquei mais espertinha em CSS e abandonei as tabelas (né, Cidão?), fiz um código novo que pode ser usado para destacar qualquer mensagem dentro dos posts. 
Vejam um exemplo, na imagem abaixo. É um convite pra assinar os feeds: 
<img alt="" border="0" height="52" src="http://lh6.ggpht.com/_EttevOw0KeE/TOQExfwYiGI/AAAAAAAALXE/O4sfTs0Sceg/image%5B45%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="580" /> 
O código é simples, mas requer que vocês façam algumas substituições: 
<blockquote>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'> <img alt='' src='URL DA IMAGEM' style='width: 32px; height: 32px;float:left;'/> TÍTULO: TEXTO 1       <a href='LINK'>Clique aqui </a>TEXTO 2. </div> 
</b:if></blockquote>
Escolha uma imagem de 32 x 32px, faça o upload para o <a href="http://www.dicasblogger.com.br/2010/07/como-hospedar-imagens-no-picasa.html" target="_blank" title="Como hospedar imagens no Picasa">Picasa</a> ou outro site de sua preferência e copie a ULR. Abra o código acima no bloco de notas e substitua URL DA IMAGEM pela URL da imagem que você vai usar; em TÍTULO, coloque um título pra mensagem; em TEXTO 1, escreva o primeiro paráfrafo e em TEXTO 2, o segundo. 
Você ainda pode alterar a cores de fundo em “background” , a borda em “border” e a cor da fonte em “color”. Se necessário, ajuste o tamanho da fonte em “font-size: 110%”, a largura em “width” e a margem superior em “margin-top”. 
Para usar imagens maiores, altere: width: 32px; height: 32px 
Vejam estes exemplos: 
<blockquote>
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'> <img alt='' src='<a href="http://lh6.ggpht.com/_mcq01yDJ2uY/TOP-Je99_AI/AAAAAAAAD98/s24k47t_TmU/rss_file.png" title="http://lh6.ggpht.com/_mcq01yDJ2uY/TOP-Je99_AI/AAAAAAAAD98/s24k47t_TmU/rss_file.png">http://lh6.ggpht.com/_mcq01yDJ2uY/TOP-Je99_AI/AAAAAAAAD98/s24k47t_TmU/rss_file.png</a><a href="http://%27/">'</a> style='width: 32px; height: 32px;float:left;'/> RSS/Feed: Receba automaticamente todas os artigos deste blog!       <a href='LINK DO FEED'>Clique aqui </a> para assinar nosso feed. O serviço é totalmente gratuito </div> 
</b:if></blockquote>
<img alt="" border="0" height="59" src="http://lh4.ggpht.com/_EttevOw0KeE/TOQEyfEuExI/AAAAAAAALXI/ifuNe_XGMZg/image%5B15%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="Assinar Feeds" width="584" /> 
<blockquote>
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div style='text-align: left; color: #7b7c7d; font-size: 90%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'> <img alt='' src='<a href="http://png-4.findicons.com/files/icons/2152/snowish/32/dialog_warning.png'">http://png-4.findicons.com/files/icons/2152/snowish/32/dialog_warning.png'</a> style='width: 32px; height: 32px;float:left;'/> Alerta! É terminantemente proibido copiar os artigos deste blog.       <a href='LINK'>Clique aqui </a> e veja nossa licença. Plágio é crime previsto no Código Penal. </div> 
</b:if></blockquote>
<img alt="image" border="0" height="52" src="http://lh5.ggpht.com/_EttevOw0KeE/TOQEy3idfmI/AAAAAAAALXM/d30RNDhsm88/image%5B44%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="Alerta Plágio" width="588" /> 
Use sua imaginação! As opções são várias: feed, plágio, twitter, facebook e etc. 
Locais para inserir a mensagem 
Embaixo do título do post 
Para encontrar os trechos que citarei, use o comando Ctrl+F do teclado. 
Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha  <div class='post-body'> 
No final do post 
Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha <div class='post-footer'> 
No rodapé dos posts 
Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha   
<img alt="footer" border="0" height="216" src="http://lh6.ggpht.com/_EttevOw0KeE/TOQE0HuBgoI/AAAAAAAALXQ/e0lCwTt6N-c/footer%5B2%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="Colando o código" width="452" /> 
Para que a mensagem apareça também na home, apague o que está em vermelho: 
<blockquote>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'> <img alt='' src='URL DA IMAGEM' style='width: 32px; height: 32px;float:left;'/> TÍTULO: TEXTO 1       <a href='LINK'>Clique aqui </a>TEXTO 2. </div> 
</b:if></blockquote>

Destacar mensagens nos posts

Eu já expliquei uma vez como colocar uma mensagem no rodapé dos posts, convidando os leitores a assinarem os feeds - Widget "Assine o ...

Continue Lendo >>

12:36

Whos–o melhor contador online para seu blog

Já que o assunto do último post foi estatísticas de acesso, hoje vou falar do excelente <a href="http://whos.amung.us/">Whos Amung</a>,  o melhor contador online do momento. 
Com o Whos, é possível acompanhar o número de usuários online em tempo real, de onde eles estão vindo e para quais páginas do blog. O serviço fornece várias opções de botões, é gratuito e não precisa nem fazer cadastro. 
Para colocar um botão de visitantes online em seu blog, acesse o <a href="http://whos.amung.us/">site</a>, escolha um dos widgets e copie o código. Entre no Blogger, clique em design> adicionar gadget. Escolha o gadget HTML/Javascript e cole o código do Whos aí. 
Opções de Widgets 
A primeira opção é colocar um botão suspenso em várias áreas do blog. Você pode configurar onde o botão vai ficar, mexendo nas 3 colunas que aparecem na imagem abaixo (esquerdo, fundo e direito). O código está logo em cima. 
<img alt="whos-amung" border="0" height="161" src="http://lh6.ggpht.com/_EttevOw0KeE/TOPOdWodMPI/AAAAAAAALWs/uZ45_f6xwBU/image%5B7%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="Botão padrão" width="457" /> 
Logo abaixo, aparecerá mais widgets interessantes. Clique em demonstração para ver mais cinco opções de botões pra colocar em seu blog. 
<img alt="contador-online" border="0" height="161" src="http://lh3.ggpht.com/_EttevOw0KeE/TOPOeO_fb2I/AAAAAAAALWw/pEcI4YVxRv4/image%5B17%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="Opções de widgets" width="455" /> 
O primeiro botão tem o fundo preto e mostra o número de usuários online. 
O segundo, mostra a mesma coisa, mas permite configurar as cores do fundo e fonte. 
O terceiro mostra um mapa e também permite escolher cores e temas. 
O quarto é um plugin para o  Firefox, que coloca um ícone na statusbar. 
<img alt="whos-firefox" border="0" height="206" src="http://lh5.ggpht.com/_EttevOw0KeE/TOPOfXB8yLI/AAAAAAAALW0/dHr-51yLeKs/image%5B44%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="Plugin Firefox" width="452" /> 
<img alt="" border="0" height="19" src="http://lh5.ggpht.com/_EttevOw0KeE/TOPR7FEF6BI/AAAAAAAALW8/phmaEXS0hq4/image%5B12%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="statusbar do firefox" width="452" /> 
Pra configurar,clique em ferramentas> complementos>opções. Em simple, coloque seu ID do Whos. Para pegar a ID, copie o link do seu gadget e cole a última linha: 
<blockquote>
<div align="center">
whos.amung.us/stats/XXXXXXX/</div>
</blockquote>
E o último é o mais discreto, com fundo preto e o número de visitas online. 
Para acompanhar as estatísticas em tempo real, clique sobre o gadget que está em seu blog. Aparecerá esta janela, mostrando o número de visitas nas últimas 24h. 
<img alt="users-online" border="0" height="189" src="http://lh6.ggpht.com/_EttevOw0KeE/TOPOgQDlceI/AAAAAAAALW4/9kbWFen3F3s/image%5B53%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="Últimas 24 h" width="452" /> 
Logo abaixo, dá pra ver em quais páginas do blog os visitantes estão. Show, né? 
ATUALIZAÇÃO Pra quem deseja acompanhar o número de visitas online, mas não quer exibi-las no blog, o <a href="http://twitter.com/OficialJoao" target="_blank">@OficialJoao</a> nos eu esta dica: 
<blockquote>
<div style="display:none;"> CODIGO DO WHOS </div></blockquote>

Whos–o melhor contador online para seu blog

Já que o assunto do último post foi estatísticas de acesso, hoje vou falar do excelente Whos Amung , o melhor contador online do momento. ...

Continue Lendo >>

10:45

Como publicar o feed do blog no Facebook

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_c1Bv1rmLa6M/TOF0zGsDY9I/AAAAAAAAHJI/uragBLYvxWc/s1600/facebook+blog.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="100" src="http://1.bp.blogspot.com/_c1Bv1rmLa6M/TOF0zGsDY9I/AAAAAAAAHJI/uragBLYvxWc/s200/facebook+blog.png" width="100" /></a></div>
Já explicamos <a href="http://www.dicasblogger.com.br/2010/09/como-criar-uma-pagina-de-fas-no.html" target="_blank">como criar uma página de fãs no Facebook</a> e as vantagens de estar presente na rede social que mais cresce no mundo todo. Mas de nada adianta ter uma página para divulgar o blog se a mesma possui pouco conteúdo, não vai indexar bem nos motores de busca e vai atrair poucos visitantes. A maneira mais fácil de criar conteúdo é publicar o feed do blog na página de fãs do Facebook, isto pode ser feito de diversas maneiras e através de vários aplicativos. 
 
Como publicar o feed do blog no Facebook: 
No tutorial abaixo vamos utilizar o NetworkedBlogs. Além de ser uma rede de blogs dentro do Facebook, este aplicativo permite entre outras coisas a publicação do feed do blog nas páginas de fãs, em grupos no Facebook e em páginas pessoais. 
 
Instalar o NetworkedBlogs: 
Na página  <a href="http://www.facebook.com/networkedblogs" target="_blank" title="http://www.facebook.com/networkedblogs">http://www.facebook.com/networkedblogs</a> clique em instalar aplicativo (na lateral do lado esquerdo). A seguir, vamos em Editar na nossa página de fãs e encontramos lá o NetworkedBlogs: 
<a href="http://lh5.ggpht.com/_c1Bv1rmLa6M/TOFsyGunN8I/AAAAAAAAHIQ/LghfhcLGrvw/s1600-h/feed%20facebook%5B8%5D.png"><img alt="feed facebook" border="0" height="58" src="http://lh5.ggpht.com/_c1Bv1rmLa6M/TOFszKuzAvI/AAAAAAAAHIU/mpTB53c4oxI/feed%20facebook_thumb%5B6%5D.png?imgmax=800" style="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;" title="feed facebook" width="482" /></a> 
Editar as configurações: 
Ao clicar em Ir para o aplicativo, vai abrir uma janela onde vamos encontrar do lado superior direito Syndication: 
<a href="http://lh3.ggpht.com/_c1Bv1rmLa6M/TOFszqPrNLI/AAAAAAAAHIY/mZum2xegHhI/s1600-h/facebook%20feed%5B7%5D.png"><img alt="facebook feed" border="0" height="84" src="http://lh6.ggpht.com/_c1Bv1rmLa6M/TOFs0t72u9I/AAAAAAAAHIc/_pvklpuU1r4/facebook%20feed_thumb%5B5%5D.png?imgmax=800" style="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;" title="facebook feed" width="482" /></a> 
Clique em Syndication e a seguir vai abrir outra janela, onde vamos adicionar o blog. Escolha a opção Click here to register your blog: 
<a href="http://lh6.ggpht.com/_c1Bv1rmLa6M/TOFs1dKzjsI/AAAAAAAAHIg/tUiXIMjXbRg/s1600-h/feed%20do%20blog%20no%20facebook%5B6%5D.png"><img alt="feed do blog no facebook" border="0" height="228" src="http://lh3.ggpht.com/_c1Bv1rmLa6M/TOFs2cnQShI/AAAAAAAAHIk/O1MST10Y_oU/feed%20do%20blog%20no%20facebook_thumb%5B4%5D.png?imgmax=800" style="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;" title="feed do blog no facebook" width="482" /></a> 
Preencha os campos com os dados do seu blog: 
<a href="http://lh3.ggpht.com/_c1Bv1rmLa6M/TOFs3E8dQNI/AAAAAAAAHIo/CtOYtWWifKM/s1600-h/fecebook%20feed%20do%20blog%5B7%5D.png"><img alt="fecebook feed do blog" border="0" height="402" src="http://lh6.ggpht.com/_c1Bv1rmLa6M/TOFs3kGig7I/AAAAAAAAHIs/ta5WasT6P-E/fecebook%20feed%20do%20blog_thumb%5B5%5D.png?imgmax=800" style="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;" title="fecebook feed do blog" width="482" /></a> 
Clique em Next e confirme ser autor do blog. A seguir será solicitado uma confirmação de que o blog é realmente seu, para isto há duas opções: uma é pedir para alguns amigos no Facebook confirmarem a autoria e a outra é publicar o widget do NetworkedBlogs na sidebar do blog (que poderá ser removido após a confirmação): 
<a href="http://lh4.ggpht.com/_c1Bv1rmLa6M/TOFs4kUUmgI/AAAAAAAAHIw/ZE3S0vMh1Yo/s1600-h/feed%20no%20FB%5B5%5D.png"><img alt="feed no FB" border="0" height="456" src="http://lh5.ggpht.com/_c1Bv1rmLa6M/TOFs5YDe0YI/AAAAAAAAHI0/5VJwMGdY8nk/feed%20no%20FB_thumb%5B3%5D.png?imgmax=800" style="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;" title="feed no FB" width="482" /></a> 
A utilização deste widget pode ser bastante útil para criar uma interação com outros blogs, mas não é obrigatória para quem pretende apenas publicar o feed no mural da página de fãs. 
Após a confirmação, irá aparecer esta mensagem: 
<a href="http://lh4.ggpht.com/_c1Bv1rmLa6M/TOFs6MCu2SI/AAAAAAAAHI4/9R1S41KN1-A/s1600-h/facebook%5B5%5D.png"><img alt="facebook" border="0" height="112" src="http://lh4.ggpht.com/_c1Bv1rmLa6M/TOFs6sxEaSI/AAAAAAAAHI8/gcYxGUmR5ps/facebook_thumb%5B3%5D.png?imgmax=800" style="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;" title="facebook" width="482" /></a> 
Clique em Set up e a janela Syndication irá aparecer novamente, selecione o blog e marque Personal Facebook Profile: 
<a href="http://lh6.ggpht.com/_c1Bv1rmLa6M/TOFs7VVrWII/AAAAAAAAHJA/MVF_V7nH3ko/s1600-h/facebook%20e%20feed%20do%20blog%5B6%5D.png"><img alt="facebook e feed do blog" border="0" height="266" src="http://lh3.ggpht.com/_c1Bv1rmLa6M/TOFs8bZwJZI/AAAAAAAAHJE/mzYv8Eeon1Y/facebook%20e%20feed%20do%20blog_thumb%5B4%5D.png?imgmax=800" style="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;" title="facebook e feed do blog" width="482" /></a> 
Clique em Advanced Settings e Publish a Test Post. Se fez tudo corretamente, irá aparecer um post no Mural da página de fãs com o último post publicado no feed do blog.

Como publicar o feed do blog no Facebook

Já explicamos como criar uma página de fãs no Facebook e as vantagens de estar presente na rede social que mais cresce no mundo todo. Mas...

Continue Lendo >>

15:39