floating widget for blog

Tuesday, 18 December 2012

Static Facebook Pop Out Like Box Widget For Blogger

To install pop out Facebook Like Box
See DEMO http://newitechworlds.blogspot.com/
1. Go to your blogger Layout page
2. Add new Gadget
3. Select HTML/JavaScript

Copy Past Below code and save.
Note: Change Red Colored text with your facebook fan page iframe.
How to get iframe code?
1. Open http://developers.facebook.com/docs/plugins/
2. Chose like box.
3. Insert facebook page url.
4. Set width="200" height="290"
5. Remove Mark from Show Stream and Show Header.
6. Click on Get code.
7. You find four option HTML5,XFBML,IFRAME and URL.
8. Choose IFRAME.
9. Copy code and past at the Red Marked Text.
Now You find pop out like box on your page.


<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js"></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); }); });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4l4RwRhsFzelGuwLHcM29hYvlq5rRCoh9LahrKJNFi4oPuQ6Nlgp4X8zLJ_pt2Fnzr907HEFmxPxURHn-_ATAqV-R0oo4-MJ3SNoDaLGZ7eQ_xulCbZZnckPm_pyK50wTHFNF-79cOEA/s1600/facebook-icon.png" alt="" /><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnewitechworlds&width=200&height=290&show_faces=true&colorscheme=light&stream=false&border_color&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:290px;" allowtransparency="true"></iframe>
<br><a href="http://widgetsites.blogspot.com/2012/12/static-facebook-pop-out-like-box-widget.html/">Get This</a></div></div></div>

Friday, 17 February 2012

Floating Bar

Till now we learned and created many floating social share buttons but those button widgets in fact do not slide when the user scrolls the page up or down. The only thing I needed was a well constructed JavaScript code that could make the widget to float up and down synchronously with the webpage movement.
Its nice and cool features of widget.you can make effective blog from floating social share you can connect with the social networking site and increase your reader or visitor of the blog for that you can do simple thing follows the below step.

Go To http://www.seminarreportsetc.blogspot.in
here you can see the example of the floating bar
simply first follows this blog.
1.go to blogger in which you select design.
2.here you click on add widget for adding new widget to your blog. after you select the HTMl/javascrip widget
3.then simply copy past below code in to box without any correction other wise it might not be working properly.


<style>

#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 12px;text-align:center;"><a href="http://widgetsites.blogspot.com" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>

Visit your blog to find it hanging to the left. I hope you like this if yes then please say something about it by commenting below than you for visit it.
(Peace and blessings! :)

Niks