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='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' 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);
            });
            //-->
        </script>
        <style type="text/css">
            .floatfblikebox
            {
                background: url("http://2.bp.blogspot.com/-TNZHLj4Kwkw/UA-vZcFs0WI/AAAAAAAAAe0/vHQnokct5jU/s1600/FloatingFB.png") 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;
            }
        </style>
        <div class="floatfblikebox" style="">
            <div>
                <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Dot-Net-World/409266942502687&width=245&height=270&colorscheme=light&show_faces=true&border_color&stream=false&header=false&"
                    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="http://manish4dotnet.blogspot.com/2012/07/how-to-add-facebook-like-box-into.html" target="_blank"> +Get Your</a></span>
            </div>
        </div>

    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