Blogger Blogspot Blog: How to Add a Floating Social Bookmark Share Button Widget
By almirah
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
<!-- floating page sharer Start bloggersentral.com-->
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-70px; 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>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.bloggersentral.com/2010/07/install-floating-social-media-buttons.html">Get this</a></div>
</div>
<!-- floating page sharer End -->Blogger Blog Tips
- Blogger Blogspot Blog: How to Add a Related Post widget
As a blogger using blogspot platform, you will do enything to make your blogger blog popular and loved by many people. When a reader is visiting your blog and reading your blog posts, you will want to make the... - Blogger Blogspot Blog: How to Adjust Widget Distance in Sidebar
Once question often raised by many bloggers who are beginners is that how to adjust the distance between widgets added to sidebar. This is a very reasonable question since this issue has a general effect on... - Blogger Blogspot Blog: How to Add a Breadcrumb
Breadcrumb is a tools that you can apply to your blogger blogspot blog. This tools is an assistance to your blog readers so they feel more convenient in reading you blog posts. As a blogger, one of your goals...
Comments
To adjust the button set position, change the value in this code: margin-left:-70px
Yup, it didn't work. My codes for the sharebox are below. Can you fix it? I know you're amazing at HTML codes :D Thanks!
#sharebox {
background-color:#FFFFFF;
border-color:#C1CDCD;
border-style:solid;
border-width:1px;
left:103px;
bottom:40px;
margin-top:10px;
position:fixed;
width:64px;
}
It should be this left:103px;
Try reduce this to something about 50 or 60px. Should be ok, I think. Tell us how do you go.
No matter what value I put 50px or 20px or -103, still no change. Help me pls. You can view my page source so you see my whole HTML. Thanks :)
I am not so expert in html but I did a little experiment with your case. So I made a testing blog at bengkolli.blogspot.com with 2 sets of your floating button showing. I know that you are using the one from Bloggermint.
In that testing blog, I have also provided you with a post showing codes for the two and where i put them in the template. The only difference between the two is the value of 'left' as described before.
Hi I'm Fehl and I' just followed you here. Wow, thanks a lot for your help. I bookmarked the blog and I'm gonna set up the codes tomorrow. I appreciate your help. God bless!
Drear twentyfive,
Thanks for following. but please let me know whether it is ok or not. And please do not bookmark that blog because I am going to remove it once your floating bookmark problem is solved.
I finally figured it out. When I tried to change the left margin, Blogger doesn't show the changes in Preview so I saved it. Result, it worked :) Thanks a lot! I loved the layout of that blog btw. :) God bless :)
I noticed this button in a Blog recently. It is awesome!I would add this Booking button in my next Blog as I do not want to mess up with my existing ones.
@Anamika: The floating social bookmark explained in this article is to be added through add a gadget element. No need to go to your template html, so it is saver. You can delete that widget anytime if you decided not to keep it
Its a Great post about Blogspot. I LIKE your this hub. i am now following you dear friend.
You might visit my following hub and i i am inviting you to visit and leave your valuable comments...
it works! thank you!
I like your floating button but it does not have facebook and email in it. How do I add them?
Is it possible to remove the widget from the homepage -- so it only shows up on the post pages? Thanks!
NICE!!! What about Wordpress??
nice & useful post.thnx for sharing bro.check this also it will be useful.
how to add any share button you want to this widget
fehl 13 months ago
Excellent hub! Hey can I ask how to adjust the floating social bookmark button to the left more? I have that button in my website and it's distracting to my posts. Can you help me move it a little on the left please? Thanks a lot! Here's the link so you see my floating button. http://www.fvenue.com/2011/03/banco-filipino-closu