segunda-feira, 28 de dezembro de 2015

Botão de compartilhar postagem pop up blogger

share-pop-up-button-social-content-blogger


Hoje vamos ensinar como colocar um lino botão para compartilhar a sua postagem isso é muito interativo uma vez que o botão só aparece quando o internauta abre a postagem esse botão aparece no lado esquerdo como pode ver   como o botão mostrado abaixo ao clicar sobre ele abre uma caixa para compartilhar seu post é muito interativo para o usuario e  isso também faz uma chamada para ação

Para adicionar isso faça login no blogger 

No menu procure por modelo >> então editar/HTML logo em seguida 
Com as teclas combinadas CTRL+F busque por </head> e cole o seguinte código antes disso 


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Note  se o  JQuery ja foi instalado antes em seu template esta ok ignore isso  pois só pode ser instalado 1x  pule essa etapa, porque vai levar a um conflito / todo o código jQuery não funcionará 


Agora procure por\ <div class='comments' id='comments'>  então copie o seguinte código e cole acima disso:


<b:if cond='data:blog.pageType == &quot;item&quot;'><!-- BEGIN [ GOOGLE SHARE ] &#169;2015 Pure By:mybloggerseo.com -->
<style type='text/css'>
.overlay {
position:fixed;
z-index:+100000;
top:0;left:0;
width:100%;
height:100%;
background:white;
opacity:.8;
  }
.google-share {
border:1px solid #aaa;
background:white;
padding:33px;
width:570px;
max-width:95%;
position:fixed;
z-index:+100001;
top:100px;
left:50%;
margin-left:-285px;
box-shadow:0px 5px 10px rgba(0,0,0,0.18);
  }
.google-share h3 {
clear:both;
margin:0px!important;
margin-bottom:20px!important;
font-size:20px!important;
font-weight:normal;
color:#333;
  }
.google-share h3 span.close {
float:right;
cursor:pointer;
font-size:25px;
  }
.google-share img { margin:5px;margin-right:0px; display:inline-block; border-radius:2px; transition:all .3s ease; }
  .google-share img:hover { opacity:.7; }
.google-share span.small {
font-size:14px!important;
font-family:arial,sans-serif!important;
color:#484848;
  }
.google-share input {
border:1px solid #ccc;
width:80%;
  }
.bagikan img {
position:fixed;
z-index:+1000;
top:200px;
left:0;
background:#fff;
padding:10px;
border-radius:0 3px 3px 0;
border:1px solid #ddd;
  }
.bagikan img:hover {
opacity:.7;
cursor:pointer;
box-shadow:0px 3px 0px rgba(0,0,0,0.14);
top:197px;
  }
.bagikan img:active {
box-shadow:none;
top:200px;
  }


@media screen and (max-width : 640px) {
.google-share, .overlay, .bagikan { display:none!important;}
}
</style>

<div class='bagikan'><img alt='bagikan' src='https://lh5.googleusercontent.com/-LJtGjVW5lUw/VOREluo6uaI/AAAAAAAAAIg/dH2Rd330UUM/s1600/share.png' title='Bagikan!'/></div>

<div class='overlay' style='display:none;'/> <!-- White Overlay -->
<div class='google-share' id='google-share' style='display:none;'>
  <h3><data:post.title/> <span class='close'>&#215;</span></h3>
  <span class='small'>Compartilhe isso na rede social:</span><br/>
  <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.canonicalUrl' target='_blank' title=' di Google+'>
<img alt='Google Plus Icon' src='https://lh4.googleusercontent.com/-OPqZu9Y5QH0/VOQnwTWauOI/AAAAAAAAAH8/6gFj49rRxIw/h33/gplus.png'/></a>
  <a expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:blog.canonicalUrl' target='_blank' title=' di Facebook'>
<img alt='Facebook Icon' src='https://lh3.googleusercontent.com/-kYqrIfO1Xe4/VOQnwaNZwwI/AAAAAAAAAH4/x50u8fyfmhs/h33/fb.png'/></a>
  <a expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;amp;url=&quot; + data:post.url' target='_blank' title=' di Twitter'>
<img alt='Twitter Icon' src='https://lh6.googleusercontent.com/-kIG-L39e4Xc/VOQnx1xy_mI/AAAAAAAAAIQ/OFEFaYJOZFY/h33/t.png'/></a>
  <a expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;amp;body=&quot; + data:blog.canonicalUrl' target='_blank' title=' via Email'>
<img alt='Email Icon' src='https://lh3.googleusercontent.com/-ZQAmRRA2S6M/VOQnw5_PrRI/AAAAAAAAAIA/nAzYItOsXOE/h33/m.png'/></a>
  <br/>
  <span class='small'>Link a ser Compartilhado:</span><br/>
  <input expr:value='data:blog.canonicalUrl' readonly='readonly' type='text'/>
</div>
  <script type='text/javascript'>
//<![CDATA[
$(window).bind("load", function() {
   $('#google-share, .overlay').fadeIn(1000);
      $('#google-share input').select();
});
  $('#google-share input').click(function() {
$('#google-share input').select();
  });
  $('.bagikan').click(function() {
$('#google-share, .overlay').fadeIn(500);
$('#google-share input').select();
  });
$(document).ready(function() {
  $('.close, .overlay, #google-share img').click(function() {
      $('#google-share').hide();
      $('.overlay').hide();
  });
});
//]]>
</script>

</b:if><!-- END [ GOOGLE SHARE ] &#169;2015 Pure By:mybloggerseo.com -->

Salve e pronto veja o resultado.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner