Pop Up Widget Of Facebook For Blogger

Everyone knows that Facebook has millions of users and Facebook box is very helpful to increase the fans of Facebook rapidly. Recently i published Scrolling Pop Up Facebook Like Box Widget For Blog which is use by many of our blog readers. So today i m going something new about Facebook pop up widget. This widget is a little different from the previous one and more attractive.

This widget is designed very beautiful and help to increase Facebook fans easily. It also load fast and also have scrolling effect. It have close button on right side to close this widget. You just need to follow the below steps and add the beautiful widget in your blog.

• Go to blogger.
• Template >> Edit HTML
• Find </body> by pressing Ctrl+F
• Copy the below code and paste it above/before </body>

Adding CSS Part Into Template

<div class='widget-content'>
<style type='text/css'>
#truebloggingtricksFBquote{
  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);
}
#truebloggingtricksFBquote::after, #truebloggingtricksFBquote::before {
    top: 100%;
    border: solid transparent;
    content: &quot; &quot;;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
    }
#truebloggingtricksFBquote::before {
    border-top-color: #04BDFA;
    border-width: 15px;
    left: 10%;
    margin-left: -5px
    }
#truebloggingtricksFBquote::after {
border-top-color: #fefefe;
    border-width: 9px;
    left: 10%;
    margin-left: 1px
    }
/* Widget by www.truebloggingtricks.blogspot.com */
#truebloggingtricksFBquote 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.truebloggingtricks.com
    $('#truebloggingtricksFBquote').animate({top:"100px"}, 1000);
    // hilangkan kotak pesan saat tombol (x) diklik
    $('a.close').click(function() {
        $(this).parent().fadeOut();
        return false;
    });
});
//]]>
</script>
</div>

•  Click on save button.

 Adding HTML Part Into Layout

• Go to layout.
• Click Add a Gadget >> HTML/JavaScript
• Copy the following code and paste it inside HTML/JavaScript

<div id='truebloggingtricksFBquote'>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ftruebloggingtricks&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.truebloggingtricks.blogspot.com/2013/09/pop-up-widget-of-facebook-for-blogger.html"><small>+Get This</small></a></center>
</div>

• Click on save button.

Customization

 Replace truebloggingtricks with your Facebook ID.