segunda-feira, 1 de fevereiro de 2010

Colocar o botão Retweet do Tweetmeme no Blogger sem usar tabelas

O Luan insistiu, a Juliana Sardinha acabou cedendo a pressão (receio dos #luanfeelings?) e eu acabei acatando a ordem da mestra. Inseri o botão Tetweet do Tweetmeme nos posts do meu blog. Nesse post do Dicas Blogger, a Juliana ensina como inserir o botão de várias maneiras. Mas eu odeio tabelas!

Tabelas foram criadas para exibir dados tabulares, e não para o desenvolvimento e disposição de um site, a qual recomenda-se usar o CSS. Um sites sem tabelas (tableless) carrega mais rápido por ter peso menor e sua acessibilidade tende a melhorar.

Uma alternativa que já mencionei aqui, é colocar as divs flutuando entre a esquerda e a direita. Vou usar os mesmos códigos postados pela Juliana Sardinha, sem as tabelas (LEIA ANTES O POST DELA E USE A MINHA DICA SE PREFERIR):

Por exemplo, se for colocar o botão com um anúncio, basta colocar este código:

<b:if cond='data:blog.pageType == "item"'>
<div style="float:left; width:10%;"><script type="text/javascript">
tweetmeme_source = 'NOME NO TWITTER';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div>
<div style="float:left; width:80%;">
CÓDIGO DO ANÚNCIO </div>
<div style="clear: both;"></div>
</b:if>

Caso queira colocar o botão com uma mensagem:

<b:if cond='data:blog.pageType == "item"'>
<div style="float:left; width:10%;"><script type="text/javascript">
tweetmeme_source = 'NOME NO TWITTER';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div>
<div style="float:left; width:80%;">
Siga este blog no <a href="http://LINK DO SEU TWITTER/">Twitter</a> e fique por dentro das novidades! </div>
<div style="clear: both;"></div>
</b:if>

No post da Juliana, coloca-se o código antes de <div class='post-footer'>, assim ele ficará no fim do post. Se quiser colocar acima do post, deve-se procurar no código do seu template a linha <div class='post-header-line-1'>, e colocar abaixo desta.

O comprimento de cada div está em porcentagem, que você deve ajustar conforme a largura do post do seu template. Os valores que coloquei se ajustam no meu, e nunca faça a soma dar 100%, porque uma div se interpõe sobre a outra.

O resultado no meu blog pode ser visto acima do post, onde incrementei colocando outras regras CSS.

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google