hello candy's!
Hoje no cardápio teremos um delicioso doce de widget  compatilhar  posts recheado com botões personalizados :)
Espero que se deliciem...rs

Peguem seus pratos e...ops!
Deixem os pratos pra depois rs, apenas acesse seu blog, navegue até o modelo> editar HTML > prosseguir.
Marque a caixa "expandir modelos de widget" e procure por:

<b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>

*dica: aperte ctrl + f para pesquizar e encontrar o trecho rapidamente.

Substitua o trecho encontrado pelo código abaixo:


<div class='candy-share-posts'>
<!--ESTILOS-->
<style>
.candy-share-posts{display:block;margin-bottom:40px;width:100% !important;height:70px !important;margin-top:-27px}
.candy-share-posts p{min-height:45px;margin-bottom:0 !important}
</style>

<!--IMAGEM COMPARTILHE-->
<p><img src='http://2.bp.blogspot.com/-ShByKG4zZQ8/UHctyrJpqOI/AAAAAAAAQug/voV4zW2yN-M/s1600/cpt3.png'/></p>

<!--BOTAO FACEBOOK-->
<div id='fb-root'/><div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='175' expr:data-href='data:post.url' style='float:left'/>

<!--BOTAO PINTEREST-->
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Now!</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-73px; width:40px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}</script>

<!--BOTAO TWITTER-->
<div style='float:left;width:110px;margin-left:10px'><a class='twitter-share-button' data-via='gizaa_veiga' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' title='Tweetar'/></div>

<!--BOTAO GOOGLE PLUS-->
<g:plusone expr:href='data:post.url' size='medium' style='float:left;width:120px;'/>

<!--SCRIPTS-->
<script type="text/javascript">
(function() {
window.PinMe = window.PinIt || { loaded:false };
if (window.PinMe.loaded) return;
window.PinMe.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
</script>
<script type='text/javascript'>window.___gapisync=false;(function(){
var po=document.createElement('script');
po.type='text/javascript';
po.async=true;
po.src='https://apis.google.com/js/plusone.js';
var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po,s);lang:'pt-BR';})();(function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)) return;js=d.createElement(s);js.id=id;js.src='//connect.facebook.net/pt_BR/all.js#xfbml=1';fjs.parentNode.insertBefore(js,fjs);}(document,'script','facebook-jssdk'));
</script>
<script src='//platform.twitter.com/widgets.js' type='text/javascript'></script>
</div><!--FIM CANDY SHARE POSTS [www.candylland.org]-->

Vamos por partes...

<!--ESTILOS--> coloquei medidas e margens para ficar alinhado (testei no modelo viajem do blogger e ficou como na imagem do inicio do post), edite como preferir e se desejar.


<!--IMAGEM COMPARTILHE-->
<p><img src='http://2.bp.blogspot.com/-ShByKG4zZQ8/UHctyrJpqOI/AAAAAAAAQug/voV4zW2yN-M/s1600/cpt3.png'/></p>

Aqui vai a imagem que dá o charme desse widget, como sempre vc pode substituir ela por uma de sua preferencia (substitua o link em vermelho pelo link da imagem que escolher), e pra não fugir ao costume eu fiz alguns modelinhos pra vcs:


 

 

 

 

 

 

 















<!--BOTAO TWITTER--> aqui vc vai ver que tem meu user do twitter (gizaa_veiga) em via='', substitua pelo SEU user do twitter.


UPDATE:
Caso não encontre o trecho sugerido no início do post vc pode adicionar o codigo em abaixo de um desses:

post-footer
ou
post-footer-line post-footer-line-1
ou
post-footer-line post-footer-line-2
ou
post-footer-line post-footer-line-3


E é só!

Esses botões tem o diferencial de funcionar na home, não são como os do addthis por exemplo que quando aparecem na página inicial do blog não contam os cliques do post e sim do blog em geral :)


bjãooo e desfrutem aa vontade!


Tutorial original do blog Candylland :)
Proibido reblogar

Se gostou desta postagem, não esqueça de subscrever o nosso rss feed.