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/AVvXsEjF3i8RIfmHgvL6qglaFVgqQBEmxMCzAjsFftXbj7wSxxm427R0-oCL-jKlTW914JfLp6ftiVR2ryfKIEuhmaTWXhvw_iB3MAvKbBl5wEuzsGuzprh115BPShE2SVrSw2iiDzau9CbUnKwh/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="https://mybloggerlab.googlecode.com/files/TC.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
