Need to find something?

Click click click

Followers

Sunday, January 30, 2011

How to get a sharebar for your website

Yeah, blogging is not my profession, but I wanna share something with you. This is an honest opinion - a sharebar is the best way for people to let others know of your website. Why? Because it's always there, wherever you scroll, it's always there. It doesn't take a widget's space, like what I did. Don't get what I mean? Look below.

How a widget's box/space looks like
Yeah, you get the point. So, what you have to do to get this awesome widget for your blog is to:
1. Go to your Dashboard.

2. Click Design when you're at your Dashboard.




3. Once you've clicked Design, you should be in the page elements' page. Go ahead and click Add a Gadget  and click HTML/JavaScript
Click on Add a Gadget

Click on HTML/JavaScript
4. Now, all you have to do is to copy this code and paste it in the window that just opened up.

<style>
#sharebar {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#sharebar .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 title="Get this at wissamidrissi.com">
<div id='sharebar'>
<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>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
</a>
<span style='font-size: 55%;'><a href='http://www.wissamidrissi.com/2010/09/sharebar-for-blogger-floating-left.html'>Get this</a></span>
</div>
</div>
</div>



P.S. This only happened to me, I had to do minor tweaks because the sharebar was in the middle of my blog(yes, its weird) and you shouldn't get this, but if you do, you'll just have to tweak it by searching(Ctrl+F key) margin-left and changing the numbers[-(number)px]. Experiment how much tweaking you need if you do, I needed -800px(yes, a lot of tweaking)


Name it if you want(the name won't appear on your website) and paste the code as shown above.
Got problems with this? Comment, below or ask me via email.

1 comment:

Ads

Free Ads