Quote Style Scrolling Facebook Popup like Box Widget

Quote Style Scrolling Facebook Popup like Box Widget
facebook widget

Everybody knows facebook like box is essential to increase facebook fan. And popup widget is more effective to increase your facebook fan rapidly. Previously I have released Scrolling Facebook Popup like Box Widget which is using my enormous readers of my blog. For this reason I have just improve this widget and give something different share to make this widget more attractive. Beside of this I have fixed all the bugs of my previous version of Scrolling Facebook Popup like Box Widget and this widget also free from all bugs. You would see this Scrolling 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.



widget

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'>
#BloggerSpiceFBquote{
  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);
}
#BloggerSpiceFBquote::after, #BloggerSpiceFBquote::before {
    top: 100%;
    border: solid transparent;
    content: &quot; &quot;;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
    }
#BloggerSpiceFBquote::before {
    border-top-color: #04BDFA;
    border-width: 15px;
    left: 10%;
    margin-left: -5px
    }
#BloggerSpiceFBquote::after {
border-top-color: #fefefe;
    border-width: 9px;
    left: 10%;
    margin-left: 1px
    }
/* Widget by www.bloggerspice.com */
#BloggerSpiceFBquote 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
    $('#BloggerSpiceFBquote').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='BloggerSpiceFBquote'>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FBloggerSpice&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.bloggerspice.com/2013/07/quote-style-scrolling-facebook-popup.html"><small>+Get This</small></a></center>
</div>


Customization

  • Change BloggerSpice with your Facebook ID
Go Up