Home
Blogger

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

18 comments

  1. Thnx bro ..... Very Nice Widget
    +1
    • Hi Zeenat..glad to hear that and I just submitted a template for publishing in your template site...Hope you would publish as soon as possible.
  2. Thanks for Sharing this bro nice widget
    • Hi Rizwan This would help to increase your facebook fan as well as it load faster..hope you would use it.
  3. Hello Bro My Blogs H1 tags is zero what to do please help...
    • follow this article

      http://www.bloggerspice.com/2013/05/what-should-consider-to-write-perfect.html

      and add opening and closing h1 tag before opening title tag and closing title tag
    • Bro What Should I dO My Blog Title Is A image....
    • No problem..I have also used logo Image on Blog title. It doesn't matter.
    • Bro I Have Send You a Mail please Read it.
    • I have send back to you with solution..
    • Bro I Did that but after saving the template when i opened my blog that sticky bar came little down looked mess Please Help Me ....
    • place it above meta content..But it is impossible to affect your blog widget. Maybe there is other problem.
    • please help bro but sticky bar is coming little down is there any solution
    • keep only h1 tag beginning and ending with your blog title and remove the title tag..
    • How To Do Please give Me The Script...
  4. Oh! Nice One Bro Keep Posting Such A Nice Articles Happy Blogging....!!
    • hi Samad happy to see you again here..thanks for your comment
  5. Thanks
Go Up