Quote Style Scrolling Facebook Popup like Box Widget

Quote Style Scrolling Facebook Popup like Box Widget

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
Quote Style Scrolling Facebook Popup like Box Widget
4 Stars stars - "Quote Style Scrolling Facebook Popup like Box Widget" Everybody knows facebook like box is essential to increase facebook fan. And popup widget is m...

Post a Comment

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.

Thanks for Sharing this bro nice widget

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

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

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

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

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

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

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *