Cara Memasang Hover Tombol Share pada Gambar Postingan blog

Cara Memasang Tombol Share pada Gambar Postingan di blog - Tombol Share merupakan salah satu yang berperan penting atas kemajuan salah satu blog,karena Pengunjung blog tidak hanya yang datang dari Google Search Engine,tetapi Banyak juga para pengujung yang datang dari berbagai Media Social seperti Facebook,Twitter,Google+ bahkan Media Social lain nya,tergantung orang-orang yang men Share nya ke akun media social mereka punya

Pada Umum nya tombol media social yang mereka Pasang yakni para blogger di bagian atas postingan,bawah Postingan dan bahkan ada yang memasang di samping kiri/kanan postingan blog,sehingga tampilan postingan blog semakin menarik di lihat oleh para pengujung blog

Selain untuk mempercantik blog,Tombol Share ini sengaja di pasang oleh pemilik suatu blog untuk memudahkan para pengujung untuk berbagi artikel yang sedang mereka baca ke akum media social mereka yaitu dengan meng klik salah satu icon media social yang mereka punya

Namun kali ini saya akan berbagi cara memasang Tombol share ini bukan di bawah postingan atau di atas atau juga di samping postingan,tetapi kali ini saya akan berbagi trik bagai mana cara memasang tombol Share Media Social ini di bagian tengah pada gambar/image dalam postingan blog

Dan cara Kerja Tombol Share media social ini sama seperti biasa nya,namun tombol Share ini akan muncul ketika para pengujung menyentuh salah satu gambar yang ada di dalam postingan tersebut,dan tombol share tersebut akan hilang ketika pengujung melepas nya

Ya seperti hal nya Link pada postingan,akan berubah warna ketika di sentuh,begitu juga dengan trik ini,media social ini akan tampil ketika para pengujung menyentuh salah satu dari gambar yang berada di postingan tersebut,

Dan jika Anda tertarik dengan cara memasang Tombol Share di tengah gambar ini,anda bisa mengikuti tutorial atau langkah-langkah pemasangan nya di bawah ini

• Silahkan masuk ke Dashboard Blogger
• Kemudian silahkan anda klik Template yang berada di bagain kiri Dashboard Blogger
• Setelah itu silahkan klik Edit Html
• Setelah anda berada di bagian Edit Html kemudian silahkan anda cari kode </head> untuk memudahkan pencaian anda,silahkan anda tekan tombol Ctrl+F secara bersamaan dan letakan kode berikut sebelum kode </head> tersebut

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

• Langkah selanjut nya silahkan anda cari kode </body> pada umum nya kode tersebut berada di akhir kode pada template anda,lalu letakan kode berikut sebelum kode tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
/*http://infotrens.com*/
!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>

• Setelah itu silahkan anda Save Template dan lihat hasil nya

Nah itulah cara memasang Hover Tombol Share media social pada gambar,semoga artikel nya bisa membantu sobat semua,dan semoga artikel nya bermanfaat.

• SHARES
• Share
• Tweet
• Share
• Share

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by D2Ubed, Published at September 12, 2017 and have 0 komentar