JQUERY: ADDING SLIDE OUT FACEBOOK LIKE BOX TO YOUR BLOG WITH HOVER EFFECT

Check out this cool Facebook like box that roll over when you put your mouse on the FACEBOOK logo. In case you’re asking yourself why do I need this! Well if you have loaded your blog side bar with stuffs (widgets) then this slide like box is suitable for you. Here is the image below.

Do you still want to see a live preview on how it works? Then check out this other blog for a live preview

Now how do you like it? If you have been searching for a widget like this then in about some lines you’ll see how you too can put it on your blog. So shall we proceed with the tutor?

ADDING SLIDE OUT FACEBOOK LIKE BOX TO YOUR BLOGGER BLOG WITH HOVER EFFECT

Ok! I am ready if you’re ready…

First loggin to your blogger blog dashboard and click on “design” then go to your “Edit HTML” and proceed.

Are you in your HTML edit? Now click the “Expand widget templates” box. Search for the tag </head>.

To make the search easy, simultaneously press your “ctrl + F” key to bring out a search box below your browser.

Have you seen the tag </head>? Right above the </head> tag past the below code.

[php]<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>[/php]

Save your work and we are almost through.

Go to Design, click Page Elements and click the “Add a new gadget”. On the page that pops up, select the “HTML/JavaScript” and paste the below code in it.

[php]<style type="text/css">

/*<![CDATA[*/

#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}

.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("http://3.bp.blogspot.com/-1GCgbuSZXK0/T38iRiVF41I/AAAAAAAABpg/WlGuQ3fi-Rs/s1600/vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}

/*]]>*/

</style>

<script type="text/javascript">

/*<![CDATA[*/

(function(w2b){

w2b(document).ready(function(){

var $dur = "medium"; // Duration of Animation

w2b("#fbplikebox").css({right: -250, "top" : 100 })

w2b("#fbplikebox").hover(function () {

w2b(this).stop().animate({

right: 0

}, $dur);

}, function () {

w2b(this).stop().animate({

right: -250

}, $dur);

});

w2b("#fbplikebox").show();

});

})(jQuery);

/*]]>*/

</script>

<div id="fbplikebox" style="display:none;">

<div class="fbplbadge"></div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=YOUR-FACEBOOK-PAGE-HERE&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#FFFFFF;" allowtransparency="true"></iframe>

</div>[/php]

For the code replace the “YOUR-FACEBOOK-PAGE-HERE” with your actual facebook page full URL.

Save your widget and voila! You have successfully added a facebook slide widget to your blog.

Now how simple was it? You can leave your thoughts and comments using the comment box below. If you also have a question or two regarding the topic, you can also use the comment box below to shine the light. Remember that your comment is valuable to us and very well welcomed.

Do you like the post? Then do click the like button, share us and also recommend us to friends so they can grab the excitement too. Do not forget to subscribe to our feed if you have not done so for latest updates on the go.