Friday, 5 July 2013

Filled Under: ,

Facebook Slide Out Like Box Widget For Blog !!

This widget is designed in three awesome style and it will slide out smooth when you place your cursor on the widget banner due to the jQuery effect . Simply follow the steps below to add this widget on your blog.


STEP 1

If you have already add jquery plugin to your blog, then skip the step else follow the steps below.
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"

STEP 2

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 and leave the title blank.

<!-- Computer Freaks 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhusz81PgQtniMuHQ23k3iXZhvuyq-qf63YGwE_rJ_S9WvhUKn-YJVsJn-8muJKVJY9bS8m5unTUb_5xl5z0gaBrKxlogMrCPKzzuHdIhyayaPs1XUojS7FayzjuBX6lCBrKh7RR7x1zH4/h120/rb+facebook+slide+out+widget.png") 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=https://www.facebook.com/computer.freaks07&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;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/AVvXsEjMDE_NO2wsYhofy69rNxrgfLHHd5uBBYXohX6btvvyqpnkly-TT3EK-ZaEjrWjXes7Fb8tM6ijDh1RGdkzDAMGLKmIexpsPsHMbeWCcw4TXWpxPp6Rsa_9Ya7Nt-TTr8_llS5ORs3xYag/s1600/1x1juice.png'/></a></div>
<!-- Computer Freaks Facebook Widget End -->

Replace your Facebook fan page username in my case its computer.freaks07
You can also change the size of  box in my case its  height: 270px width: 245px . To chane just replace this value as you desire.
Choose from any of the three style and replace IMAGE URL with the image url of the style you choose

STYLE 1

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhusz81PgQtniMuHQ23k3iXZhvuyq-qf63YGwE_rJ_S9WvhUKn-YJVsJn-8muJKVJY9bS8m5unTUb_5xl5z0gaBrKxlogMrCPKzzuHdIhyayaPs1XUojS7FayzjuBX6lCBrKh7RR7x1zH4/h120/rb+facebook+slide+out+widget.png

STYLE 2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi23a7Wf1N4dotjMsW0voRICVEuGoICm79txwS9I6omMUXshPrO6tzeoKrNwS6wyY_730btC6bC18xVu7YmXr15rjyyPzWq6oLJ6JCBbje4Y-MaXgIo8ye9rOWud9jk6BJJdlbarmKKAU0/h120/rb+facebook+slide+out+widget+2.png

STYLE 3

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOSL59KZ3cVZSImbeSVMC0vgUOm3A5B8X6CkYIvKFY_TQrFr_1qKEuVLJwmHaxEJJ7ZX8tztZXZtCY2L0WwlTGP0e-dEqdX4SWBgsMsW2cmsCzzs3g2KvDHMOfdBJuTXXzfD_XQEXyHs/h120/rb+facebook+slide+out+widget+3.png

Click "Save" and you are done, check your blog to see the awesome sliding widget.

0 comments:

Post a Comment