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 aku akan memberika tutorial cara memasang atau menambahkan tombol share button social media pada image / gambar di postingan blog..

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

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

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

Buat kalian yang ingin melihat tampilan dari sosial share button image ini dapat 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 instruksi </head>

• Setelah ketemu, masukan css dibawah ini sempurna 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, kini kalian cari instruksi </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, kini tinggal save deh templatenya:)

• Dan selamat kini 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 dikala cursor diarahkan ke image. coba pasang instruksi ini di atas instruksi </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 hingga di sini postingan kali ini perihal jQuery Plugin For Image Social Share Overlay socialpic. ini, supaya bermanfaat :)
Apabila ada yang tidak dimengerti, silahkan bertanya di kolom komentar ya :)