Wednesday, April 17, 2013

Blogger- Adding Floating Facebook Like Box into Blogger Blog

In my post Adding Facebook Like Box into Blogger Blog, I explained you how you can add Facebook Like box in your blogger blog. This post is the refined version of my previous post. Here I will show you how you can add floating Facebook Like box into you blogger blog.

You can find some more articles related to Blogging, SQL ServerASP.Net, C# and many more. To add floating Facebook like box follow the below procedures.

  1. Go to Blogger > Template >Edit HTML
  2. Search for </head> tag and paste the following jQuery link code just before the </head> tag(You can ignore this step if Jquery Link is already added in your template).
    <script src='' type='text/javascript'/>
  3. Now Go to Layout>Add a Gadget
  4. Now add a new HTML/Java Script widget.
    HTMl/Java Script Widget 
  5. Now copy and paste the following code into content box.

    <script type="text/javascript">
            $(document).ready(function () {
                    $(".floatfblikebox").hover(function () {
                        $(this).stop().animate({ right: "0" }, "medium"); 
                    function () {
                        $(this).stop().animate({ right: "-250" }, "medium");
                    }, 500);
        <style type="text/css">
                background: url("") no-repeat scroll left center transparent !important;
                display: block;
                float: right;
                height: 270px;
                padding: 0 5px 0 46px;
                width: 245px;
                z-index: 99999;
                position: fixed;
                right: -250px;
                top: 20%;
            .floatfblikebox div
                border: none;
                position: relative;
                display: block;
            .floatfblikebox span
                bottom: 12px;
                font: 8px "lucida grande" ,tahoma,verdana,arial,sans-serif;
                position: absolute;
                right: 6px;
                text-align: right;
                z-index: 99999;
            .floatfblikebox span a
                color: #808080;
                text-decoration: none;
            .floatfblikebox span a:hover
                text-decoration: underline;
        <div class="floatfblikebox" style="">
                <iframe src=""
                    scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden;
                    height: 270px; width: 245px; background: #fff;"></iframe>
                <span><a style="font-family: arial, sans-serif; font-size: 9px; color: #999;" href="" target="_blank"> +Get Your</a></span>

    Replace the my Facebook page url(pages/Dot-Net-World/409266942502687) with your Facebook page URL and change the width and height according to your need.
  6. Now save it and you are done.
I hope you enjoyed this article. I would like to have any feedback from you. Your valuable feedback, question, or comments about this article are always welcome.

Happy Blogging!!

No comments:

Post a Comment

If You Enjoyed This Post Please Take 5 Seconds To Share It.

^ Scroll to Top hgpromo