Add Sticky CSS Flocting Bar For Blogger ~ New Blogger Tricks

Add Sticky Css Floting Bar To Your Blogger Blog Which attracts more No of Visitors To Your Blog...Your Blog Look Beautiful And Greate.To Add Follow The Below Steps

1 . First Go To Blogger.com > Your Blog > Template

2 . Click On Backup and Backup Your Template

3 . Now Click On Edit HTML

Search for ]]></b:skin> and Paste The Below Css Code Before/Above It

/* NBT Notification bar */
#nbtbarWrap{
display: none;
margin: 0;
padding: 0;
position: fixed;
margin-top: -41px;
z-index: 999999;
width: 100%;
height: 41px;
}
#nbtbar {
width: 100%;
height: 28px;
margin: 0px;
padding-top: 7px;
text-align: center;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBOs4dpALFIb7MSLNWwP_lpN9ajy_4Hn18gKvvH22sThpS_hHd0EPCCDvbDJV-YU0gl2uTbtECjRv9rMVmlo2OmEpzpVY6dBXxmKKapSe-kl7KO-xxsNOIgVkpgZ1zIikU6GMRYmRLgiQQ/s1600/nbtbarback.png);
position: relative;
box-shadow: 1px 2px 9px #666666;
z-index: 9998;
text-decoration: none;
color: #eeeeee;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 4px rgb(0, 0, 0);
border-bottom: 2px solid #cccccc;
}
#nbtbar a{
text-decoration: none;
color: #fff;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
outline: none;
}
#nbtbar a:hover{
text-decoration: underline;
}
#nbtbarWrap #closenbtbar{
display: block;
position: absolute;
top: 0;
right: 23px;
height: 40px;
width: 21px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3uvW65-yI8GIHmpZ1c1umCKsattMbyX0aTUhdgpyxPoaXLWE-ASgGcjMseUX_5mkFkFuWgb-HDArTC6lpxEVvYaaDpGOMDMq9kyv4Trh3uAf1jYnpQke-tfTztUt7ounS13AO8QRUHhfO/s1600/NBT-light.png) no-repeat 0 center;
cursor: pointer;
}
#nbtbarWrap #closenbtbar:hover{
background-position: -21px 50%;
}
#nbtbarWrap.bottomPosition #closenbtbar{
background-position: right 50%;
}
#nbtbarWrap.bottomPosition #closenbtbar:hover{
background-position: -42px 50%;
}
#nbtbarWrap #opennbtbar{
display: block;
position: absolute;
top: -6px;
right: 15px;
padding: 0 7px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBOs4dpALFIb7MSLNWwP_lpN9ajy_4Hn18gKvvH22sThpS_hHd0EPCCDvbDJV-YU0gl2uTbtECjRv9rMVmlo2OmEpzpVY6dBXxmKKapSe-kl7KO-xxsNOIgVkpgZ1zIikU6GMRYmRLgiQQ/s1600/nbtbarback.png);
border-left: 2px solid #dddddd;
border-right: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
cursor: pointer;
z-index: 1;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 1px 2px 9px #333333;
}
#nbtbarWrap #opennbtbar span{
display: block;
width: 21px;
height: 34px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3uvW65-yI8GIHmpZ1c1umCKsattMbyX0aTUhdgpyxPoaXLWE-ASgGcjMseUX_5mkFkFuWgb-HDArTC6lpxEVvYaaDpGOMDMq9kyv4Trh3uAf1jYnpQke-tfTztUt7ounS13AO8QRUHhfO/s1600/NBT-light.png) no-repeat right 50%;
}

Now ADD The Below Code After The <body> or <body

<div class='opennbtbar' id='nbtbarWrap' style='display: block; margin-top: 0px;'>
<div id='nbtbar'>
<strong><font color='#84DC04'>Trending: </font></strong><a href='http://newblogger-tricks.blogspot.in/2013/09/add-sticky-css-floating-bar-for-blogger.html'>Get This Notification Bar!</a> |
<strong><font color='#FFFF00'>Most Popular: </font></strong><a href='http://newblogger-tricks.blogspot.in/2013/09/how-to-remove-powered-by-blogger.html'>Remove "powered by blogger" Attribution!</a>
<span id='closenbtbar'/></div><span id='opennbtbar' style='top: -6px;'><span/></span></div> <br/> <br/>

Replace ULR's With Your Ulr Of The Post
Replace Get This Widget , Remove "powered by blogger" Attribution with Your Post Title

Now Finally Add This Code Below/After <head> Imp

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

<script src='https://newbloggertricks.googlecode.com/svn/NBT-notificationBar.js' type='text/javascript'/>

Go To Your Blog And Check The Widget

Note: This widget is created by NewBloggerTricks. Don't forgot to link back if you want to share this tutorial