Add a Floating Share Button Sidebar to Your Blog or Website having Facebook, Twitter, Digg, StumbleUpon etc. Icons

Have you ever noticed the floating share bar featuring Facebook like and share button, twitter, stumble upon and other social networking site logos in the right or left side of some websites or blogs? The share bar continues to float if you scroll down or up in the page and look like it is in the same position. If you have a blogspot blog or a website, then you can also use it on your site writing a few lines of code. I have managed to get the code segment to display such share bar in my blog searching on the net. I will share the code here for your use on your website and tell you how to customize the code. After installing the code into your blog, it will start showing the share bar in the right side of the web browser window when someone accesses your blog; and it will float with the scroll movements of the viewer. The bar will contain facebook like button, twitter, Google+, StumbleUpon, Digg and Facebook share icons. If you are using a dark template for your blog, then you can use a dark share bar. For dark template, here is the code:
#sharebar {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:#000000;padding:0 0 2px0;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;}
|
To use a light colored share bar, use the following code segment:
#sharebar {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 2px0;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;}
|
To use the code in your blogspot blog, follow these steps:
Ø Login to your blogger account ant go to your blog.
Ø Go to Layout. In the sidebar layout, Click on Add a Gadget.
Ø Add a HTML/Javascript Gadget.
Ø Copy any one of the above code segment and paste it to your HTML/Javascript code gadget.
Ø Hit Save. Now click on Save Arrangements.
Ø View your blog. It must be showing the floating share buttons on your blog.
Filament
ReplyDeleteIn a single WordPress plugin, Filament contains a group of useful features including Flare, a social share button plugin that makes it easy for others to share your blogpost on Twitter, Facebook, Buffer, and more—even spots like Hacker News and Reddit. Other Filament apps include: MailChimp subscribe form, Google Analytics tracking, all-in-one profiles, code management, and share highlighter.
This comment has been removed by the author.
ReplyDeleteFilament
ReplyDeleteIn a single WordPress plugin, Filament contains a group of useful features including Flare, a social share button plugin that makes it easy for others to share your blogpost on Twitter, Facebook, Buffer, and more—even spots like Hacker News and Reddit. Other Filament apps include: MailChimp subscribe form, Google Analytics tracking, all-in-one profiles, code management, and share highlighter.