This tutorial will teach you how to ad a facebook Floating Like widget on your blogger blog. example on the photo below:
Follow the below steps to implement this on your blogger blog…
1. Goto your blogger dashboard
2. Select the blog you want to add it to and navigate to ‘Templates’
3. Click EDIT HTML and then press CTRL F to find the below code
</head>
4. Just above the code above, add the below codes
<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’ type=’text/javascript’/>
Some Templates already have the below code. so just make sure yours doesnt have it before implementing it.
5. Now goto Layout > Add Gadget > HTML/Javascript, then put the below code in it.
<script type=”text/javascript”> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(“.abtlikebox”).hover(function() {jQuery(this).stop().animate({right: “0”}, “medium”);}, function() {jQuery(this).stop().animate({right: “-250”}, “medium”);}, 500);}); /*]]>*/ </script> <style type=”text/css”> .abtlikebox{background: url(“http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.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%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px “lucida grande”,tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style>
<div class=”abtlikebox”>
<div>
<iframe frameborder=”0″ scrolling=”no” src=”http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fetechjournal&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270″ style=”background: #fafafa; border: white; height: 270px; overflow: hidden; width: 245px;”></iframe>Widget by :<a href=”http://www.etechvilla.com.com/”> The eTech Journal</a> </div>
</div>
6. Save
Customization: Chance etechjournal in the above code to your facebook page usename.
#Conclusion: Over To You Boss!!! What do you think About this Post?? Do you have further clearifications? Feedbacks? Suggestions? Or Inquiry? Why Not Use The comment Box To Communicate With Us? We will be Happy If you Do.