Saturday, 20 December 2014

Add Hover Share Buttons for All Images in Blogger Blogs

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.

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:)
Previous Post
Next Post

post written by: