Today I’ve another new tool for sharing images on Blogger. You may ask how this tool works? The answer is, when someone else keep their mouse/cursor over the image means it will hover and at that time these sharing buttons will appears. It is so simple, which was first published by MyPremiumTricks authors. So I thanks them before getting into this article. You can check out live preview at here.
This widget was developed using API and with some java scripts from AddThis tool. And jQurey is also used to make this tool appear on your blogs. It wont take more time load, so it will be first advantage. Users can share the images on Facebook, Twitter, Pinterest, Google+ and on LinkedIn. Why are you waiting? Get started to to add this awesome widget on your blog? Then join me with this tutorial,
Add Stylish Share Buttons On Image Hover on Blogger
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<style>
.mpt-share-img {
position: absolute;
top: 5px;
opacity: 0;
left: 10px;
}
.share-mpt-img {
position: relative;
}
</style>
<script>
$(function() {
var code = ‘<div class=”mpt-share-img”><a class=”addthis_button_facebook”></a><a class=”addthis_button_twitter”></a><a class=”addthis_button_pinterest_share”></a><a class=”addthis_button_google_plusone_share”></a><a class=”addthis_button_linkedin”></a></div>’;
$(‘img’).wrap(‘<div class=”share-mpt-img”></div>’);
$(code).appendTo(“.share-mpt-img”);
$(“.share-mpt-img”).hover(function() {
$(this).find(“.mpt-share-img”).animate({
opacity: 1
}, 400);
}, function() {
$(this).find(“.mpt-share-img”).animate({
opacity: 0
}, 400);
});
});
</script>
<script type=”text/javascript” src=”//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-533d0d2235d3ed1b”></script>