اتوار، 4 اگست، 2013

add right side facebook like floating button to blogger

add facebook floating like page to your blog
this is so simple to add facebook rigt side floating page
you saw this on many bolg and website this is beautifull widget for blogger
when mouse croser hover it this is fixed on your right side of blog

to add it to your blogger blog follow the below steps
login to your blogger account then go to your desire blog
go to your blogger template and click on edit html
find the follwing code by ctrl+f </head>
and paste this script before </head> tag
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>


now save your template and go to 



layout and click on add gadget follow in screen shots



Now select Layout



And click on Add gadget



Now select Html/javascript




in title write your widget title and paste code


Paste the below Code in html java script
and click on save


<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcCfiT3doeJHnf7XHxafocZP_RicbHM1SKtSMw4VfytAltrBfPxDm8Gh0xfZJd2nEJmPHd5yKFal8iBYFWRZ07fz2JfLmmsE5zm0XT7Of-J0KA_b-2mgRkHMzdeBFiq8qdcSNFtT-pGwPD/s150/w2b_facebookbadge.pn") 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: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;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%2Fusername&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></div>



costumization
just replace the user name with youe fcebook page user name fibnaly click on save and enjoy

if you face any kind of problem than just rght in  comments below

4 تبصرے: