Easy to install floating sticky bar with social sharing buttons

Good day my friendships! in today's episode of FH2M I am going to share a blogger widget that will help you navigate your site easier. It is a floating sticky bar with social sharing buttons for facebook, twitter and Google+, I also call this the floating menu bar.

After searching for a cool sticky bar I finally choose this one. I like it because it is very easy to install and you can edit its colors, font style, font size, you can also choose where you want to put it, top or bottom. A demo of this widget can be seen on this blog, I am using it as my menu bar and blend it to my template to make it look cool.

You can also add more features to this sticky bar if you are good with coding. So lets start shall we.

Installation

1. Go to your blogger.com account

2. Go to edit HTML and make sure you backed up your template in case something goes wrong.

3. Go to your blogger layout > Add gadget > HTML/ Javascript and add the codes below and save

<style type='text/css'>
#tnsbar {
background: none repeat scroll 0 0 #000000;
border-bottom: 2px solid #F3F3F3;
box-shadow: 0 2px 7px #000000;
color: #FFFFFF;
font-size: 10px;
height: 30px;
margin: 0;
overflow: hidden;
padding: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 100;
}
#tnsbar a {
color: #FFFFFF;
font-family: 'Droid Sans',sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 30px;
list-style: none outside none;
text-decoration: none;
margin:50px;
}
</style>
<div id="tnsbar">
<div style="float:right;padding:4px;">
<a href='http://twitter.com/share' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-via='dadhust' data-lang='en'></a>
<b:if cond='data:post.isfirstpost'>f
</b:if>
</div>
<div style="float:right;padding:4px;">
<g:plusone size="medium"></g:plusone>
</div>
<div style="float:right;padding:4px;">
<fb:like layout="button_count" show_faces="false" font=""></fb:like>
</div>
<p><a href='#' target='_blank'>Your Text Here</a></p>
</div>

4. Now find this code </body> using CTRL+F and add the following codes above it, only if you haven’t added the Like, Tweet and Google+ button to your blog. If you already have them you don't need to follow this step.

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<script src='//platform.twitter.com/widgets.js' type='text/javascript'/>

Customize

• 000000 is the background color of the sticky bar, you can change the color using this color code generator. 
• If you like to put it on the bottom screen, change top to bottom.
• box-shadow: 0 2px 7px #000000 is that tiny box shadow on your bar, you can remove them by erasing it from the script.
• Change dadhust to your twitter username.
• Change Your Text Here to your desired message like "hello" or "welcome". In my case, I used that to make a floating menu bar. Here is a sample.

Change this code from this

<p><a href='#' target='_blank'>Your Text Here</a></p>
</div>

To this

<p><a href='http://fromhobby2money.blogspot.com/' target='_blank'>~Home</a><a href='http://fromhobby2money.blogspot.com/p/contact-me.html' target='_blank'>~Contact</a><a href='http://fromhobby2money.blogspot.com/p/sitemap.html' target='_blank'>~Table of Contents</a></p></div>

 Those colored in red are the URL of your chosen menu, change them as you wish.


That is all! I hoped you liked it, if you have questions kindly use the comment form below.