Hello, in this post I would like to
tell you how to “How to add 'Facebook Popout Likebox' for blogger”.
First you need to have a
jQuery Plugin in your Blog template.
This Step is Required, If your Blog already have this plugin then Ignore this Step.
If your Blog Don’t have this Plugin, Install the jQuery Plugin.
Add the below line of code before </head> tag.
This Step is Required, If your Blog already have this plugin then Ignore this Step.
If your Blog Don’t have this Plugin, Install the jQuery Plugin.
Add the below line of code before </head> tag.
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script
|
Adding this to your blog is so simple and can be done in a very few minutes.
1. Log in to blogger Design > Page
Element.
2. Click Add Gadget and select 'HTML/Javascript
3.Now Paste Below code and save it. Don’t give any title to the widget.
2. Click Add Gadget and select 'HTML/Javascript
3.Now Paste Below code and save it. Don’t give any title to the widget.
<style
type="text/css">
/* techpro365.blogspot.in */
/*<![CDATA[*/
#fbplikebox{display:
block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge
{background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top:
-75px;position: absolute;right:
-47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtcu26C7QKA004uW9Mi0OOpvImTS-78i19DL2WCJXa_JbpKVYP2mOjIHmC3pqptZGiKv4MWcCEpbmrSw7GVFqyzBlnPhRrDuNlIh7o2KQ1XnrkOWyq4j6DjMimwnwvIAv2cE7Mh2hV1WHh/s1600/w2b_vertical-left.png");background-repeat: no-repeat;overflow:
hidden;-webkit-border-top-right-radius:
8px;-webkit-border-bottom-right-radius:
8px;-moz-border-radius-topright:
8px;-moz-border-radius-bottomright:
8px;border-top-right-radius:
8px;border-bottom-right-radius:
8px;}
/*]]>*/
</style>
<script
type="text/javascript">
/*<![CDATA[*/
(function(w2b){
w2b(document).ready(function(){
var $dur = "medium"; //
Duration of Animation
w2b("#fbplikebox").css({left: -250, "top" : 100 })
w2b("#fbplikebox").hover(function () {
w2b(this).stop().animate({
left: 0
}, $dur);
}, function () {
w2b(this).stop().animate({
left: -250
}, $dur);
});
w2b("#fbplikebox").show();
});
})(jQuery);
/*]]>*/
</script>
<div id="fbplikebox"
style="display:none;">
<div
class="fbplbadge"></div>
<iframe
src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FTechpro365&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false"
scrolling="no" frameborder="0" style="border:none;
overflow:hidden; width:250px; height:250px;background:#F5EBF5;"
allowtransparency="true"></iframe>
</div> |
Before adding the following code please make the changes you want like width, height, background colour.
It is important to change Techpro365 with your bloggers facebook page name.
By default the position of the widget is at the left side of the blog.If you want to change the position of the widget from left to right you should change right to left and left to right. This
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtcu26C7QKA004uW9Mi0OOpvImTS-78i19DL2WCJXa_JbpKVYP2mOjIHmC3pqptZGiKv4MWcCEpbmrSw7GVFqyzBlnPhRrDuNlIh7o2KQ1XnrkOWyq4j6DjMimwnwvIAv2cE7Mh2hV1WHh/s1600/w2b_vertical-left.png");
Should be changed with
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg7REOdnzO1Uff4ZpWHdsDQNCzCdm9oFjJaD2wQzpyco7qFAs2MQ4FW5sBBWr7IXIXac-kQnoYDYN-oZn2zpumN819EsCKWftuWvEzXXK66rmNQPZP5G_NG1rO0jGW4Y269RPEUTrOWyFx/s1600/w2b_vertical-right.png");
If you are facing any problem with your blog for this post please let me know through a comment or contact me.
Do you like this post? Please link back to this article by copying one of the codes below.
URL: HTML link code: BB link code:About Author:
.JPG)
Raja Sekhar is the founder of this blog. He has been blogging since 2010 and is an active contributor of many blogs.
.jpg)
very thank ...
ReplyDelete