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 Steps1 . 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> (Want help to find code Click Here)
- And Paste The Below Css Code Before/Above It
/* NBT Notification bar */Now ADD The Below Code After The <body> or <body
#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(http://4.bp.blogspot.com/-zgw_M3ndUbM/UjL3FsR0p9I/AAAAAAAAAiI/jKETrYxgHaA/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(http://4.bp.blogspot.com/-EKBTBdOMsx8/UjK8Zm_D5SI/AAAAAAAAAh4/AG2TDLGGZ_k/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(http://4.bp.blogspot.com/-zgw_M3ndUbM/UjL3FsR0p9I/AAAAAAAAAiI/jKETrYxgHaA/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(http://4.bp.blogspot.com/-EKBTBdOMsx8/UjK8Zm_D5SI/AAAAAAAAAh4/AG2TDLGGZ_k/s1600/NBT-light.png) no-repeat right 50%;
}
<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
<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'/>
Note: This widget is created by NewBloggerTricks. Don't forgot to link back if you want to share this tutorial
Good Widget
ReplyDeleteKeep Sharing
Tricky Tricks 4U