Adding floating social media sharing buttons to Blogger ~ Blogger Tricks

What can a social bookmark button do to you blogspot blogger blogs

Many bloggers using blogspot blogging platform recommend to use social bookmark button in our blogs. Reason for this is that social bookmark will help to increase you blog post popularity and traffic to your blog. With a social bookmark button, you give an opportunity to your blog readers to submit your blog posts they like to social bookmark sites. So, social bookmarking also give back links to your blog, a way that can increase traffic to your blog.
Social bookmarking is also a search engine optimization technique. Because social bookmarking creates back links, your blog will be more lovable by search engines. Search engines love blogs that have many back links because it indicates that the blogs is referenced by other external sites.
There are many ways you can use to add social bookmark button to your blogger blogs. By default, blogger template usually come with social bookmark button. But, if your template does not have one, you may instead want to use a floating bookmark button.

Floating Social Bookmark Button

Floating social bookmark button is a set of social bookmark buttons that float your blogger blog. With a floating social bookmark button, the buttons will always be visible to your blog readers so that the readers can always hit the button any time without the need to do scrolling. They to add this floating social bookmark button to blogger blog is very simple.
See the image of the floating social bookmark button on the right. Or you can see it live in action here

How to Install a floating social bookmark button

Follow these steps to install a floating social bookmark button to your blogger blog

Log in to your blogger dashboard
Select Design and then Page Element of the blog to which you want a floating social bookmark button
Click Add a Gadget and select HTML/JavaScript in the appearing window
Copy all code provided below and paste it into content box of your widget. Leave the title box blank
Click Save
Move the widget to under you post block
Save and done.

Check the position of the button set. If is not right you can adjust its position by changing the position properties in the code.

The code

<style>
#pageshare {position:fixed; bottom:15%; margin-left:-333px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;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'>
<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></div>
<p style="font-family:fantasy, cursive, Serif;font-size:9px; text-align:center;"><blink><a href="http://www.bloggertrickz.co.cc/2011/04/adding-floating-social-media-sharing.html">Get this</a></blink></p>

</div>

Be a Fan

Posted in: Html codes+Effects,JQuery,Share+Socials,Tools+Plugins,Widgets

2 comments:

Anonymous said... [Reply]: My cousin recommended this blog and she was totally right keep up the fantastic work!

Child Care Centre; May 7, 2011 at 8:03 AM
Unknown said... [Reply]: @Karthick M

Thank you very much my dear friend; May 11, 2011 at 12:45 PM

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Get New