Pages

Translate

Wednesday, February 6, 2013

Static Facebook like box for blogger

How to add Static Facebook Popout Like Box  to blogger ???

follow this simple steps..

  1. Adding Jquery JavaScript Plugin (Ignore this step if your blog have already a Jquery Plugin).
  2. Login to your Blogger Account.
  3. Go to Blogger Dashboard >> Dropdown Menu >> Template.
  4. Press Ctrl+F and search </head> tag.
  5. Add the code below before </head> tag

    Code: 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 

  6. Go to Layout.
  7. Then Add A Gadget > HTML/JavaScript.
  8. Copy the code below and paste it into content area.
 <script type="text/javascript">
    //<!--
    $(document).ready(function() {$(".itscet").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
    //-->
    </script>
    <style type="text/css">
    .itscet{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggSvEBNLsypaW1WvqNEDFTHdVI_Gp27HjUwEZExvy4s-fj0B8RGZk15WRPYCm6fe2R-Vn3XkwqvRfL1CcgI_QyuJjxl2nZRVWbAB_OQQNgj6xdoqI-UuAEg03XagaO9hHU3vSictM6pEBp/s320/trickiezone.com_facebookbadge.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%;}
    .itscet div{border:none;position:relative;display:block;}
    .itscet span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
    .itscet span a{color: #808080;text-decoration:none;}
    .itscet span a:hover{text-decoration:underline;}
    </style><div class="itscet" style="">
    <div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fitscet&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>By <a href="http://www.itscet.wordpress.com/">iTSCET</a> / <a href="http://www.itscet.wordpress.com">+Get This!</a></span></div>
    </div>



 9. Replace my facebook page Username in above code with the Username of your page.

10. Hit Save and preview the changes.

Enjoy !! 

 

No comments:

Post a Comment

Comment :