Adding to the blog Scrolling Facebook Popup Like Box Widget

Adding Facebook Like Box to a Blog or Website means that by increasing some Facebook fans through this. So, in most cases, there is a Facebook Like Box on the right side of almost every blog. This Facebook Like Box lets visitors visit your fan page from the blog so that they can see updates posted via Facebook in the future. In this case, many people are not seen due to the right side layout of Facebook Like Box. And if you could give it a little bit tricks and popup, it would have been easy to see the visitors. I am sharing this Facebook Popup Like Box that is very beautiful and stylist. When visiting visitors, it will scroll down from your blog to the bottom, which will make it more interesting. Moreover, if you wish you can give it a different color effect in different colors.

How to add:

• First Login to your blog.
• Then click on Template> Edit HTML.
• Then press Ctrl + F to search the </ body> section.
• Now copy the code below and paste it above </ body>

[code start] <style type='text/css'>

    #FBpop {
    position:fixed !important;
    position:absolute;
    top:-1000px;
    left:50%;
    margin:0px 0px 0px -182px;
    width:300px;
    height:auto;
    padding:5px;
    background:#04BDFA;
    font:normal Dosis,
    Georgia, Serif;
    color:#111;
    -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);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    }
    #FBpop a.bsclose {
    position:absolute;
    top:-10px;
    right:-10px;
    background:#fff;
    font:bold 16px Arial, Sans-Serif;
    text-decoration:none;
    line-height:22px;
    width:22px;
    text-align:center;
    color:#000000;
    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);
    -webkit-border-radius:22px;
    -moz-border-radius:22px;
    border-radius:25px;
    cursor:pointer;
    }
    </style>

    <script src='https://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() {
    $(this).parent().fadeOut();
    return false;
    });
    });
    </script>

<div id='fb-root'/>
<script>
//<![CDATA[
(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'));
//]]>
</script> [code end]

• Now click Save Template.
• Then click on Layout from the Blogger Dashboard.
• Now click on Add Gadget from right side layout.
• Then click on HTML / JavaScript.
• Now copy the code below and paste it into the HTML / JavaScript box and click Save.
• That's all.

[code start] <div id='FBpop'>
<center>
<div class="fb-page" data-href="https://www.facebook.com/kawsar360" data-show-cover="true" data-show-facepile="true" data-show-posts="false" width="300" height="250"></div>
</center>
<a class='bsclose' href='#'>&times;</a>
</div> [code end]

Customization:

• This is the red part of the width:300px; You can make changes.
• Background to be the red part of this background:#04BDFA; You can change the background color.
• This part of Kawsar360 must be given the username of your Facebook ID.