Easy to install floating sticky bar with social sharing buttons

Posted On / 2 comments

sticky bar for blogger
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.


          Receive News From The Blog In Your E-mail

          Sign up and receive directly in your email. Its free!! Enter your email address and then confirm to begin receiving exclusive news from Blog!


          2 comments:

          1. Empty what's full. Scratch where it itches. Don't go around saying the world owes you a living rs gold, The world owes you nothing. It was here first. Being happy doesn't mean that everything is perfect Runescape Gold, It means that you've decided to look beyond the imperfections. Do not pray for tasks equal to your powersrs gold.

            ReplyDelete
          2. Death, old age, are words without a meaning, that pass by us like the idle air which we regard not Diablo 3 Gold Sale, It takes strength to do what must be done when the work is unpleasant and uncomfortable Diablo 3 Gold, it takes strength to persist in the face of obstacles, when it would be much easier to simply give up Buy Diablo 3 Gold.

            ReplyDelete

          Please read first before commenting:

          1.) No spamming please

          2.) Do not flood the comment box with links.

          3.) To get free updates, kindly subscribe.

          4.) Have fun visiting my blog.

          x
          Subscribe
          emailSubscribe to our mailing list to get the updates to your email inbox...
          Delivered by FeedBurner | powered by blogtipsntricks