OscarminiOscarmini
  • Home
  • Reviews
  • Gadgets
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact us
    • Advertise
    • About Us
Facebook Twitter Instagram
  • Home
  • Reviews
  • Gadgets
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact us
    • Advertise
    • About Us
Facebook Twitter Instagram
Oscarmini Oscarmini
Subscribe
  • Home
  • Reviews
  • Gadgets
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact us
    • Advertise
    • About Us
OscarminiOscarmini
Home»Blogging»How to Add Floating Share Buttons to Blogger (blogspot) sidebar
Blogging

How to Add Floating Share Buttons to Blogger (blogspot) sidebar

Oscar FrankBy Oscar Frank2 Mins Read
Facebook Twitter WhatsApp LinkedIn Email
Share
Facebook Twitter LinkedIn WhatsApp Pinterest Email

This a blogger version on the blog post I made two days ago on How to Add floating share buttons to WordPress without plugin.

It won’t take you 5 minutes to install this floating buttons to your blogger blog sidebar. Here is what the share buttons would look like

adding floating share buttons to blogger

How I added floating Share buttons to my Blogger Blog

Follow this procedures to add to your blogspot blog

1. Login to your blogger account, Locate the blog you want to add the share button to, next to it is a drop down button, click on it and select Layout.

2. When it opens, click on Add a Gadget.

3. Select HTML/Javascript

4. Copy the code below and paste into the secod box, remember to leave the title empty.

 

<!–SideBar Floating Share Buttons Code Start–>
<style>
#pageshare {position:fixed; bottom:15%; right: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>
<br/><div style=”clear: both;font-size: 9px;text-align:center;”><a href=”http://oscarmini.com/how-to-add-floating-share-buttons-to-blogger-blogspot-sidebar” target=”blank”><font color=”black”>[Get Widget]<font></font></font></a></div></div>
<!–SideBar Floating Share Buttons Code End–>

 

5. Save. And thats it.

blogger Blogger tips blogging Share Buttons Social Media
Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
Oscar Frank
  • Website

A Nerd who blogs, makes music, Video-graphs, writes #codes and LOOPS the whole process for a living. Yeah! That's me. I'm on Facebook, Twitter or Instagram

Related Posts

5 Best Gadgets For Hobby-Bloggers In 2022

March 3, 2021

5 Best Writing Software And Gadgets For Writers In 2022

January 14, 2021

Suggestions on How To Write Enough

November 15, 2020
Add A Comment

Leave A Reply Cancel Reply

Latest Posts

Amazing Features in Telegram Premium You Need to Know

July 1, 2022

PiggyVest Acquires Abeg

July 1, 2022

How to Immigrate to Canada

June 29, 2022

How to Apply for Canada Work Permit

June 29, 2022
Oscarmini
Facebook Twitter Instagram YouTube
© 2022 Oscarmini Co. Designed by illBytes.

Type above and press Enter to search. Press Esc to cancel.