segunda-feira, 12 de setembro de 2016

Hover social image button overlay

hover-image-social

Hoje vamos apresentar hover share button on image isso traz um efeito legal que aparece botões de redes sociais emcina da foto quando passamos o mouse encima é interresante pois esse widget também ajuda no compartilhamento do post criando viralidade então para adicionar esse widget siga os passos abaixo


Faça login no blogger 
no painel do Blogger vá em menu então modelo 
editar >> HTML/JavaScript com as teclas combinadas CTRL+F busque por </head> e cole o seguinte código antes disso.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*Social Image Share Button*/
span.socialclick:hover{cursor:pointer}
div.overlay{position:absolute;top:0;left:0;opacity:0;width:100%;height:100%}
div.overlay ul{width:100%;text-align:center;padding:0;position:relative;top:40%;bottom:50%}
div.overlay ul li{display:inline;padding:12px;color:white}
div.wrap div.overlay ul li:nth-child(1){background:#3B5998}
div.wrap div.overlay ul li:nth-child(2){background:#32CBFE}
div.wrap div.overlay ul li:nth-child(3){background:#DD4B39}
div.wrap div.overlay ul li:nth-child(4){background:#CE2424}
div.wrap div.overlay:hover{opacity:1;-webkit-transition:all .5s ease .15s;-moz-transition:all .5s ease .15s;-o-transition:all .5s ease .15s;-ms-transition:all .5s ease .15s;transition:all .5s ease .15s}
div.wrap{position:relative}
</style>
</b:if>

Agora procure por </body>  e logo acima disso copie e cole o seguinte código:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
/*Social Share Button Image by mas tamvan*/
!function(a){function s(s,i){var e=i["float"]||"none",t=(i.rgba||"236,240,241,0.8",i.color||"#ffffff");s.wrap('<div class="wrap"></div>'),$wrap=s.parent(),$wrap.css("float",e),$overlay=a("<div>"),$overlay.addClass("overlay"),$overlay.css("background","transoarent"),$links=a("<ul>"),$overlay.append($links),$facebook=a("<li>"),$facebook.html('<span class="socialclick facebook-share"><i class="fa fa-lg fa-facebook"></i></span>'),$twitter=a("<li>"),$twitter.html('<span class="socialclick twitter-share"><i class="fa fa-lg fa-twitter"></span>'),$google=a("<li>"),$google.html('<span class="socialclick google-share"><i class="fa fa-lg fa-google-plus"></i></span>'),$pinterest=a("<li>"),$pinterest.html('<span class="socialclick pinterest-share"><i class="fa fa-lg fa-pinterest"></i></span>'),a("span.socialclick").css("color",t),$links.append($facebook),$links.append($twitter),$links.append($google),$links.append($pinterest),s.before($overlay)}a.fn.socialpic=function(i){var i=i||[];return a(this).each(function(){s(a(this),i)}),this}}(jQuery),$(function(){$("body").on("click","span.socialclick",function(){var a=$(this).closest("div.wrap").find("img").attr("src");$(this).hasClass("facebook-share")&&window.open("https://www.facebook.com/sharer/sharer.php?u="+a,"Share Facebook",config="height=300, width=500"),$(this).hasClass("twitter-share")&&window.open("http://twitter.com/home?status=Currently inspired by "+a,"Share Twitter",config="height=300, width=500"),$(this).hasClass("google-share")&&window.open("https://plus.google.com/share?url="+a,"Share Google +",config="height=300, width=500"),$(this).hasClass("pinterest-share")&&window.open("http://www.pinterest.com/pin/create/button/?url="+a+"&media="+a+"&description=Currently%20Inspired%20By","Share Pinterest",config="height=300, width=500")})}),$(function(){$(".post-body img").socialpic()});
//]]>
</script>
</b:if>


Nota se isso não aparecer ao passar mouse na imagem considere a colocar o código seguinte acima do
</head>

<script type='text/javascript'>
  //<![CDATA[
       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
       //]]>
</script>



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