Wednesday 9 March 2016

Add Floating Facebook Like Box in Blogger


Increase your Facebook page Likes add floating widget in your blog when someone bring mouse cursor in Facebook image a facebook like box will be appear it’s a cool widget for blogger you can see live demo on this page right side of this page. So add this sliding floating facebook like box widget in your blogger blog and increase your blog reader fans.


How to Add Facebook Floating Like Box Widget in Blogger

Follow Below steps for Add Facebook Floating Widget

  1. Go to Blogger
  2. Take Backup of your Blog Template
  3. Search For <head>
  4. Just Below of <head> past the following JQuery Code only if you are Not yet using Jquery Script on your blog

  5. Add Below JQuery inside the head tag only if yet you are not using Jquery script in your blog

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

  6. Now Add Below Given Code in your blog by add a widget option
  7. Below demo indicator
    Copy and Past Below Code in Your Blog

    <!--Floating Facebook Widget START-->
    <script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".vktechzone").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .vktechzone{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUVQnkpfiXiU3M8hYUAOqCj0RhDk8nyjzlntCBA-u32dMyyZLdIHNHv16TXd2r-nNsDFYBm33ymRQh-v_8umiJNSv_ZvBXGLX_YHhgThjq5G2x8WgkVey0mSX09XilmMVDRKDmJGNJ0Zlz/s1600/ABT_facebook_widget.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .vktechzone div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .vktechzone span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .vktechzone span a{color: gray;text-decoration:none;} .vktechzone span a:hover{text-decoration:underline;} } </style><div class="vktechzone" style="">
    <div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FALLTECHBUZZBD&width=245&colorscheme=light&show_
    faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"></iframe><span><center>
    <a style="color:#a8a8a8;font-size:8px;" href="http://www.vktechzone.com/2014/05/add-floating-facebook-like-box-in.html">Get This Widget</a></center>
    </span></div>
    </div>
    <!--Floating Facebook Widget END-->

    Note:- Replace ALLTECHBUZZBD with your Facebook page ID. 

    How to Add Html/Java widget? Follow below steps to add Widget

    1. Go to Blogger
    2. Go to your blog Layout option.
    3. Now Select Add a Gadget option.
    4. Now select Html/Java Script option
    5. Now past the above code in Content area field and press save button.

Tricktune

Author & Editor

I am an allround web developer. I am a senior programmer with good knowledge of front-end techniques. I love structure and order and I also stand for quality. I love spending time on fixing little details and optimizing web apps. Also I like working in a team.

0 comments:

Post a Comment

Back to Top