Last Updated:
Image Hover Social Media Sharing Plugin for Blogger

Image Hover Social Media Sharing Plugin for Blogger

A brand new and very beautiful thing for all Blogger, After receiving great response for all my widget from my entire visitors today I have also another beautiful thing from which you visitor can share post on Facebook Twitter and Pinterest when across the mouse over the image immediate social media sharing button will appear on the image from which the coming visitors can share your post. You should also check my previous I have shared two Popup Email Subscription Box with Facebook Twitter and Google Plus following
Social Media Sharing Image hover
 

Checkout Widget for Blogger 

How to install Image Hover Social Media Sharing Plugin for Blogger.

Before installing this widget you must logon in Blogger.
After that you don’t have to do anything for installing this widget just paste following code and insert into HTML/Javascript Gadget

<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: https://www.tipstricksisland.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
// FLAGS
// Flag check jQuery to prevent duplicate load jquery
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.sneeit.com/2014/04/simple-social-image-hover-sharing.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> 

 

 Blogger Tips 

Hope you will find this widget helpful for your Blog.
For Further assistance you can contact me by replying in this post as soon as possible I will reply you.

Comments