SNDSOFT Custom Navbar For Blogger

­

Whenever the word “Navbar” strikes the Bloggers
minds,they get nostalgic and remember of the difficulty they have faced while
hiding the blogger navbar.But in this post I am not talking about the blogger
navbar,I am talking about the fixed custom SNDSOFT Navbar enabling the bloggers
to post the information,advertisement and others like promoting their blog
content.you can see live demo of this on my blog.For this Follow the following
steps:-

1.    Now
sign in blogger.com.
  •        Go
    to design(in old blogger interface) or Layout(in new blogger interface)
  •        Click
    on  Edit HTML
Note:-If
you find difficulty in new blogger interface you can click on setting and click
on switch on old blogger interface option
2.Then  Find the   ]]></b:skin>
tag. (press ctrl + F to open the find box and copy the code to find box for
quick finding)
3.Before that copy the given code

#SNDSOFT_bar{
background:#FF0808 url(‘http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/s400/stickybar.png’) repeat-x;
width:100%;
margin:0px auto 0px auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px;
position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,”Helvetica”,sans-serif;
line-height: 24px;
}
#SNDSOFT_bar a{
text-decoration:underline;
color:#FFFC00;
font-size:12px;
font-weight:bold;
font-family: verdana, arial,”Helvetica”,sans-serif;
line-height: 24px;
}
#SNDSOFT_bar a:hover{
text-decoration:underline;
}
#SNDSOFT_bar p {margin:0; list-style:none;}
#SNDSOFT_bar img {vertical-align: middle;
margin-right: 6px;}

4.Then again Find <body>tag. (press ctrl + F to open the find box and
copy the code to find box for quick finding)
5.After
that copy the given code

 

<div id=’SNDSOFT_bar’><span
style=’color: rgb(255, 252, 0);’></span>
                Your Content here
                <span
style=’padding: 0px; float: right;’>
                <img
align=’absmiddle’ border=’0′ onclick=’closeTopAds();return false;’
src=’http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/s400/cancel.png’
style=’cursor: pointer;’/></span></div>

 

6.Replace Your Content
here with your  respective content
andSave the template.
  •         Go to design(in old blogger interface) or
    Layout(in new blogger interface)
  •        Click
    on  Page Elements
7.Then  Add a
gadget and choose HTML/java script
8.Copy and paste the below given code

 

<script type=’text/javascript’>
//<![CDATA[
var SNDSOFT_arr = new Array();
var SNDSOFT_clear = new Array();
function SNDSOFTFloat(SNDSOFT) {
SNDSOFT_arr[SNDSOFT_arr.length] = this;
var SNDSOFTpointer = eval(SNDSOFT_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode &&
document.compatMode!=”BackCompat”) ? document.documentElement
: document.body;
this.SNDSOFTsrc = document.all?
document.all[SNDSOFT] : document.getElementById(SNDSOFT);
this.SNDSOFTsrc.height =
this.SNDSOFTsrc.offsetHeight;
this.SNDSOFTheight = this.cmode.clientHeight;
this.SNDSOFToffset =
SNDSOFTGetOffsetY(SNDSOFT_arr[SNDSOFTpointer]);
var SNDSOFTbar = ‘SNDSOFT_clear[‘+SNDSOFTpointer+’]
=
setInterval(“SNDSOFTFloatInit(SNDSOFT_arr[‘+SNDSOFTpointer+’])”,1);’;
SNDSOFTbar = SNDSOFTbar;
eval(SNDSOFTbar);
}
function SNDSOFTGetOffsetY(SNDSOFT) {
var mtaTotOffset =
parseInt(SNDSOFT.SNDSOFTsrc.offsetTop);
var parentOffset = SNDSOFT.SNDSOFTsrc.offsetParent;
while ( parentOffset != null ) {
SNDSOFTTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return SNDSOFTTotOffset;
}
function SNDSOFTFloatInit(SNDSOFT) {
SNDSOFT.pagetop = SNDSOFT.cmode.scrollTop;
SNDSOFT.SNDSOFTsrc.style.top = SNDSOFT.pagetop –
SNDSOFT.SNDSOFToffset + “px”;
}
function closeTopAds() {
document.getElementById(“SNDSOFT_bar”).style.visibility
= “hidden”;
}
//]]>
</script>

 

9.Save it………That’s it…….
Don’t
forget to  Comment regarding this
post.Feel free to comment if you have any problem or views regarding any post……

You may also like...

1 Response

Leave a Reply

Your email address will not be published. Required fields are marked *