Social Follow Widget with Hover Zoom Effect

Adding the HTML & CSS

Adding this widget is really simple and does not need much effort. So first of all go to Blog Title → Template → Edit HTML. Secondly search for the data code <data:post.body/>
There may be more than one <data:post.body/> so make sure you have the right one. After searching the the data tag paste the given code just below it.

 <!-- Hover Effect in Social Follow Us Widget by AllBloggerTricks.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<link href='https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt.css' rel='stylesheet' type='text/css'/>
<div id="cenbox">
<div class="zoombox">
    <p>FOLLOW US ON</p>
    <button class="facebook"><a href="FB URL" target='_blank' rel='nofollow'>facebook</a></button>
    <button class="twitter"><a href="Twitter URL" target='_blank' rel='nofollow'>twitter</a></button>
    <button class="gplus"><a href="Google+ URL" target='_blank' rel='nofollow'>google+</a></button>
    <button class="pinterest"><a href="Pinterest URL" target='_blank' rel='nofollow'>pinterest</a></button>
</div>
</div>
</b:if>
<!-- Hover Effect in Social Follow Us Widget by AllBloggerTricks.com -->

 Replace the text in blue with your desired URLs. Finally save the template.