Cara Membuat Hover Tombol Share pada Gambar Postingan blog

Cara Memasang Tombol Share pada Gambar Postingan Blogger - memungkinkan pengunjung dapat berbagi citra langsung ke jaringan sosial mereka saat mereka klik pada gambar. Plugin ini mendukung tombol Twitter, Facebook, Pinterest, LinkedIn dan GooglePlus dengan efek keren! Plugin ini akan memungkinkan pengunjung Anda untuk dengan mudah dan hanya berbagi gambar Anda melalui jaringan sosial utama!

Fitur Plugin Tombol Share img :

Instalasi Cepat & Penggunaan Sederhana
Tidak perlu flash
Font Awesome disertakan secara otomatis
Meliputi 5 Jaringan Sosial Utama: Twitter, Facebook, Pinterest, LinkedIn dan GooglePlus
Bekerja di semua Browser Modern

Demo untuk plugin ini

Cukup klik pada gambar di blog Demo di bawah untuk melihat bagaimana Tombol share muncul di gambar

Demo

Plugin ini bekerja dengan baik dari gambar Anda yang cocok, kiri atau kanan, mengambang atau tidak. Plugin ini juga bekerja dengan baik dengan gambar yang dibungkus oleh tautan atau tabel atau elemen HTML. Hanya membantu pengunjung Anda berbagi ke gambar situs Anda

Cara Install Hover Tombol Share Di Gambar

Masuk ke akun blogger agan
Kemudian klik menu Tata letak
Tambah Widget →Pilih HTML/Javascript →copy dan paste script di bawah ini dan klik save

 <style type="text/css">
._140421_wrap {
    position: relative;
}
._140421_wrap * {
    position: relative;
}
._140421_wrap .overlay,
._140421_wrap .icons-wrap {
    display: none;
}

._140421_wrap.active .overlay {
    background: white;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    filter: alpha(opacity=60);
    opacity: 0.6;
    display: block;
}
._140421_wrap.active .icons-wrap {
    height: 0;
    top: 50%;
    position: absolute;
    width: 100%;
    text-align: center;
    display: block;
}
._140421_wrap .icons-inner {
    margin: -1em 0 0 0;
}
._140421_wrap .icons a {
    display: inline-block;
    -webkit-border-radius: 100%;  
    -moz-border-radius: 100%;  
    border-radius: 100%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin: 0 4px!important;
    color: white;
    text-decoration: none;
    float: none!important;
    text-indent: 0!important;
    font-size: 12px!important;
}
._140421_wrap .icons a i {
    line-height: 20px;
}
._140421_wrap .icons a:hover {
    filter: alpha(opacity=60);  opacity: 0.6;
}
._140421_wrap .icons a.facebook {background:#4F6AA3}
._140421_wrap .icons a.twitter {background:#00CCFF}
._140421_wrap .icons a.google-plus {background:#E05C4C}
._140421_wrap .icons a.pinterest {background:#DC2A33}
._140421_wrap .icons a.linkedin {background:#529FC2}
._140421_wrap .icons a.close {background:#333}
._140421_wrap .icons a.plus {background:#F65C43}
</style>

<script type="text/javascript">
/*
Name: Simple Social Image Hover Sharing Plugin for Blogger
Author: Tien Nguyen
Site: http://sneeit.com
*/
/*Settings*/
_140421_facebook = true;/*_140421_facebook*/
_140421_twitter = true;/*_140421_twitter*/
_140421_gplus = true;/*_140421_gplus*/
_140421_pinterest = true;/*_140421_pinterest*/
_140421_linkedin = true;/*_140421_linkedin*/
_140421_close = true;/*_140421_close*/
_140421_image_selector = '.Blog img';/*_140421_image_selector*/

// SHOW CONTENT xudhaxsite
// FLAGS xudhax site
// xudhaxsite.net
if (typeof(jquery_included) == 'undefined') {
    jquery_included = false;
}
_s7HjO = ['undefined','undefined','script','src','http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js','type','text/javascript','head','link[href*="font-awesome.css"]','link','href','http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css','rel','stylesheet','head','','#_140421_hook','.widget','','a','_140421_remove','style','id','_140421_image_','_140421_image','<div class="_140421_wrap active" id="_140421_wrap_','" style="','">
</div>
','#_140421_wrap_','#','?','src','title','<div class="overlay">
</div>
','<div class="icons-wrap">
<div class="icons">
<div class="icons-inner">
</div>
</div>
</div>
','.overlay','.icons-wrap','.icons-inner','<a target="_blank" href="http://www.facebook.com/sharer.php?u=','%23_140421_image_','" class="facebook" title="Share via Facebook"><i class="fa fa-facebook"></i></a>','<a target="_blank" href="https://twitter.com/share?url=','%23_140421_image_','&text=','" class="twitter" title="Share via Twitter"><i class="fa fa-twitter"></i></a>','<a target="_blank" href="https://plusone.google.com/_/+1/confirm?hl=en&url=','%23_140421_image_','" class="google-plus" title="Share via Google Plus"><i class="fa fa-google-plus"></i></a>','<a target="_blank" href="http://www.pinterest.com/pin/create/bookmarklet/?media=','&url=','&description=','" class="pinterest" title="Share via Pinterest"><i class="fa fa-pinterest"></i></a>','<a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=','&title=','&source=','" class="linkedin" title="Share via LinkedIn"><i class="fa fa-linkedin"></i></a>','<a href="#_140421_image_','" class="close" title="Close"><i class="fa fa-times"></i></a>','<a target="_blank" title="About Hover Share Plugin" href="http://www.xudhaxsite.net/2017/12/cara-membuat-hover-tombol-share-pada.html" class="plus"><i class="fa fa-question"></i></a>','.active','.overlay','.icons-wrap','.overlay','.icons-wrap','.close','.overlay','.icons-wrap','active','._140421_remove','html, body'];if(typeof(_140421)==_s7HjO[0]){_140421=false;}if(!_140421){_140421=true;function _fEaQ(){if(typeof(jQuery)==_s7HjO[1]){if(!jquery_included){jquery_included=true;var _vTsT=document.createElement(_s7HjO[2]);_vTsT.setAttribute(_s7HjO[3],_s7HjO[4]);_vTsT.setAttribute(_s7HjO[5],_s7HjO[6]);document.getElementsByTagName(_s7HjO[7])[0].appendChild(_vTsT);}setTimeout(function(){_fEaQ();},50);}else{if(!($(_s7HjO[8]).length)){_vTsT=document.createElement(_s7HjO[9]);_vTsT.setAttribute(_s7HjO[10],_s7HjO[11]);_vTsT.setAttribute(_s7HjO[12],_s7HjO[13]);document.getElementsByTagName(_s7HjO[14])[0].appendChild(_vTsT);}$(document).ready(function(){var _vFqR=_s7HjO[15];$(_s7HjO[16]).each(function(){$(this).parents(_s7HjO[17]).hide();});if($(_140421_image_selector).length==0){return;}var _vJoU=0;$(_140421_image_selector).each(function(){var _vIdO=_s7HjO[18];if($(this).parent().is(_s7HjO[19])){$(this).parent().addClass(_s7HjO[20]);_vIdO=$(this).parent().attr(_s7HjO[21]);$(this).unwrap();}$(this).attr(_s7HjO[22],_s7HjO[23]+_vJoU);$(this).addClass(_s7HjO[24]);$(this).wrap(_s7HjO[25]+_vJoU+_s7HjO[26]+_vIdO+_s7HjO[27]);var _vZbK=$(_s7HjO[28]+_vJoU);var _vHwX=window.location.href;_vHwX=_vHwX.split(_s7HjO[29]);_vHwX=_vHwX[0];_vHwX=_vHwX.split(_s7HjO[30]);_vHwX=_vHwX[0];var _vEmJ=$(this).attr(_s7HjO[31]);var _vWfK=$(_s7HjO[32]).html();_vZbK.append(_s7HjO[33]);_vZbK.append(_s7HjO[34]);_vZbK.find(_s7HjO[35]).hide();_vZbK.find(_s7HjO[36]).hide();var _vOjJ=_vZbK.find(_s7HjO[37]);if(_140421_facebook){_vOjJ.append(_s7HjO[38]+_vHwX+_s7HjO[39]+_vJoU+_s7HjO[40]);}if(_140421_twitter){_vOjJ.append(_s7HjO[41]+_vHwX+_s7HjO[42]+_vJoU+_s7HjO[43]+encodeURIComponent(_vWfK)+_s7HjO[44]);}if(_140421_gplus){_vOjJ.append(_s7HjO[45]+_vHwX+_s7HjO[46]+_vJoU+_s7HjO[47]);}if(_140421_pinterest){_vOjJ.append(_s7HjO[48]+encodeURIComponent(_vEmJ)+_s7HjO[49]+encodeURIComponent(_vHwX)+_s7HjO[50]+encodeURIComponent(_vWfK)+_s7HjO[51]);}if(_140421_linkedin){_vOjJ.append(_s7HjO[52]+_vEmJ+_s7HjO[53]+encodeURIComponent(_vWfK)+_s7HjO[54]+_vHwX+_s7HjO[55]);}if(_140421_close){_vOjJ.append(_s7HjO[56]+_vJoU+_s7HjO[57]);}_vOjJ.append(_s7HjO[58]);_vZbK.mouseenter(function(){if(_vZbK.is(_s7HjO[59])){_vZbK.find(_s7HjO[60]).fadeIn();_vZbK.find(_s7HjO[61]).fadeIn();}});_vZbK.mouseleave(function(){_vZbK.find(_s7HjO[62]).hide();_vZbK.find(_s7HjO[63]).hide();});_vZbK.find(_s7HjO[64]).click(function(){_vZbK.find(_s7HjO[65]).hide();_vZbK.find(_s7HjO[66]).hide();_vZbK.removeClass(_s7HjO[67]);});_vJoU++;});$(_s7HjO[68]).remove();var _vXoT=window.location.hash;if(_vXoT){$(_s7HjO[69]).animate({scrollTop:$(_vXoT).offset().top},500);}});}}_fEaQ();}
    
</script>

Mengatasi Masalah

Setelah menambahkan plugin ini ke situs Blogger - Blogspot Anda, Tapi saat di install tidak bekerja cukup tambahkan kata "hover_share" ke alt gambar Anda . Atribut alt Anda bisa berisi apa saja tapi harus berisi " hover_share " untuk membuat gambar bekerja dengan plugin ini. Di Post Editor , klik pada gambar, lalu klik Properties , dan masukan alt Anda dan klik OK