Here is another stylish facebook like box, this widget is design in three awesome style and it will slide out smooth when you place your cursor on the widget banner due to the jQuery effect that i included.
In my previous post, i have discuss a lot of tutorials similar to this, like how to add facebook, twitter, google plus, youtube, rss slide out widget which is very similar to this, but the difference is that, this is a single widget, how to add facebook like box to your blog and how to add facebook like box below blog post, and you should expecting more of this. For you to add this great widget to your blog, simply follow the few steps below.
How To Add The Widget To Your Blog/Site
STEP 1
If you have already add jquery plugin to your blog, then skip the step.
- Go to your blogger dashboard
- Click on "Design" > "Edit HTML"
- Use ctrl to find <head> and paste the following code inside/after <head> tag
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
- Click "SAVE TEMPLATE"
- Go to "Design" > "Page elements" > "Add a Gadget"
- Choose "HTML/JavaScript" from the list of the gadgets and paste the code below in the content box leaving the title blank.
<!-- Realcombiz Facebook Widget Start --><script type="text/javascript">/*<![CDATA[*/jQuery(document).ready(function() {jQuery(".rblikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});/*]]>*/</script><style type="text/css">.rblikebox{background: url("IMAGE URL") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 42px;width: 245px;z-index: 9999999;position:fixed;right:-250px;top:20%;}.rblikebox div{border:none;position:relative;display:block;}.rblikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 999;}.rblikebox span a{color: gray;text-decoration:none;}.rblikebox span a:hover{text-decoration:underline;}</style><div class="rblikebox"><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/realcombiz&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><a href='http://realcombiz.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNZ8ThCPB_2IvRviLQs6XbpFDg646tsrLa2_pBaBzjGiNJ4f-Z7ukEfN3752U5fU_dlZgGvPWs_20c-5oRGKlxlCtCr356V4i00c0mkUFZYlZJ8zxqmMM6tC9MVfs_mN0ZVAb10sQHbnM/s1600/1x1juice.png'/></a></div><!--Realcombiz Widgets by realcombiz.com --><!-- Realcombiz Facebook Widget End -->
- Replace realcombiz with your facebook fan page username
- Choose from any of the three style and replace IMAGE URL with the image url of the style you choose
STYLE 1
IMAGE 1 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0jxKmWJhRWf7XPsJJciqgeKZNHWzcSuhU_klxE0IAOJm3tW-UY4w6cdJ473pplQEVhP7B2ZdxR_B13Au1dWZ_bB7UWrfgz_nLW0voGnoBvEmnm_LKY6fOz5hAp68zXE7OdBhGO4SUyWAc/s1600/rb+facebook+slide+out+widget.png
STYLE 2
IMAGE 2 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkXos2gR6UU-wynjk5arDY3nV3qMyKTKBryd4OzpIcWSLoHgN4Wx2_cTg4CI8Qo_AYfbOmYtxMyGruEDqf0887yBMyuK7Ouuf31bBEd9U7eFsW7Q9mHuiDz8bENuU9LcPDXtgNW0jTt1rx/s1600/rb+facebook+slide+out+widget+2.png
STYLE 3
IMAGE 3 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM4LLFALfvkYXmsjV03Jgl7gZFzdVFaVxJLe3LL-gX-4W313ogEeaN9qLOExacJiUMOEP5N4p3yVdv8CDRjmmRmPLNV0pdkn3AYEOzfmWAgLWL1JsLou1dGoO_ZRaTCZu0krTGlpA1-fCA/s1600/rb+facebook+slide+out+widget+3.png
- Click "Save" and you are done, check your blog to see the awesome sliding widget.
Subscribe For Free Updates!
*Please confirm the email sent to your inbox after clicking "Sign Up!".
Subscribe RSS
Follow us on Facebook
Follow us on Twitter
Circle us on Google+
Connect on LinkedIn
Follow us on Pinterest
Connect on StumbleUpon
Thanks it works!
ReplyDeleteI really would like to use this....BUT....
ReplyDeleteWhen I view my web page in IE9 the box sits stubbornly in the middle of the page and doesn't slide in and out......
You can see it here www.villaralfa.com/404.shtml
It is fine on every other browser known to mankind!!
Internet explorer suck! It hardly support few javascript script code, that's why it's a bit mess up. But it will work perfectly well in all other browsers.
DeleteThis comment has been removed by the author.
ReplyDeletehey.....
ReplyDeletei've added ur facebook widget to my blog but it's not sliding out. so please help me... my blog is Hq Games world
This comment has been removed by a blog administrator.
ReplyDelete