17 de nov de 2016

Botões de compartilhamento para posts - 5 modelos

 Êba tutorial novo! E hoje to explicando como adicionar esses botões de compartilhamento super fofos para o final do post, eles fazem toda a diferença, deixam o blog com uma carinha mais profissional. Se quiser saber como faz para te-los em seu blog basta continuar lendo.



Lembram que eu falei que queria fazer uns tutoriais mais cleans para combinar com diversos tipos de layouts? Pois bem, estou conseguindo, ainda não consigo me livrar totalmente das cores mas nesse tutorial fiz uns modelos cleans e outros com um toque de cor pra quem gosta.






No painél do Blogger vá em Modelo > Editar HTML > Clique  em CTRL+F e na caixa de pesquisa que abrir procure por esse trecho: 

<div class='post-footer-line post-footer-line-3'>

Abaixo desse trecho cole o código do modelo escolhido e salve.

MODELO 1


<!--Compartilhamento Personalizado by Blog da Rocky-->
<img src='http://i.imgur.com/mCrxGdP.png'/>
<!-- share buttons -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/YFXWd8p.png' title='Facebook'/></a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/GyqTR6Z.png' title='Twitter'/></a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/m6DKSKK.png' title='G+'/></a>

<a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' src='http://i.imgur.com/RH1U5BQ.png'/></a>

<!--Compartilhamento Personalizado by Blog da Rocky Final-->

MODELO 2

<!--Compartilhamento Personalizado by Blog da Rocky-->
<img src='http://i.imgur.com/TUhJIya.png'/>
<!-- share buttons -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/K4Yw4QU.png' title='Facebook'/></a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/nKFJBBQ.png' title='Twitter'/></a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/SEJLMts.png' title='G+'/></a>

<a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' src='http://i.imgur.com/E1X0sqM.png'/></a>
<!--Compartilhamento Personalizado by Blog da Rocky Final-->

MODELO 3

<!--Compartilhamento Personalizado by Blog da Rocky-->
<img src='http://i.imgur.com/N88tzfZ.png'/>
<!-- share buttons -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/BERoZ7C.png' title='Facebook'/></a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/57ChszN.png' title='Twitter'/></a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/Z7OKLVo.png' title='G+'/></a>
<!--Compartilhamento Personalizado by Blog da Rocky Final-->

MODELO 4

<!--Compartilhamento Personalizado by Blog da Rocky-->
<img src='http://i.imgur.com/n50JvGC.png'/>
<!-- share buttons -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/K4Yw4QU.png' title='Facebook'/></a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/nKFJBBQ.png' title='Twitter'/></a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/SEJLMts.png' title='G+'/></a>

<a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' src='http://i.imgur.com/E1X0sqM.png'/></a>

<!--Compartilhamento Personalizado by Blog da Rocky Final-->

MODELO 5

<!--Compartilhamento Personalizado by Blog da Rocky-->
<img src='http://i.imgur.com/heTou3g.png'/> <!-- share buttons --> <a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/YFXWd8p.png' title='Facebook'/></a> <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/GyqTR6Z.png' title='Twitter'/></a> <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/m6DKSKK.png' title='G+'/></a> <a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' src='http://i.imgur.com/RH1U5BQ.png'/></a> <!--Compartilhamento Personalizado by Blog da Rocky Final-->


Gostaram dos modelinhos? 
Qualquer dúvida deixem nos comentários beleza?

Beijos e fiquem com Deus!

3 comentários :