Νεο 3D Floating Facebook Like Box Widget For Blogger

3D Floating Facebook Button when to move your cursor on it it pop out with stylish floating facebook like box. This will help you to increase facebook likes. You just need to put small code to your blogger blog.   This widget is for Bloggeer/Blogspot blogsand WordPress Blog. Now lets move to how you can add this in blogger I will show you How You Can Add Another New Floating Facebook Like Box Widget For Blogger?



Add 3D Floating Facebook Like Box Widget To Blogger

1. Go to Design > Page Elements.
2. Click Add A Gadget.
3. In Add A Gadget window, select the HTML/Javascript .
4. Paste the following code inside it,

<script type="text/javascript">
 /*<![CDATA[*/
 jQuery(document).ready(function() {jQuery(".shtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
 /*]]>*/
 </script>
 <style type="text/css">
 .shtlikebox{background: url("http://1.bp.blogspot.com/-x7QjURToFgY/T9A8_gYqR5I/AAAAAAAAAFc/59iwFnfqlJ0/s1600/Facebook-64.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;}
.shtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;}
.shtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
 .shtlikebox span a{color: gray;text-decoration:none;}
 .shtlikebox span a:hover{text-decoration:underline;}
}
</style>
 <div class="shtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fshareapkz&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by: <a href="http://www.share-tricks.info/"> Share-Tricks.Info</a></span>
     </div>
 </div> 

5. Click on Save button and done!

 6. Go to Design > Edit HTML.

 7.Now Place below code just before </head>

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

Note:
Replace Shareapkz With Your Facebook Page URL or User name.

You can also change the Facebook button style by changing the background image

New Facebook Button Styles:

  Image URL: http://2.bp.blogspot.com/-ITbt67Shsmc/T9A88F9y4vI/AAAAAAAAAFE/RB4AR0FiRD8/s1600/Calendar-Facebook-64.png

Image URL: http://1.bp.blogspot.com/-HkMnJk2jSMs/T9A8-p5ww7I/AAAAAAAAAFM/lBjwNplCR1g/s1600/Facebook+Colorflow-128.png

Image URL: http://1.bp.blogspot.com/-RCj9k9g8QDs/T9A8_MYN26I/AAAAAAAAAFU/NM2KKfeRJnU/s1600/Facebook-64%281%29.png

Image URL:http://1.bp.blogspot.com/-z14V6jGUGxw/T9A9AahLOtI/AAAAAAAAAFk/9Glo1nSHXuk/s1600/Facebook-green-64.png

Image URL: http://2.bp.blogspot.com/-lN0mRYcyKxI/T9A9BLKJs4I/AAAAAAAAAFs/526oeiEc4MA/s1600/Facebook-green-hover-64.png

Image URL: http://3.bp.blogspot.com/-hMOWFQjr5AI/T9A9Btvq2YI/AAAAAAAAAF0/WDB1gwNY4L0/s1600/fb-right.png

πηγη