Creative Blogging Tips | SeeBeeTee: Navigation Header Bar

Click to Zoom

We have made a header bar for you.
You may see in image that How it'll see.
May be you've not seen this in blog.
It's so beautiful and impressible for viewers.
It's better to confirm twice....so we've made a.....

Live preview

## http://bit.ly/livedemostbar
## You can also check that search is working or not.
## There is no link for fb and twitter because we haven't given.

:: Let's start ::

*1. Go to your Blog dashboard and goto Template option .
*2. Click on Backup/Restore button , after click on Download full template in dialogue box and close it.
*3. Now click on Edit HTML .
*4. Search for </body>
*5. Above </body> paste below code:

<div id="hbar1">
<div><a href="http://bit.ly/c-b-t">
<img src="http://creative-blogging-tips.blogspot.in/favicon.ico" alt="favicon" id="im1" /></a></div>
<div id="txt">::: Welcome to our blog :::</div>
<a href="http://bit.ly/c-b-t" target="_blank"><div id="txt1">Powered by CBT</div></a>
<div id="srcnt">
<form action="http://creative-blogging-tips.blogspot.in/search/" id="search" method="get">
<input name="q" placeholder="Type and hit enter" type="text" />
</form>
</div>
<a href="#" target="_blank"><div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj55F5LyzwAIPiw2SRuIIhyphenhyphenU9w8sMYpnXzpBoskht4OJMme0ctqG7wiHdhGUHCl_d55qJlecKukRP4ZHZ3qXRuR0lEOgr3ExhPGzlDoYCXyB-lupYwmquCXAsxVLhd47YzlBCe5BPmQcw4/s1600/twitter-bird-white-on-blue.png" alt="twitter" id="im2" /></div></a>
<a href="#" target="_blank"><div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix-a-wdkoov-Z_0uWTlmWFUWx_HTbK1IxzWm6EBerWVXW4dSCDZJxxhrXYV9t6bT16dN_dMC8UQDNyHLx-ydntQtoU-XfK9sSY5dkf0mbWy5qOxmlXdk74icw2qeh5tvy-zaoulMcj5R8/s1600/fb.png" alt="fb" id="im2" /></div></a>
</div>

*6. Then change the URL to your Blog URL which is highlighted with red background(creative-blogging-tips.blogspot.in) and change the First # highlighted with red background with your Facebook URL and Second # highlighted with red background with your Twitter URL.
*7. Then search for ]]></b:skin>
*8. And above ]]></b:skin> paste below code:

#hbar1
{
position: fixed;
width: 100%;
height: 35px;
top: 0;
left: 0;
background: #3b5998;
box-shadow:0 3px 5px #222;
-moz-box-shadow:0 3px 5px #222;
-webkit-box-shadow:0 3px 5px #222;
-o-box-shadow:0 3px 5px #222;
-ms-box-shadow:0 3px 5px #222;
}
#im1
{
float:left;
margin: 5px;
height: 25px;
width: 25px;
}
#im2
{
float: right;
margin: 5px;
height: 25px;
width: 25px;
}
#txt
{
float: left;
color: white;
margin-top: 7px;
margin-left: 7px;
font: bold 17px 'Verdana';
}
#txt1
{
color: rgb(10,250,175);
float: right;
margin: 10px;
font: normal 13px 'Verdana';
}
#srcnt
{
float: right;
margin: 5px;
}
#search input[type="text"]
{
background: transparent;
border: 1px solid #aaa;
border-radius: 5px;
color: rgb(255,255,255);
width: 240px;
padding: 5px;
font: bold 13px 'Verdana';
text-transform: uppercase;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#search input[type="text"]:focus
{
width: 340px;
color: #125;
background: #fff;
border: 1px solid rgb(125,150,213);
box-shadow: 2px 2px 2px #000;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
-o-box-shadow: 2px 2px 2px #000;
-ms-box-shadow: 2px 2px 2px #000;
}

Css Layout Help

*9. You may see in this image that how all has been set. You can change color and background with the help of CSS of which is highlighted in image.
*10. Click on Save template.
*11. Now it has been finished and just watch your blog with beautiful Header Bar.
Note: Please don't remove Powered by CBT.