Saturday 1 June 2013

Facebook Slide Out Like Box Widget For Blog Or Website


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.

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"


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

<!-- HaCkErZ-PoSiTiVe 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/AVvXsEgWPkNmWyLPlLTcb4R4hxwN87S8YXM6_Ryk-fd2b66Ct1VyCQk9do5FCRXRx-tnxdgqW2YJj7c_S5VtJCjPP91rw8gWPrj4lG5bqCiKvFXb7d7D9EPp57Rxggn_U2gtTE2jusMV1xjf_S0/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/hackerspositive&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/AVvXsEgxFjeMG4dzx_gQXzb9Y_yHRuIca_boNH9l0F7lma8Rhz_P0lgd3gVRN0VrPq0xseTaOAhNDK8ZVQRL6KNZ_N-c84hg1JMgKYvGyp6JO9YATN5ZY__WutTaz4T2exsKAC-zuF_DevZyn-s/s1600/1x1juice.png'/></a></div><!-- Widgets by HaCkErZ-PoSiTiVe --><!-- HaCkErZ-PoSiTiVe Facebook Widget End -->

-Replace 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/AVvXsEgWPkNmWyLPlLTcb4R4hxwN87S8YXM6_Ryk-fd2b66Ct1VyCQk9do5FCRXRx-tnxdgqW2YJj7c_S5VtJCjPP91rw8gWPrj4lG5bqCiKvFXb7d7D9EPp57Rxggn_U2gtTE2jusMV1xjf_S0/h120/rb+facebook+slide+out+widget.png


STYLE 2



IMAGE 2 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7v1XbpkO8xqOay3zqTcSPXIHcvh066EzNh77WtA0eRSRrpRHL0sATUIkpY_wPCMhO2L757R8cnsriCyDjG0zj_8ePbC7PegX0fcisns0QP2rAtacLuhojxjOuwY3RPGJ0fDdtPbKFEj4/h120/rb+facebook+slide+out+widget+2.png


STYLE 3



IMAGE 3 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1lT4VWDaKDbz5xcndBdp269qeW_CIQASWdmahP2941-Q5hhVVhT-gCBlqLdBWSrPwM4VpKY9sccN-VPW58O7fn7BiurHabaQHLX0zUFiFZoC4wxgLeZ5XrN0tfM3-VqNJQLphkYF3v8E/h120/rb+facebook+slide+out+widget+3.png

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

Hope You understand & enjoy this post.


Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

2 comments

  1. master? may I ask for a template that they use this blog?? I really like this template. may I ask?

    ReplyDelete
  2. may I ask the master template blog?

    ReplyDelete

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© HaCkErZ-PoSiTiVe
Designed by VINOD
Back to top
© HaCkErZ-PoSiTiVe - About | Privacy | Contact | Sitemap