How To Add Social Image Hover Plugin In Blogger

Advertisements
These days more and more picture based blogs are trending in the blogosphere. This might be because of the rapid growth in the popularity of Pinterest (Worlds first online Pin Board).  Keeping things aside Pictures do add life to a dull content. Moreover, it allows us to learn new things that are too difficult to understand. On the other hand, Picture Blog and Social Media have a splendid relationship because people love to share images with their friends, family and colleagues.  Therefore, for each and every Image based site it is essential to integrate foremost Social sharing plugin to maximize their social exposure. We do have a Floating Social Sharing widget, but it cannot be utilized on a blog that only host images. For that reason, our team has assembled an “Image Hover Social Plugin” which will allow your visitors to share your content while hovering over images.



How Social Image Hover Works?

Before we jump on to the tutorial, let’s first learn how this thing works. All of us insert multiple images on our website so this widget will add a Social Hover to our images. This will display social sharing icons that can only be accessed if someone hovers over your images. It also has a Close button, removed the hover from the images. However, it will come back if the page is refreshed again. The following animated screenshot exactly shows how this thing works.

How To Install Social Image Hover Plugin in Blogger:

This tutorial is not that much tricky. All you need to do is to follow the steps mentioned below, and you would be able to handle things pretty handsomely. 
  • Go To Blogger.com >> Template.
  • Then select Edit HTML >> Proceed.
  • Now with the help of CTRL+S search for ]]></b:skin> within your template and above it paste the following code.
/*  MBL Social Image Hover Plugin: (www.mybloggerlab.com) */
.tchover-wrapper{
 position:relative;
 overflow:hidden;
 width:0px;
 height:0px;
 margin:0 0 15px 0;
}
.tchover-wrapper.tcleft{
 float:left;
 margin:0 20px 15px 0 !important;
}
.tchover-wrapper.tcright{
 float:right;
 margin:0 0 15px 20px !important;
}
.tchover-wrapper.tcmiddle{
 margin:12px auto !important;
}
.tchover-wrapper img{
 z-index:1;
 position:relative;
 max-width:100% !important;
 max-width:100% !important;
 margin:0px !important;
 padding:0px !important;
 border:none !important;
 background:#ffffff;
 filter: none !important;
 -ms-filter:none !important;
}
.tchover-wrapper span.tchover-span{
 display:none;
 z-index:3;
 height:100%;
 width:100%;
 position:absolute;
 top:0;
 float:left;
}

.tchover-wrapper span.tchover-span a.tchover-button{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8TpJbBs_4l3b4W91KlmAA741Fm_KT5-KjYE0yqnqc9ngwejR1FCU-I0YGVvQ5FR6MpDmUY4o5oJI0mQxxyd9sbUs3-yg6MOuO3OJgh0XIPSpkTLZSmst1kF_rsj2RvGZ5jxY26lVhdRLK/s1600/MBL+ICONS.png) no-repeat transparent;
 filter: none !important;
 -ms-filter:none !important;
 display:block;
 width:24px;
 height:24px;
 float:left;
 text-indent:-9999px;
 margin-right:5px;
 border:0px !important;
 outline:none !important;
}
.tchover-wrapper span.tchover-span a.tchover-button.share{background-position:0 0;}
.tcnosup .tchover-wrapper span.tchover-span a.tchover-button.share:hover{background-position:0 -25px;}
.tchover-wrapper span.tchover-span a.tchover-button.tweet{background-position:0 -50px;}
.tcnosup .tchover-wrapper span.tchover-span a.tchover-button.tweet:hover{background-position:0 -75px;}
.tchover-wrapper span.tchover-span a.tchover-button.pin{background-position:0 -100px;}
.tcnosup .tchover-wrapper span.tchover-span a.tchover-button.pin:hover{background-position:0 -125px;}
.tchover-wrapper span.tchover-span a.tchover-button.plus{background-position:0 -150px;}
.tcnosup .tchover-wrapper span.tchover-span a.tchover-button.plus:hover{background-position:0 -175px;}
.tchover-wrapper span.tchover-span a.tchover-button.linkedin{background-position:0 -200px;}
.tcnosup .tchover-wrapper span.tchover-span a.tchover-button.linkedin:hover{background-position:0 -225px;}
.tchover-wrapper span.tchover-span a.tchover-button.flickr{background-position:0 -250px;}
.tcnosup .tchover-wrapper span.tchover-span a.tchover-button.flickr:hover{background-position:0 -275px;}
.tchover-wrapper span.tchover-span a.tchover-button.dribbble{background-position:0 -300px;}
.tcnosup .tchover-wrapper span.tchover-span a.tchover-button.dribbble:hover{background-position:0 -325px;}
.tchover-wrapper span.tchover-span a.tchover-button.close{background-position:0 -350px;}
.tcnosup .tchover-wrapper span.tchover-span a.tchover-button.close:hover{background-position:0 -375px;}
.tchover-wrapper span.tchover-span a.tchover-button.reddit{background-position:0 -400px;}
.tcnosup .tchover-wrapper span.tchover-span a.tchover-button.reddit:hover{background-position:0 -425px;}
.tchover-wrapper span.tchover-span a.tchover-button.digg{background-position:0 -450px;}
.tcnosup .tchover-wrapper span.tchover-span a.tchover-button.digg:hover{background-position:0 -475px;} 
  • Once again within your template search for </head> and just above it paste the Following Jquery coding.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=3.4.2" type="text/javascript"></script>
<script src="https://apis.google.com/js/plusone.js?ver=3.4.2" type="text/javascript"></script>
<script type="text/javascript">jQuery(document).ready(function(){jQuery().tchover({'counter_url':'CURRENT','flickrName':'TylerColwell','dribbbleName':'TylerColwell','order':'share,tweet,plus,pin,linkedin,reddit,digg,flickr,dribbble,close','sitewide':false,'imgSelector':'.post img','sitewideShow':'','sitewide_fburl':'CURRENT','sitewide_tweeturl':'CURRENT','sitewide_tweet':'','sitewide_plusurl':'CURRENT','sitewide_lnkurl':'CURRENT', 'sitewide_redditurl':'CURRENT', 'sitewide_diggurl':'CURRENT'});});</script>
<script src="http://connect.facebook.net/en_US/all.js?ver=3.4.2#xfbml=1" type="text/javascript"></script>
<script src="http://plugins.tyler.tc/social-image-hover/wp-content/plugins/tc-social-hover/inc/tchover.js" type="text/javascript"></script>
  • After pasting all of the above coding, Save your template by pressing Save Template button.

Adding Social Hover Effect on Your Images in Blogger:

Now finally, the most fascinating part of the whole tutorial and that, is adding Hover on specific Images. Remember: The Following method will also work flawlessly on WordPress Blogs so feel free to try your luck. Follow the following instructions.
  • Go To Blogger.com >> Add New Post.
  • Then Go To the HTML TAB of your post and Paste the Following HTML Code.
<img alt="alt text" class="tc-hover pin share tweet plus linkedin reddit digg flickr dribbble close" data-diggurl="CURRENT" data-fburl="CURRENT" data-linkedinurl="CURRENT" data-plusurl="CURRENT"data-redditurl="CURRENT"data-tweet=""data-tweeturl="CURRENT" height="302px" src="Your-Image-URL-Here" width="634px" /><br />
  • Upload Any Image that you Like and Copy its URL. Tip: Press Right clicks on Image and Select “Copy Image URL”.
  • Now Replace Your-Image-URL-Here with your image URL.
  • Then adjust the Width by replacing 634px according to your need.
  • Also adjust the Height by replacing 302px accordinly.
  • Done, go a head and publish your post.
Additional Tip: IF you want to exclude Few Social Sharing icons from Image hover then simply exclude the CSS classes from the above coding. Following list shows the name of CSS Classes and their Functions

class="tc-hover pin share tweet plus linkedin reddit digg flickr dribbble close"

1. pin: For Pinterest
2. share: For Facebook
3. tweet: For Twitter
4. plus: For Google Plus
5. likedin: For Linkedin
6. reddit: For Reddit
7. digg: For Digg
8. flickr: For Flickr
9. Dribble: For Dribble

From The Editor’s Desk:

This Social Image Hover is built with Pure HTML and CSS, so those readers who are not using Blogger, or they have recently migrated to WordPress can make use of this ultimate widget. It’s been a phenomenal week so far in terms of achievement and Readership. We will be sharing some remarkable blogger tweaks and widget so stay tuned. If you have any difficulty while adding this widget then feel free to leave a comment. Take a lot care of your love ones till then peace, blessings and happy hovering.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

13 comments

October 12, 2012 at 6:26 PM

Very nice widget.
I applied it on my blog it gives a professional look to my blog..

Thesis 2.0 worth $164 free giveaway:

www.MyBloggerNews.com

October 12, 2012 at 7:56 PM

Nice Post Brother Keep Writting.

Regards:
Syed Bahadur Shah
Http://SyedBahadurShah4u.Blogspot.Com/

October 12, 2012 at 10:25 PM

I think the almost same widjet was shared before on MBL,but it has some new features.The tutorial video made it much simplified.Nice to see Haider as Co-author and adsense on MBL.Keep it up Syed....

Get Domain For Free-giveaway

October 13, 2012 at 12:38 AM

great post thanks for sharing this :)

Regards
Rahul Kashyap
Blog: movies4u.us

Anonymous
October 13, 2012 at 12:43 AM

Why JQuery, you can do this with CSS.

Some awesome Icon Fonts to replace Image Icons

October 13, 2012 at 1:00 AM

Now with the help of CTRL+S search for ]]> within your template and above it paste the following code.
Please replace S with F in above para in your post

Editorial Team MOD
October 13, 2012 at 2:23 AM

No Brother, This Widget is First Time Release on MBL (There Was No Widget Related to it). Thanks For the Remarks, This Success is because of Readers Link You Buddy. Peace

Editorial Team MOD
October 13, 2012 at 2:27 AM

OH Thanks, Buddy. We Missed out That Point. Once Again Thanks for pointing out a Blunder it has been updated. Peace

Editorial Team MOD
October 13, 2012 at 2:30 AM

Well, You are correct at your perspective but we tried with CSS but the results were not that much great. So we decided to use Jquery and Buddy it will not affect your Speed (That we can grant). Peace

October 13, 2012 at 9:26 AM

Thanks for all those efforts, but AddThis made it so handy..
we don't have to do it manually :)

REF: http://www.addthis.com/labs/photo-sharing

Editorial Team MOD
October 13, 2012 at 9:50 AM

OH, yes. We were unaware of that. Sounds Pretty Handy. Thanks For Sharing. Peace and Blessings

Editorial Team MOD
October 13, 2012 at 9:53 AM

BTW: They Don't have the Close Button! Sometime user might get annoyed of this Hover. May be they will update it sooner.

July 10, 2013 at 3:37 AM

Hi, Great and easy to use plug in.. Is it possible to get it to share the image as opposed to the page it's attached to? I'm looking to use it in a gallery so that the viewers can share a picture from the site on social media... Yes I still need a link back to the page (responsive website...not a blog or wordpress I'm afraid) but the image needs to be present to catch others eyes.... As we all know a picture is worth a thousand words.... Or have I done something wrong and it does that already??

Cheers'

Andy

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.