How to Add a Facebook Widget Floating Like Box For Blogger | Drop Down Tech



Floating facebook like button box smooth sliding widget for blogger add social widget in your blog to increase like of your social page.

 This slide widget will show in middle of right side of your blog when touch by cursor it come outside with like button.

 Add below given code in your blogger blog as a widget by HTML/JAVASCRIPT widget.

 How to add widget in blogger?

  Go to your blog Layout option > Select Add a Gadget option > select Html/Java Script option > Paste the below code in Content area field and press save button.

<font color="#996633" face="Arial, sans-serif" style="font-size: 13px; font-weight: bold; text-align: -webkit-left;">name</font><font color="#333333" face="Arial, sans-serif" style="font-size: 13px; font-weight: bold; text-align: -webkit-left;">="Trick Box" </font><font color="#6600cc" face="Arial, sans-serif" style="font-size: 13px; font-weight: bold; text-align: -webkit-left;">readonly</font><font color="#333333" face="Arial, sans-serif" style="font-size: 13px; font-weight: bold; text-align: -webkit-left;">="readonly"></font></p></div></div><div style="text-align: center;"><p><font color="#464646" face="Verdana, sans-serif" style="font-size: 14px; line-height: 20px;"><!--Floating Facebook Widget START--></font></p><div><p>
<font color="#464646" face="Verdana, sans-serif"><font style="font-size: 14px; line-height: 20px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script></font></font></p>
</div>
<div>
<p>
<font color="#464646" face="Verdana, sans-serif"><font style="font-size: 14px; line-height: 20px;"><script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abt").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abt{background: url("http://4.bp.blogspot.com/-Sw2F47JoKu0/U2uEL5DW0hI/AAAAAAAAAhA/NNFCiQ7D6L4/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%;} .abt div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abt span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abt span a{color: gray;text-decoration:none;} .abt span a:hover{text-decoration:underline;} } </style><div class="abt" style="">
</font></font></p>
</div>
<div>
<p>
<font color="#464646" face="Verdana, sans-serif"><font style="font-size: 14px; line-height: 20px;"><div>
</font></font></p>
</div>
<div>
<p>
<font face="Verdana, sans-serif"><font style="font-size: 14px; line-height: 20px;"><font color="#464646"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F</font><font color="#ff0000">trickyhacks</font><font color="#464646">&width=245&colorscheme=light&show_</font></font></font></p>
</div>
<div>
<p>
<font color="#464646" face="Verdana, sans-serif"><font style="font-size: 14px; line-height: 20px;">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>
</font></font></p>
</div>
<div>
<p>
<font color="#464646" face="Verdana, sans-serif"><font style="font-size: 14px; line-height: 20px;"><a style="color:#a8a8a8;font-size:10px;" href="</font></font>http://www.trickyhack.tk/2015/02/how-to-add-facebook-widget-floating.html<font color="#464646" face="Verdana, sans-serif" style="font-size: 14px; line-height: 20px;">">Facebook Floating Like Box </a></center>
</font></p>
</div>
<div>
<p>
<font color="#464646" face="Verdana, sans-serif"><font style="font-size: 14px; line-height: 20px;"></span></div>
</font></font></p>
</div>
<div>
<p>
<font color="#464646" face="Verdana, sans-serif"><font style="font-size: 14px; line-height: 20px;"></div>
</font></font></p>
</div>
<p>
<font color="#333333" face="Arial, sans-serif" style="font-size: 13px; font-weight: bold; text-align: -webkit-left;">


Note Replace Tricky Hacks with your facebook page ID or Username


Press CTRL+D  To Bookmark Us.

1 comment:

  1. tfdfgkjhgggggggggggggggggggg

    ReplyDelete

Search This Blog

Loading...