Friday, 21 October 2016

Simple #Social Image Hover #SharingPlugin for Blogger by #Tips4tricx

Simple Social Image Hover Sharing Plugin for Blogger

Simple Social Image Hover Sharing Plugin allows visitors can share your image direct to their social networks when they are hover on an image. This plugin supported Twitter, Facebook, Pinterest, LinkedIn and Google Plus buttons with cool effect! This plugin will enable your visitors to easily and simply share your images over major social networks!


Simple Social Image Hover Sharing Plugin for Blogger by tips4tricx Features of Simple Social Image Hover Sharing Plugin by tips4tricx

  • Quick Installation & Simple Usage 
  • No flash required 
  • Font Awesome included automatically 
  • Covering 5 Major Social Networks: Twitter, Facebook, Pinterest, LinkedIn and GooglePlus 
  • Works in all Modern Browsers 





This plugin works well regardless your image is aligned center, left or right, floating or none. The plugin also works well with images that’re wrapped by links or tables or any HTML elements. Just help your visitors sharing to your site image withing seconds with this awesome plugin!


No more frustrations! No more messy GUI! Just Simple and Quick plugin!
Before use

After you added this plugin to your Blogger – Blogspot website, just add “hover_share” word to your image alt. Your alt attribute can contain anything but must contain “hover_share” to make the image work with this plugin. In Post Editor, click on image, then click Property, and input your alt and click OK
Simple Social Image Hover Sharing Plugin for Blogger by tips4tricx
Input “alt” to make image work with Social Image Hover Sharing Plugin

Add a Gadget to Blogger

<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: 40px;
height: 40px;
line-height: 20px;
margin: 0 4px!important;
color: white;
text-decoration: none;
float: centre!important;
text-indent: 0!important;
font-size: 18px!important;
}
._140421_wrap .icons a i {
line-height: 40px;
}
._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: tips4tricx
Site: http://tips4tricx.blogspot.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="Get This Plugin" href="http://www.tips4tricx.blogspot.com" 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-WIDGET-OPTIONS
"Facebook": {
"start" : "_140421_facebook = ",
"default" : true,
"end" : ";/*_140421_facebook*/",
"type": "checkbox",
"check" : true,
"uncheck" : false,
"desc" : "Show Facebook button"
},
"Twitter": {
"start": "_140421_twitter = ",
"default": true,
"end": ";/*_140421_twitter*/",
"type": "checkbox",
"check" : true,
"uncheck" : false,
"desc": "Show Twitte button"
},
"Gplus": {
"start": "_140421_gplus = ",
"default": true,
"end": ";/*_140421_gplus*/",
"type": "checkbox",
"check" : true,
"uncheck" : false,
"desc": "Show Google+ button"
},
"Pinterest": {
"start": "_140421_pinterest = ",
"default": true,
"end": ";/*_140421_pinterest*/",
"type": "checkbox",
"check" : true,
"uncheck" : false,
"desc": "Show Pinterest button"
},
"Linkedin": {
"start": "_140421_linkedin = ",
"default": true,
"end": ";/*_140421_linkedin*/",
"type": "checkbox",
"check" : true,
"uncheck" : false,
"desc": "Show linkedIn button"
},
"Close": {
"start": "_140421_close = ",
"default": true,
"end": ";/*_140421_close*/",
"type": "checkbox",
"check" : true,
"uncheck" : false,
"desc": "Show Close button"
},
"Image Selector": {
"start": "_140421_image_selector = '",
"default": ".Blog img",
"end": "';/*_140421_image_selector*/",
"desc": "jQuery selector for the imagw which will be apply the buttons for. If you want to enable this for all images, just input \"img\""
}
BLOGGER-WIDGET-OPTIONS
-->

Save Changes and all done.
original source = sneeit.com
Previous Post
Next Post

post written by:

0 Google+:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks