Add Horizontal Menu With Search Bar Above Blogger Header

Add Horizontal Menu With Search Bar Above Blogger Header

Blogger templates can have horizontal menu bar below the blog header. It is easy to add, just add the 'Label' widget below the header in the blogger layout and your menu bar with all your blog's topic is ready. But some time you need to add another menu bar for some special pages or topics like About page, Privacy policy page and Sitemap page etc. You always want to keep this type of menu apart from your main menu bar. So why not add this menu bar above your blog's header.

The search bar above or with header looks good than placing it in sidebar. In this tutorial you will get to know how to add horizontal menu bar with search bar on the top of your blogger header.
You can take look at the Live Preview.  
Lets start the process by following below steps:

• Go to your Blogger Dashboard >> Template >> Edit HTML.

• Remember, backup your current template before editing on it.

• Search for ]]></b:skin> in your template and paste the below code just above it.

 /* CSS FOR SEARCH BAR STARTS */  
 #search{width:250px; border:1px solid #E0DFD9;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7wnlA8hjrWPtBb8VY-QR-UuFw6F0kcVRAgMjZtRf-9Wm3roxVG6-w5VLNY6k3K9bO2Qtiy69cX_mkUxrVMYF5mroUv1hcrrPZi68fDamkiFj9DdTI52Dy8wl54_eLZ_Kgv_7WSQ3pWeY/s1600/search-bg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden}  
 #search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}  
 #search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}  
 #search-wrap{padding:15px 0}  
 .topsearch #search{margin-top:0;margin-bottom:1px}  
 /* CSS FOR MENU BAR STARTS */   
 .shadowblockmenu{  
 font-weight: bold;  
 font-size: 85%;  
 width: 100%;  
 background-color: #0F3775;  /* Change the background color of horizontal bar */ 
 }  
 .shadowblockmenu ul{  
 border: 1px solid #BBB;  
 border-width: 0px 0; /* Show only top and bottom border for main menu container */  
 padding: 0;  
 margin: 0;  
 overflow: hidden;  
 }  
 .shadowblockmenu ul li{  
 display: inline;  
 margin:0;  
 padding:0;  
 }  
 .shadowblockmenu ul li a{  
 display:block;  
 float:left;  
 text-transform: uppercase;  
 color: white;  
 padding: 8px 15px 8px 9px;  
 margin: 0;  
 text-decoration: none;  
 border-right: 0px solid #BBB; /*right border between menu items*/  
 -moz-box-shadow: inset -7px 0 10px rgba(2, 2, 119, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.4) specifies rgb values, last specifies opacity */  
 -webkit-box-shadow: inset -7px 0 10px rgba(2, 2, 119, 0.6);  
 box-shadow: inset -7px 0 10px rgba(2, 2, 119, 0.6);  
 text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */  
 -moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */  
 -webkit-transition: all 0.2s ease-in-out;  
 -o-transition: all 0.2s ease-in-out;  
 -ms-transition: all 0.2s ease-in-out;  
 transition: all 0.2s ease-in-out;  
 }  
 .shadowblockmenu li:nth-of-type(1) a{ /* Extra style for first menu link */  
 border-left: 1px solid #BBB; /* add border to left side of first menu link */  
 padding-left:25px;  
 background: url("Icon Image URL") 1px center no-repeat; /* Add icon */  
 background-size:20px 20px;  
 }  
 .shadowblockmenu li:nth-of-type(2) a{ /* Extra style for 2nd menu link */  
 padding-left:25px;  
 background: url("Icon Image URL") 1px center no-repeat; /* Add icon */  
 background-size:20px 20px;  
 }  
 .shadowblockmenu li:nth-of-type(3) a{ /* Extra style for 3nd menu link */  
 padding-left:25px;  
 background: url("Icon Image URL") 1px center no-repeat; /* Add icon */  
 background-size:20px 20px;  
 }  
 .shadowblockmenu li:nth-of-type(4) a{ /* Extra style for 4nd menu link */  
 padding-left:25px;  
 background: url("Icon Image URL") 1px center no-repeat; /* Add icon */  
 background-size:20px 20px;  
 }  
 .shadowblockmenu li:nth-of-type(5) a{ /* Extra style for 5nd menu link */  
 padding-left:25px;  
 background: url("Icon Image URL") 1px center no-repeat; /* Add icon */  
 background-size:20px 20px;  
 }  
 .shadowblockmenu ul li a:hover{  
 color: yellow;  
 -moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); /* Add 2 inset shadows to each menu item */  
 -webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);  
 box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);  
 }  /* www.thepageword.com */  

Note:-
If you want to add icon for each menu tab you have to add your icon image URL in place of RED. Icon image should be square and will be better if 20px*20px or 40px*40px.
IF you want to add more tab you can repeat the the code in GREEN for each tab styling and icon.
Change the RGBA values in Yellow to change the shadow and depth in the tab before hovering.
Change the shadow and depth on hover  by changing RGBA values in  .shadowblockmenu ul li a:hover{

• Now, you need to add HTML for your Horizontal Menu Bar with Search Bar.
• Press Ctrl + F and search for below code:

 <div class='fauxborder-left header-fauxborder-left'>  
   <div class='fauxborder-right header-fauxborder-right'/>  

• If you didn't find the above code, then try to search for following code:

   <div id='header-wrapper'>  
   <b:section class='header' id='header' maxwidgets='3' showaddelement='no'>  
   <b:widget id='Header1' locked='true' title='Herman Blog (Header)' type='Header'/>  
   </b:section>  
   <div style='clear: both'/>  
   </div>  
  

• Now paste the below code just below the above code in PINK.
• If you got found the code above in Purple, then paste below code just above it.

 <div class='shadowblockmenu'>  
 <ul>  
 <li><a href='#'>Home</a></li>  
 <li><a href='#'>About</a></li>  
 <li><a href='#'>Contact</a></li>  
 <li><a href='#'>Privacy Policy</a></li>  
 <li><a href='#'>Sitemap</a></li>  
 <li><div class='topsearch' style='float: right'>  
 <div class='clerfix' id='search'>  
   <form action='/search' id='searchform' method='get'>  
     <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search here...&quot;;}' onfocus='if (this.value == &quot;Search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search This Blog Here...'/>  
     <input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl0VB1lVDVxoFC8sSa29ieui7qgIOYTOezr4Qj8LEvN8TioFi7FLJ-aHiEMLF09fWf1uvj3RZm97Vk3y4agFxgxQECSknE7EGXrOUTUyEUhbr2yOqc9hOU3kaBCufvu7cukUPKdUsDnWo/s1600/search.png' title='Search' type='image'/>  
   </form>  
 </div>  
 </div>  
 <div style='clear:both;'/></li>  
 </ul>  
 </div>  /* www.thepageword.com */ 

Note:-
 Replace # with your URL for each tab and change the tab name accordingly.
If something goes wrong or having any problem you can comment below.