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.



<!--SideBar Floating Share Buttons Code Start-->
<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

17 comments:

  1. hey it was very helpfull to me
    visit me on dragonarum.blogspot.com

    ReplyDelete
    Replies
    1. i will try my best to help you in this way. Now i am happy. Because my post is useful for Blogger Frindz

      Delete
  2. wont work for my blog plz help
    http://thesimplenewsblog.blogspot.ie/

    ReplyDelete
    Replies
    1. Code is correct there is no error in code. There may be error in adding code to your blog.
      You should follow below step.
      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.

      Delete
  3. nice job
    http://pinmyboard.blogspot.com/

    ReplyDelete
  4. Thank and let me install on ma earnonlineng.com and see if it works

    ReplyDelete
    Replies
    1. congrats Now you have free space for adding another useful widget.

      Delete
  5. thanks man , but is it counting right ?

    ReplyDelete
  6. Awesome post...
    Get new multi-colored recent post widget for your blog,Quick Adsense Approval tricks,Blogger And SEO Tricks---www.powertricks4u.blogspot.in
    Thanks Again

    ReplyDelete