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.
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/AVvXsEjfrvJxLZ3DgawsfTbZW09ZREFvkJfXtejjy9j1-AvkgoXxEF6Q5xoTnpNtxp_0-A40uRNV4YlOJz0Cm-wYm73ylz-rWQklMEQD_EM0g-WZhc4e72F2DtvYL4snv5X1noLz6JRnBUFN1qg/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&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/AVvXsEj3ZymVL0PxuVnNy3DXVC0PM9Bv9OeXIdaS8nvJ4Dhqq2QyBdCShN3qQjSoq_20LJoxNTN7wSnowP3QlzU2bRuAkvamB262Lhy6XF2f4y5u5_9CMUgGPTKCwgJQCdw6gKWNoM_DaqiuNls/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/AVvXsEjfrvJxLZ3DgawsfTbZW09ZREFvkJfXtejjy9j1-AvkgoXxEF6Q5xoTnpNtxp_0-A40uRNV4YlOJz0Cm-wYm73ylz-rWQklMEQD_EM0g-WZhc4e72F2DtvYL4snv5X1noLz6JRnBUFN1qg/h120/rb+facebook+slide+out+widget.png
STYLE 2
IMAGE 2 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCGZe9tD0m755bP2PM2xIv-eWlL9R6HIt-sgE9AWA7AKiClUEYOaaCf7C7-DVFUvuqZHhgdJonI-X93gSUJROpqdo0HbzLI0Ticolhs4LLgob-ak5_UYwfYdKavbKfwS9gzFd6LnYUcJ8/h120/rb+facebook+slide+out+widget+2.png
STYLE 3
IMAGE 3 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLqnDSFJA0jxA907ad0oZS43EKCT-kIUh_jGJPvItd4T68O2OTzDJul2m6aOCnorp9bTVOlzCAZp9H_7inJ_M1DidKr6OM4FiFJ_e0neFzl-whhiE7p7Na99omjz-Qn5nl87lKyCHjbNo/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.
Hope You understand & enjoy this post.
No comments:
Post a Comment