quarta-feira, 4 de janeiro de 2017

Show Social button effect Blogger share

show social button effect blogger share

Hoje vamos compartilhar sobre um widget elegante que pode ser colocado abaixo do post do Blogger isso tem um efeito diferenciado ou seja os botões ficam escondidos abaixo do botão principal ao clicar isso desliza e e mostra os botões sociais, isso é uma forma de criar interatividade com o leitor e também economiza espaço se deseja instalar no seu Template siga os passos abaixo



Como adicionar show social button effect blogger share

Faça login no Blogger então va no menu modelo clique em editar HTML 
Com as teclas combinadas CTRL+F busque por </head> então copie e cole o seguinte código abaixo:

<style type='text/css'>
@import url(http://weloveiconfonts.com/api/?family=entypo);a[class*="entypo-"]:before,span[class*="entypo-"]:before{font-family:'entypo',sans-serif;color:#fff}
.clearfix{*zoom:1}
.clearfix:before,.clearfix:after{content:"";display:table}
.clearfix:after{clear:both}
#shares-btn-be {text-align: center;}
#shares-btn-be ul{margin: 0 0 0 8px;}
#shares-btn-be li{list-style-type:none;}
#shares-btn-be .button{margin-left: 0;border-radius:8px;color:#fff;display:block;font-size:24px;height:64px;line-height:64px;text-align:center;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;-ms-transition:-ms-transform .2s;-o-transition:-o-transform .2s;transition:all .2s;-webkit-transform:translateZ(1);width:64px}
#shares-btn-be .button:hover{-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-ms-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05)}
#shares-btn-be .share{background:#444;box-shadow:0 4px 0 #2a2a2a;width:300px}
.twitter{background:#00acee;box-shadow:0 4px 0 #0080b1}
.facebook{background:#3B5998;box-shadow:0 4px 0 #2a447b}
.google{background:#CC3732;box-shadow:0 4px 0 #9c2824}
.be-btn-share{display:inline-block;position:relative}
.be-btn-share li{float:left;margin:0}
.be-btn-share li:first-child{margin-left:0;position:absolute}
.be-btn-share li:nth-child(2){margin:0 0 0 80px}
</style>

Então procure por </body>  copie o código e cole acima disso:

<script type='text/javascript'>
//<![CDATA[
(function() {

 $('.share').on('click', function(e) {

  e.preventDefault();

  var $this = $(this);

  $this.animate({
   'width': $this.width() == 300 ? '64px' : '300px'
  }, 300, 'swing');

 });

} () );
//]]>
</script>

Código HTML 

<div id='shares-btn-be'>
<ul class="be-btn-share clearfix">
<li><a href="#" class="button share entypo-share"></a></li>
<li><a href="#" class="button twitter entypo-twitter" target="_blank"></a></li>
<li><a href="#" class="button facebook entypo-facebook" target="_blank"></a></li>
<li><a href="#" class="button google entypo-gplus" target="_blank"></a></li>
</ul>
</div>

Então procure o código  <data: post.body />  e cole isso abaixo sob 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='shares-btn-be'>
<ul class="be-btn-share clearfix">
<li><a href="#" class="button share entypo-share"></a></li>
<li><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter ile paylaş' class="button twitter entypo-twitter" target="_blank"></a></li>
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Facebook ile paylaş' class="button facebook entypo-facebook" target="_blank">
</a></li>
<li><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Google Plus ile paylaş' class="button google entypo-gplus" target="_blank"></a></li>
</ul>
</div>
</b:if>

salve e veja o resultado