Before installing/adding Facebook Popup Like Box to your Blog , you must already install the jQuery Plugin to your blog template , if you have not added that plugin follow the below easy steps to add.
- Sign in to your Blogger Account
- Go To Blogger Dashboard , there click on template after that Click on Edit HTML , then Proceed it , Check the Small Box "Expand Widgets Template" after that Search for </head> tag.
- Now Copy the below Script and paste below/under </head> Tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
- The Plugin is installed , now lets add the Like Box
- Again Go to Blogger Dashboard
- Click On Layout
- Add a Widget and Select HTML/JavaScript
- A Box will popup , now Copy the below script/code and paste it in the box.
Code :
<style type="text/css">
/*<![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/AVvXsEhWkbtGWHAd3mnsv_t_6Z6c1F7xXXlEPMmXM1dznF5nDDJ1_JnDiE_hIhw8yb351TClxAJo66_SQRlMqmv3WdBiUR0XxiaIJs4rY4abHpIZ7VV874OKejMSsR_unoEYH6FfNHD-x65gz7hy/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://www.facebook.com/?q=#/pages/Tricks-inside/556061407737665?ref=hl&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>
- Change The Page Username in the Script to your Own Page Username.
- You Can Change the width and height of the box (the width and height is clearly indicated by red text i.e 250 ".
- Now hit Save and that's it !
5 comments:
You could definitely see your skills in the article you write.
The arena hopes for even more passionate writers such as you who are not afraid to say how
they believe. At all times go after your heart.
my page - garcinia cambogia extract
Link exchange is nothing else but it is just placing the other person's web site link on your page at proper place and
other person will also do same in favor of you.
my web page ... small url
Υour mode oof deѕcribing all in this articlе iѕ actuаlly рleasant, all
be capаble of ωithout difficulty understаnd it, Thаnks a lot.
Сhecκ out my website :: Power of Conversational Hypnosis Igor Ledochowski
I was more than happ to find this website. I want to to thank
yοu foг ones tume ԁue tо thіs fantaѕtic read!!
I definіtely rеally likeԁ eveгy
bit of it and i аlsο have you booκmaгked tо lοok at
new іnfoгmation in yοur wеb
site.
Here is my web pаge: wholesale unlocked satellite cell phones miami fl
Touche. Solid arguments. Keep up the amazing spirit.
my webpage: woodworking plans
Post a Comment