Add Scrolling Facebook Popup like Box Widget

Everybody knows facebook like box is essential to increase facebook fan. And popup widget is more effective to increase your facebook fan rapidly. Facebook Popup like Box Widget wrapped with quote style as well as a closing button for your visitors convenience. Hope this widget would add an extra spice on your blog. Please follow the below steps to add this beautiful widget into your blog.

CSS PART OF Quote  Style SCROLLING FACEBOOK POPUP LIKE BOX WIDGET

Step 1 Click on  Now click on -> Template -> Edit HTML-> Unfold code  ►

Step 2 Now Find this code </body> by pressing  Ctrl + F

Step 3 Copy the code from below and Paste it  Before/above </body>

<div class='widget-content'>
<style type='text/css'>
#uncoverredFBquote{
  overflow:display;
  position:fixed !important;
  top:-1000px;
  left:50%;
  width:332px;
  margin:0 0 0 -182px;
  height:auto;
  padding:16px;
  background-color:#fefefe;
  border:8px solid #04BDFA;
  border-radius:25px;-moz-border-radius:25px;-webkit-border-radius:25px;
  font:normal normal 13px Cambria,Georgia,Serif;
  color:#111;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
#uncoverredFBquote::after, #uncoverredFBquote::before {
    top: 100%;
    border: solid transparent;
    content: &quot; &quot;;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
    }
#uncoverredFBquote::before {
    border-top-color: #04BDFA;
    border-width: 15px;
    left: 10%;
    margin-left: -5px
    }
#uncoverredFBquote::after {
border-top-color: #fefefe;
    border-width: 9px;
    left: 10%;
    margin-left: 1px
    }
/* Widget by www.uncoverred.blogspot.com */
#uncoverredFBquote a.close {
  position:absolute;
  top:-15px;
  right:20px;
  background-color:#333;
  font:normal bold 16px Arial,Sans-Serif;
  text-decoration:none;
  line-height:22px;
width:25px;
text-align:center;
color:white;
border:2px solid #04BDFA;
border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;
cursor:pointer;
}
</style>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load", function() {
    // widget by www.bloggerspice.com
    $('#uncoverredFBquote').animate({top:"100px"}, 1000);
    // hilangkan kotak pesan saat tombol (x) diklik
    $('a.close').click(function() {
        $(this).parent().fadeOut();
        return false;
    });
});
//]]>
</script>
</div> 

HTML PART OF Quote  Style SCROLLING FACEBOOK POPUP LIKE BOX WIDGET

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

<div id='uncoverredFBquote'>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Funcoverred&amp;width=340&amp;height=285&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:340px; height:285px;" allowtransparency="true"></iframe>
<a class='close' href='#'>&times;</a>
<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;"></span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="http://www.uncoverred.blogspot.com/2013/07/quote-style-scrolling-facebook-popup.html"><small>+Get This</small></a></center>
</div>

Customization

• Change uncoverred with your Facebook ID