Tuesday, April 17, 2012

Add Pop Out facebook Like Widget To Blogger


Pop out sliding Facebook like widget is really awesome. It can be used in both blogger and wordpress. There is plugin for wordpress. Just search "Facebook Pop Out like Widget" You will find if. Now learn how to install this in blogger.








  • Go to Blogger Dashboard → Design → Edit HTML




  • Search for the following code using F3




  • </head>

  • Now place the following code just after the code mentioned above




  • <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  • Now Go to Page Element → Add A HTML/Javascript Widget




  • Now copy the following code and paste it in the widget





  • <style type="text/css">
    /*<![CDATA[*/
    #fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
    .fbplbadge {background-color:3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;right: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigGO0quOxdIqteIN_zhPrkdgOitnYmo7_tSiX4hbiZCRXplGvNWFKuX6FqVaz9Ov9PIqxQEvpUvXBPbturK-GkiuWqjjTlTdH29ZpgUXzPfc2KFJgWAt1iuRjMu2qAcANqnv4NkaemjiAh/s1600/w2b_vertical-left.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;-moz-border-radius-topright: 8px;-moz-border-radius-bottomright: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
        (function(w2b){
            w2b(document).ready(function(){
                var $dur = "medium"; // Duration of Animation
                w2b("#fbplikebox").css({left: -250, "top" : 100 })
                w2b("#fbplikebox").hover(function () {
                    w2b(this).stop().animate({
                        left: 0
                    }, $dur);
                }, function () {
                    w2b(this).stop().animate({
                        left: -250
                    }, $dur);
                });
                w2b("#fbplikebox").show();
            });
        })(jQuery);
    /*]]>*/
    </script>
    <div id="fbplikebox" style="display:none;">
        <div class="fbplbadge"></div>
        <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fedutechnologynet&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#ffffff;" allowtransparency="true"></iframe>
    </div>

    Note: Just replace with your Facebook page's username. You also can change the border color and background color. I already highlighted them for your convenience

    Enjoyed the article ? Please share with your friends if you like. Thank You

    0 comments:

    Click Here To add Comment