Tuesday, July 26, 2016

How to add a blog scrolling Facebook Popup Like Box Widget in blogspot site?

Facebook like box to add a blog or website some of the means to increase Face book fan. In most cases it can be seen that, almost every blog on the right side is a Face book like Box. Visitors to the blog via the Facebook like Box like your fan page, you can see that they shot and post updates on Facebook in the future.

It has been shown in this case Facebook like Box Layout on the right side of the blog because many people do not appear. And if you give it a little tricks to overcome the Popup what would happen if, indeed, it would have easily seen the visitors. Facebook Popup like Box I'm sharing it too beautiful and stylist. When a visitor visits your blog Scrolling down from the top down, which will make it more attractive. Moreover, if you wish, you can give it different color effects.

  • Installing Widget at 1st Step

1. Login into your blogger blog
2. Go to template > Edit HTML
3. And from the keyboard by pressing Ctrl + F of the search </body>
4. And paste the bellow code in to the widget. Or, you can add the Below Section of code before closing</body> tag. 

   <style type='text/css'>
#FBpop {
position:fixed !important;
margin:0px 0px 0px -182px;
font:normal Dosis,
Georgia, Serif;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
#FBpop a.bsclose {
font:bold 16px Arial, Sans-Serif;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).bind(&quot;load&quot;, function() {
// Animate Top
$(&#39;#FBpop&#39;).animate({top:&quot;50px&quot;}, 1000);
$(&#39;a.bsclose&#39;).click(function() {
return false;

<div id='fb-root'/>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
  • Second Step

    1. Now Click on Layout of the Blogger Dashboard
    2. Now, the right side of the layout, click on Add Gadget
    3. Click on The HTML / JavaScript
    4. Copy the following bar codes HTML / JavaScript and paste it into the box
    5. Now click on Save Template to work. Thats Ok.
      <div id='FBpop'>
      <div class="fb-page" data-href="https://www.facebook.com/Tutorialgift" data-show-cover="true" data-show-facepile="true" data-show-posts="false" width="300" height="250"></div>
      <a class='bsclose' href='#'>&times;</a>


    • You can change the red part of the upper width: 300px;
    • You can change Background: # 04BDFA;
    • Change must replace at Facebook user name ID from “Tutorialgift”
    Previous Post
    Next Post

    Show Comments: OR

    0 comments: Post Yours! Read Comment Policy ▼
    Attention Please
    No comments that are not related to the post can be made. Do not share your blog link without any reason. Always try to give positive comments. We evaluate all opinions equally and try to answer them in due course.

    Post a Comment

    Copyright © Poisa Click Registered Surf. Modified: PC Team, Server Hosted: GSE