Scrolling Facebook Popup Like Box Widget for Blogger

 Scrolling Facebook Popup Like Box Widget for Blogger

We have already got many Facebook Popup widget which just popup every time

when we visit pages. And some widgets designed to one time popup style thus a

visitors don't feel annoy. Generally we use this widget to get more Facebook

likes. So I just designed this Facebook Popup like box with scrolling effect,

that means when you add this widget then it will appear with popup style and

it will scroll top to bottom when you just move your mouse from top to

bottom. And also included a closing option if visitor wish to close it

instantly. So this is really bit unique concept and simply nice. In addition

you can change the widget coloraccording to your desire. Hope this widget you

would like and help to increase more Facebook Fan.
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.

    <style type='text/css'>
    #bloggerspiceFBpop {
    position:fixed !important;
    position:absolute;
    top:-1000px;
    left:50%;
    margin:0px 0px 0px -182px;
    width:300px;
    height:auto;
    padding:16px;
    background:#FEFEFE;font:normal Dosis, Georgia, Serif;
    color:#111;
    border:2px solid #333;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    }
    #bloggerspiceFBpop a.bsclose {
    position:absolute;
    top:-10px;
    right:-10px;
    background:#fff;
    font:bold 16px Arial, Sans-Serif;
    text-decoration:none;
    line-height:22px;
    width:22px;
    text-align:center;
    color:#000000;
    border:2px solid #333;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -webkit-border-radius:22px;
    -moz-border-radius:22px;
    border-radius:25px;
    cursor:pointer;
    }
    </style>
     <script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></scrip

t>
    <script type='text/javascript'>
    $(window).bind("load", function() {
    // Animate Top
    $('#bloggerspiceFBpop').animate({top:"50px"}, 1000);
    // Widget by www.BlsTrSoFTz.TK
    $('a.bsclose').click(function() {
    $(this).parent().fadeOut();
    return false;
    });
    });
    </script>
    <div id='bloggerspiceFBpop'>
    <!-- Widget by www.BlsTrSoFTz.TK Start -->
    <center><b><a class="BloggerSpice">Don't Forget To Join With Our

Community</a></b></center>
    <center>
    <iframe

src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.c

om%2FBlsTrSoFTz.TK&amp;width=292&amp;height=258&amp;show_faces=true&amp;color

scheme=light&amp;stream=false&amp;show_border=true&amp;header=false"

scrolling="no" frameborder="0" style="border:none; overflow:hidden;

width:292px; height:258px;" allowTransparency="true"></iframe></center>
    <!-- Widget by www.BlsTrSoFTz.TK End -->
    <a class='bsclose' href='#'>&times;</a>
    <center style="float:right; margin-right:10px;"><span

style="font-size:xx-small; color:#000; text-decoration:none;">+Get this

at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD;

text-decoration:none;" href="

http://www.BlsTrSoFTz.Blogspot.com">BlsTrSoFTz.TK</a></center>
    </div>

 Customization

    Change FEFEFE to get different color in widget. You can get the color code from Here.
    Change BlsTrSoFTz.TK this with your facebook id