Social Follow Widget with Hover Zoom Effect

Posted On // 5 comments


Social Follow Zoom effect
Today we will see how you can add Social Follow Widget with Hover Zoom Effect to your blogger blog. Basically the concept behind this widget is that whenever someones hovers over any of the button say Facebook then the whole box and the Facebook box will become bigger with a great Zoom effect made just with CSS without using any JavaScript or images.

These widgets help you to fasten your blog speed by minimizing JavaScript codes and Images. A quick live working demo of these widgets can be seen by clicking the below button.

Live Demo

Once you have seen the demo follow the below step to add this widget to your blog.



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.

You are done now. Now you and your visitors can see this awesome Social Follow Widget with Hover Zoom Effect in your blogger blog.

5 comments

Rafay Ghafoor Author
29 June 2013 at 08:33

Niice tut

Reply
Lawrence Author
8 October 2013 at 01:38

This is a very nice tutorial!
Nice work

Reply
12 November 2013 at 14:04

ΚΑΛΙΣΠΕΡΑ ΔΕΝ ΔΟΥΛΕΘΕΙ ΑΚΡΙΒΩΣ ΕΤΣΙ ΒΟΗΘΕΙΑ

Reply
nextandy™ Author
25 November 2013 at 23:18

saya tidak tau cara memasangnya

Reply
15 June 2016 at 03:26

This is really nice work. I would like to congratulate you.

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Social Follow Widget with Hover Zoom Effect |