How to Add Sliding Facebook Like Box In Blogger

Today in this post, I will be sharing with you on how to add sliding Facebook like box widget in blogger. Sliding Facebook like bo...

Today in this post, I will be sharing with you on how to add sliding Facebook like box widget in blogger.

Sliding Facebook like box is Facebook fan page box that allows blog users easily like you blog page on Facebook without the need of visiting your Facebook fan page or leaving your blog.

This widget helps in gaining more readers as well as increase online publicity.

Follow the simple steps to add sliding facebook like box.

How to Get Started

=> Log in to your blogger dashboard

=> Click on Layout

=> Then click on Add a Gadget

=> A pop up menu comes up, from the list of options select HTML/JavaScript Gadget

=> Copy and paste the code below code in the provided HTML box

<script type="text/javascript"> //<!-- $(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCsfw_WcX5rEUKnlk5BDKyl4SwnmaCme9bURCfH-K755sTjV1qSt5d3C8qDnwSGnz0YAOAByTczkAZciHs-Q0qYtK-G1bR_2Zfq4xmfMgPhhRic1J8ESI3HzTwEg4D0OlOXhxcJuhzFWO3/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style><div class="w2bslikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FTeyusfreedom&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div> </div>

=> Change the Teyusfreedom in the code above to your page username

=> Save the Gadget

=> Go to your blogger Template and Click on Edit HTML

=> Using CTRL + F, Search for </head> and before it, paste the code below

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

=> Save the Template and that’s all.

Hope it helps...

Feel free to share this post.

In order not to miss my daily updates, subscribe here.

Click on the link, type in your email address and immediately you are done; you will receive a confirmation mail. Confirm your email address and that’s all. Absolutely free! Henceforth, you’ll start receiving my daily updates via mail

Oladipupo Olutayo

FACEBOOK – www.fb.com/olutayo.segun or www.fb.com/teyusfreedom
TWITTER – www.twitter.com/teyusthedon
2GO - Teyus

 

Thank you!

Read my post on:

• Top Benefits of Having A Mobile Optimized Blog
• How to Permanently Delete a Blogger Blog
• How to Add Facebook Fan Box in Blogger
• Top 5 Most Useful Android Applications for Bloggers
• 6 Ways to Get Your Blog Post Indexed Quickly