Quote Style Scrolling Facebook Popup like Box Widget

Quote Style Scrolling Facebook Popup like Box Widget

Comments: 18
data:blog.title
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

Speak Your Mind

Syeda Zeenat says: 7/28/2013

Thnx bro ..... Very Nice Widget
+1

Mohammad Fazle Rabbi says: 7/28/2013

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.

Rizwan Saharan says: 7/28/2013

Thanks for Sharing this bro nice widget

MM NAUMAN says: 7/28/2013

Hello Bro My Blogs H1 tags is zero what to do please help...

Abdul Samad says: 7/28/2013

Oh! Nice One Bro Keep Posting Such A Nice Articles Happy Blogging....!!

Mohammad Fazle Rabbi says: 7/29/2013

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

Mohammad Fazle Rabbi says: 7/29/2013

hi Samad happy to see you again here..thanks for your comment

Mohammad Fazle Rabbi says: 7/29/2013

Hi Rizwan This would help to increase your facebook fan as well as it load faster..hope you would use it.

MM NAUMAN says: 7/29/2013

Bro What Should I dO My Blog Title Is A image....

Mohammad Fazle Rabbi says: 7/29/2013

No problem..I have also used logo Image on Blog title. It doesn't matter.

MM NAUMAN says: 7/29/2013

Bro I Have Send You a Mail please Read it.

Mohammad Fazle Rabbi says: 7/29/2013

I have send back to you with solution..

MM NAUMAN says: 7/29/2013

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 ....

Mohammad Fazle Rabbi says: 7/30/2013

place it above meta content..But it is impossible to affect your blog widget. Maybe there is other problem.

MM NAUMAN says: 7/30/2013

please help bro but sticky bar is coming little down is there any solution

Mohammad Fazle Rabbi says: 7/30/2013

keep only h1 tag beginning and ending with your blog title and remove the title tag..

MM NAUMAN says: 7/31/2013

How To Do Please give Me The Script...

Hot Gossip says: 8/23/2014

Thanks

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *