How to Add Static Facebook Like Box with Smooth Jquery Hove Effect

Sunday, 5 February 2012

Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)

1. Go to Blogger Dashboard < Design tab > Edit Html
2. Search for </head> tag
3. Add below line of code Before </head> tag

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

4.Now go to page design and add gadget select html/JavaScript  and add below code



<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".w2bslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj55-31wMcXed81GdoFleLFeZjjAai-kuga_yyUYqRoM604DLUvGOlH1btWtAJYl-09HayVt4ycKOilozcLifP-UJeqwy9pbKBrxcgZzp5KIX1FbNnjzSRDHPTKj2RYEsTff5-XRLeybjpb/s150/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: gray;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style>
<div class="w2bslikebox" style="">
    <div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fmithilaworld&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><span><a href="http://myblogtricks.blogspot.com/">Myblogtricks</a></span>
    </div>
</div>




Change  highlited area with your page name 

Continue Reading | comments

How Add Facebook Like Plus Send Button together

Tuesday, 10 January 2012

Friend in this posts i will tell you how we can combine Facebook like button with Facebook send button  and share button you can easily get from face book here we will knowhow combine both like plus share button 

1. login To Blogger ==> Design ==> Edit HTML
   
2. Backup your template
   
3. Click Expand widgets templates box
   
4. Search for <data:post.body/>
   
5. and now if you wish to add the plugin just below your post titles then add the giant code below just above <data:post.body/> or if you wish that the plugin may appear at the end of your posts then paste the following code just below <data:post.body/>
   

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="450" show_faces="false" font=""></fb:like>

Continue Reading | comments