Adding A Floating Drop Down Menu With Search Box in Blogger.

A drop down menu is something that contains navigation URl's of your blog and making it easier to find the content users are looking for.
A floating element is something that sticks to your blog at the place you post it and scrolling doesn't affects it position.
Below is drop down menu for blogger with search box.

Adding Floating DropDown menu.

Adding Floating DropDown menu.
Login to your blogger dashboard.
Select your blog.
Select Template .
Click Edit HTML.
Add this code just above the body tag, <body>

--------------------------------------------------------------------------------

<style>
#naviopdropcont{
width:100%;
height:45px;
display:block;
padding:0;
margin:0 0 20px 0;
z-index:100;
top:0px;
left:0px;
position:fixed;
box-shadow:2px 2px 5px #444444;
-moz-box-box-shadow:2px 2px 5px #444444;
-web-kit-box-shadow:2px 2px 5px #444444;
-goog-ms-box-shadow:2px 2px 5px #444444;
background:#000;
}
#naviopdropnav{
float:left;
width:800px;
height:40px;
display:block;
padding:0;
margin-left:40px;
}
#naviopdropnav ul{
float:left;
margin:0;
padding:0;

}
#naviopdropnav li{
float:left;
list-style:none;
line-height:40px;
margin:0;
padding:0
background:#180000;
}
#naviopdropnav li a, #naviopdropnav li a:link{
color:#fff;
display:block;
margin:0;
font:16px georgia, verdana;
padding:10px;
text-decoration:none;
}
#naviopdropnav li a:hover, #naviopdropnav li a:active, #naviopdropnav .current_page_item a {
color:#fff;
padding:10px;
background:#007acc;}
#naviopdropnav li li a, #naviopdropnav li li a:link, #naviopdropnav li li a:visited{
font-size: 12px;
background:#180000;
color: #fff;
width: 150px;
margin: 0;
padding: 0px 10px;
line-height:30px;
position: relative;
}
#naviopdropnav li li a:hover, #naviopdropnav li li a:active {
color: #fff;
background:#007acc;
}

#naviopdropnav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px
}

#naviopdropnav li:hover ul, #naviopdropnav li li:hover ul, #naviopdropnav li li li:hover ul, #naviopdropnav li.sfhover ul, #topnaviopdropnav li li.sfhover ul, #topnaviopdropnav li li li.sfhover ul{
left:auto
}

#naviopdropnav li:hover, #naviopdropnav li.sfhover{
position:static;
}
</style>
<style>.
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);

background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #000;
font-size: 11px;
height: 30px;
width: 30px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
cursor:pointer;
background: #007acc;

}
</style>
<div id='naviopdropcont'>
<div id='naviopdropnav'>
<ul>
<li><a href=''>Home</a></li>
<li><a href='#'>About Us</a></li>

<li><a href='#'>Goods</a>
<ul>
<li><a href='#'>Item-1</a></li>
<li><a href='#'>Item-2</a></li>
<li><a href='#'>Item-3</a></li>
<li><a href='#'>Item-4</a></li>

</ul>
</li>
<li><a href='#'>Categories</a>

<ul>
<li><a href='#'>Category 1</a></li>
<li><a href='#'>Sub-category1</a></li>
<li><a href='#'>Sub-category2</a></li>
<li><a href='#'>Sub-category3</a></li>
<li><a href='#'>Sub-category4</a></li>
<li><a href='#'>drop down</a></li>
</ul>
</li>
<li><a href='#'>Contact Us</a>
</li>
<li style='float:right;padding:0px 0px ;margin:5px 18px 11px 40px;
'><form class="searchform" action="/search" method="get">
<input name="q" class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
<input class="searchbutton" type="submit" value="Search" />
</form></li>
</ul>
</div>
</div>
----------------------------------------------------------------------------------

6. Now click save and you are done.

You have just successfully added a sticky drop down menu for blogger.

Pages

TechBlog