How To Add Nav Bar To Blogger

Now Hellobar is common and using by most the bloggers but offers less customization option along with their logo on the bar. So if you're bored with Hellobar let's try our new notification bar. Which offers more customization option than Hellobar, attractive design and there is no logo or watermarks on it.

Excited? You want to add our new notification bar to Blogger? Then follow below steps to add the new notification bar to Blogger.

First of all, go to Blogger >> Select your site >> Template >> Edit HTML. Now you need to search ]]></b:skin> (using+f) tag and add the following CSS code just above it.

#gynotification {
border-bottom:3px solid #ECF1EF;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPaXRS-Iy6NF9kOVfDc2ygIfk2EXcSMnv5-AJ0qf2_o8RTnQJu5Syb7lXXdYQgAbNrZSvrWWC_0_JS8zvag7p3QKMO2_Uji5pv5OsoxKhn3qhqb0wrWhOAEpplhr4j7wbkE98Kn3bB77NF/s1600/Purple+Ribbon+%25282%2529.jpg') repeat-x;
font-size:14px;
font-family: Arial, Helvetica, Sans-serif;
color:#FFF;
padding:10px 0px;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
text-align:center;
height:20px;
}
#gynotification a {
color:#48d3f6;
text-decoration:none;
}
#closebtn {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzvtM4qtlxNuPuNIoVEDKBUyFxxLCEOmdo1EKcEBam7_mvqYDkg_4itgiZTuFvAKLmqzi6vacPNjjA8z67ahcg8Z1A46_WMdsRRwJ7u0QpsXlzIfQk7XXVz_142RjV9Vch2j6kDBP1_4/s1600/saasass.png') top no-repeat;
border:none;
margin-left:15px;
position:absolute;
cursor:pointer;
}
#gyin {
cursor: pointer;
position: relative;
z-index: 1000;
}
.gynotification #closebtn {
margin-left: 4px;
}
#gybar{
text-decoration: none;
color:#FFFFF;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
outline: none;
}
#gybar a:hover{
text-decoration: underline;
}

To change link color edit #48d3f6
To change text color edit #FFFFF

Next search for </head> (using+f) and add the following script just above it.

<script src='http://code.jquery.com/jquery-1.5.js'/>
<script src='http://gameryards.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
function anim(duration){
$('#gyin').animate(
{height: 'toggle'},
{duration: duration, specialEasing: {height: 'easeOutBounce'}}
);
}

$('#closebtn').click(function() {
$('#gynotification').slideUp();
anim(800);
});

$('#gyin').click(function() {
anim(500);
$('#gynotification').slideDown('slow','easeOutBounce');
});
});
</script>

Now serach for <body> and add the following code below it

<div id='gynotification'>
<div class='gynotification'><div id='gybar'>
<span style='float: center; margin: 3px 0pt 0pt; font-weight: bold;'> NOTIFCATION MESSAGE HERE </span>
<input id='closebtn' type='button'/>
</div></div>
</div>
<div id='gyin' style='display:none;position:fixed;top:-88;right:10px;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8VJ8b4X9mg4FeQwMnqKHJR4YDIvkbdUniNqe1cJb1wzogF2fVoHbl8x3gdSDLYftL5d6lXu4x4D27SNqdDPgiACaELrCA_5uZ87kwtZ3937mzCyiZTuQog9pa5CYw8_KH1MCINuFm-NY/s1600/sss.png'/>
<input id='gyin' type='hidden'/>
</div>