Home / Blogger Widgets / Social Media

How To Add Together Social Icon Hover Plugin Inwards Blogger

By ahlikom
These days to a greater extent than in addition to to a greater extent than pic based blogs are trending inward the blogosphere. This mightiness endure because of the rapid increment inward the popularity of Pinterest (Worlds outset online Pin Board).  Keeping things aside Pictures create add together life to a deadening content. Moreover, it allows us to larn novel things that are likewise hard to understand. On the other hand, Picture Blog in addition to Social Media have a first-class human relationship because people dearest to portion images alongside their friends, solid unit of measurement in addition to colleagues.  Therefore, for each in addition to every Image based site it is essential to integrate foremost Social sharing plugin to maximize their social exposure. We create bring a Floating Social Sharing widget, but it cannot endure utilized on a weblog that solely host images. For that reason, our squad has assembled an “Image Hover Social Plugin” which volition allow your visitors to portion your content piece hovering over images.

How Social Image Hover Works?

Before nosotros saltation on to the tutorial, let’s outset larn how this matter works. All of us insert multiple images on our website thus this widget volition add together a Social Hover to our images. This volition display social sharing icons that tin solely endure accessed if person hovers over your images. It also has a Close button, removed the hover from the images. However, it volition come upwards dorsum if the page is refreshed again. The next animated screenshot just shows how this matter works.

How To Install Social Image Hover Plugin inward Blogger:

This tutorial is non that much tricky. All you lot postulate to create is to follow the steps mentioned below, in addition to you lot would endure able to handgrip things pretty handsomely. 
  • Go To Blogger.com >> Template.
  • Then conduct Edit HTML >> Proceed.
  • Now alongside the assist of CTRL+S search for ]]></b:skin> within your template in addition to higher upwards it glue the next 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/AVvXsEjvvSpajJlQlX63i6H_M5n6aiUp04PF3wyeXrCuIsG5bo9NplnqV7o-NR9MbE9EAPCRvUIVXKLSnO-hnkHkKLkzZelPFkhl0jhnpyM3p6u3VIyeq1D9Q-O_gZyt69h2G8x0YHYwscylEUFl/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 over again inside your template search for </head> in addition to just higher upwards it glue 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 higher upwards coding, Save your template past times pressing Save Template button.

Adding Social Hover Effect on Your Images inward Blogger:

Now finally, the well-nigh fascinating portion of the whole tutorial in addition to that, is adding Hover on specific Images. Remember: The Following method volition also piece of occupation flawlessly on WordPress Blogs thus experience complimentary to endeavor your luck. Follow the next instructions.
  • Go To Blogger.com >> Add New Post.
  • Then Go To the HTML TAB of your post service in addition to Paste the Following HTML Code.
<img alt="These days to a greater extent than in addition to to a greater extent than pic based blogs are trending inward the blogosphere How To Add Social Image Hover Plugin In Blogger" class="tc-hover pivot portion tweet addition 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 lot Like in addition to Copy its URL. Tip: Press Right clicks on Image in addition to Select “Copy Image URL”.
  • Now Replace Your-Image-URL-Here alongside your icon URL.
  • Then adapt the Width past times replacing 634px according to your need.
  • Also adapt the Height past times replacing 302px accordinly.
  • Done, acquire a caput in addition to seat out your post.
Additional Tip: IF you lot desire to exclude Few Social Sharing icons from Image hover thus merely exclude the CSS classes from the higher upwards coding. Following listing shows the holler of CSS Classes in addition to their Functions

class="tc-hover pivot portion tweet addition 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 alongside Pure HTML in addition to CSS, thus those readers who are non using Blogger, or they bring lately migrated to WordPress tin brand utilisation of this ultimate widget. It’s been a phenomenal calendar week thus far inward price of achievement in addition to Readership. We volition endure sharing or thus remarkable blogger tweaks in addition to widget thus remain tuned. If you lot bring whatsoever difficulty piece adding this widget thus experience complimentary to acquire out a comment. Take a lot assist of your dearest ones till thus peace, blessings in addition to happy hovering.