Barra com Botões Curtir, Google +, Retweet e Hack Leia mais

Entre na pagina editar HTML, marque para expandir o modelo e procure por algo parecido com esse trecho:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img src="endereço da imagem" border="0" /></a>
</div>
</b:if>

Copie esse código e cole no bloco de notas depois apague do seu HTML (não é preciso salvar por enquanto). Agora coloque esse código na sua pagina HTML no lugar onde apagou o outro, mas antescompare o trecho final que faz o resumo da postagem com aquele que retirou do seu blog.

<div style='background-color: #CCC;border: 1px dashed #000;margin-top:10px'>
<div style='float:left; width:30%'><script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1' type='text/javascript'/>
<div>
<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='arial' layout='button_count' send='true' show_faces='false'/>
</div></div>
<div style='float:left; width:20%'><a class='twitter-share-button' data-count='horizontal' data-via='fabianoroberto' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<div style='float:left; width:15%'><g:plusone expr:href='data:post.url'/></div>
<div class='jump-link' style='float:right; width:30%'><b:if cond='data:post.hasJumpLink'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</b:if></div>
<div style='clear:both'/></div>

Se o seu código do resumo for diferente então coloque o seu código do resumo da postagem neste código para criar a barra que acabamos de mostrar. 



Para mudar as cores de fundo e bordas da barra no final dos posts do blogger você altera na primeira linha do código:
div style='background-color: #CCC;border: 1px dashed #000;margin-top:10px'

Além disso, você pode criar um estilo. jump-link para formatar o link leia mais ou até fazer um botão nele então coloque esse código antes da linha body{...}

.jump-link a{background-color: #FFC;border: 1px dashed #000;text-align: center;display: block;} 
.jump-link a:hover{background-color: #FF0;color: #000;border: 1px solid #000;} 


Outra coisa que você pode notar no código é que varias vezes repetimos o trecho width:25% apenas com valores diferentes, isso é a largura de cada um dos pedaços da barra no final da postagem, ou seja você pode modificar esses valores como desejar.  

Esse nosso código usamos divs para criar uma barra dividida em colunas, portanto ela funciona com qualquer coisa caso queira usar algum outro acessório nela em vez dos botões e o hack leia mais.

Esperamos que gostem de mais essa forma de organizar os botões das redes sociais no seu blog e consiga mais divulgação para seu blog com eles.