Add Hover Share Buttons for All Images in Blogger Blogs

Last two days I was continuous posting on Sharing Widgets for blogger. But not for sharing images on blogger. It will so easy to increase our blog traffic using image by sharing it them over social websites. If you want to increase your blog traffic using images then you can follow up this method on your blog.

Add Hover Share Buttons for All Images in Blogger Blogs

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

Step 1: Go to Blogger >> Template >> Edit HTML
Step 2:  If you haven’t installed jQuery on your blog, then first install it by finding <head> tag and paste the following code after/below <head> tag,

<script src=””></script>

Step 3: Now, search for </head> tag and paste the following code just above/before </head> tag,

.mpt-share-img {
position: absolute;
top: 5px;
opacity: 0;
left: 10px;
.share-mpt-img {
position: relative;
$(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>’);
$(“.share-mpt-img”).hover(function() {
opacity: 1
}, 400);
}, function() {
opacity: 0
}, 400);
<script type=”text/javascript” src=”//”></script>

Step 4: Save your template and check your blog. Cool!!
That’s it! Hope you guys will like this widget. If it so kindly share this new widget with your friends and do some likes. Don’t forget to share your thoughts in comment below! If you’re facing any issues then drop them in comments! Cheers:)

About Harshit Jain

Harshit Jain is a tech-savvy blogger. He is graduated from Mumbai University. He likes to share his knowledge through his own blog at TripoSoft, Best Beard Trimmer, Best Electric Toothbrush & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.