Memasang Hover Share Button Image Di blogger

Tutorial Memasang Hover Share Button Image Di blogger

Cara Memasang Tombol Share Button Ketika Image Di Sentuh Cursor (Hover). Kali ini saya akan memberika tutorial cara memasang atau menambahkan tombol share button social media pada image / gambar di postingan blog..

Mungkin kalian suka melihat ketika berkunjung ke blog orang / wordpress, ketika cursor, pointer mengarah ke gambar akan ada tombol untuk membagikan image ke sosial media dengan efect hover, ntah kalo di hp saya blm pernah liat :V

Pada tutorial yang sederhana ini saya akan memberikan efect hover sosial share button pada image di blogger.crot.cret..

Okeh lah tanpa banyak cingcong langsung saja kae tutorial cara pemasnagan social share btton hover imagenya..

Buat kalian yang ingin melihat tampilan dari sosial share button image ini bisa kunjungi blog ini Demo Hover Social Share Button Image Di blogger

Hover | Image Social Share button Overlay

• Langkah pertama kalian harus login terlebih dahulu ke blogger.com

• Setelah login kalian cari kode </head>

• Setelah ketemu, masukan css dibawah ini tepat di atasnya :)

<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>

• Setelah di pasang, sekarang kalian cari kode </body>

• Kalo sudah ketemu, masukan script berikut di atasnya

<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>

• Kalo sudah, sekarang tinggal save deh templatenya:)

• Dan selamat sekarang social share button imagenya sudah terpasang

Kalo icon sosial medianya tidak muncul pasang font awesome di blog kalian
dan
Kalo sosial share button imagenya tidak muncul ketika cursor diarahkan ke image. coba pasang kode ini di atas kode </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>

Mungkin cukup sampai di sini postingan kali ini tentang jQuery Plugin For Image Social Share Overlay socialpic. ini, semoga bermanfaat :)
Apabila ada yang tidak dimengerti, silahkan bertanya di kolom komentar ya :)