Navigation means everything for your website or blog. Good navigation equals to the more page views. If you have better navigation in your blog then it's obvious that visitors will view more than one page per session. This cool navigation bar is totally coded in HTML and CSS which makes it faster. For making more out of it we also included a search option in it.
Note: Add a Gadget, where ever you want to appear your menu bar.
Step 5: Paste below codes to content box, click Save.
For live demo you can check my navigation bar under header.
How To Install Navigation Bar ?
Step 1: Go to Blogger > Theme > Edit HTML.
Step 2: Click any where in codes , Press Ctrl + F and search for ]]><
Step 3: Paste below codes before ]]>< and save theme.
#lt-search{margin:1px 15px 0 0;float:right}
#lt-search form{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7h-4RLPfLFhHTVY-Ltb4AtZ6ZL76oRhHfKjfCryrxI7qx74MFVGkKeGkSR69TUxnr8tkYrfr0NkT5qFLNSree0eCUpwDYkArWEqpRj1o-271z811rRcsXypiMIUCDLltqxKhvhxGIjYHX/s1600/eye-1915454_960_720.png) no-repeat scroll 5% 50% transparent;border:1px solid #CCC;border-radius:3px 3px 3px 3px;box-shadow:0 1px 0 rgba(0,0,0,0.05) inset,0 1px 0 #FFF;height:20px;padding:0 20px;position:relative;width:250px;background-color:#ffffff}
#lt-search form:hover{background-color:#000000}
#lt-search form input{color:#ffffff;font-size:13px;height:18px;text-shadow:0 20px 0 #000000;background:none repeat scroll 0 0 transparent;border:medium none;float:left;outline:medium none;padding:0;width:100%}
Step 4: Save theme , now go to blogger > layout > add a gadget>HTML/JAVASCRIPT.#lt-search form input.placeholder,#menu-search form input:-moz-placeholder{color:#000000;}.lt-btn {font-size:18;font-weight:bold;padding:3px;border: 1px solid #ffffff; -moz-border-radius:6px; -webkit-border-radius:6px;background-color:#424242;color: white !important;}.lt-btn:hover {text-decoration:none;padding:6px;border: 1px solid #ffffff; -moz-border-radius:6px; -webkit-border-radius:6px;background-color:#007bff;color:#000000;}.lt {background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9MRiUHIzszGkKtZT_6NrzWjph9nfqCoa8BxQNGmsrExDRkFGxuiA7jJySY2bgoEQhesWFHF9oiNW-4qE3gs1eR95I-sDpG73CAzKJWpAkgP5tVXp1yn_GP-RVtjPdOK-C0Xwg6t9-bH2C/s1600/blue-143734_960_720.jpg) no-repeat bottom;padding: 0px;border: 1px solid #424242; -moz-border-radius:6px; -webkit-border-radius:6px;}.lt:hover {background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9MRiUHIzszGkKtZT_6NrzWjph9nfqCoa8BxQNGmsrExDRkFGxuiA7jJySY2bgoEQhesWFHF9oiNW-4qE3gs1eR95I-sDpG73CAzKJWpAkgP5tVXp1yn_GP-RVtjPdOK-C0Xwg6t9-bH2C/s1600/blue-143734_960_720.jpg) no-repeat bottom;padding: 0px;border: 1px solid #02d4f9; -moz-border-radius:6px; -webkit-border-radius:6px;}
Note: Add a Gadget, where ever you want to appear your menu bar.
Step 5: Paste below codes to content box, click Save.
<div class='lt'>
<div dir="ltr" style="text-align: left;" trbidi="on">
Customization:<a href="/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3XDLHZQi4zxRZ6MOxZyc9Te7fJ9CAWQkjRyJIYJuSl0v41OcYM1y1zRgI9hlvI_BsY9-BD_BkOA0D9a7toKDtWGJthxQ9R875Dix3QkIKgjYEcg_NyJ2lSzSNNaeCPvUIhKsVPOIJRnBq/s1600/home-146585_960_720.png" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimgo4oV-USngP7kNaLDTPlmlleGT1V3ZMpG7mFlo4xIpVO6JUX1_Vz5UYhbxBRueyzVbJN2c1bs-Rq-nnqr0fav0TGDgANnciIvj_IQu16qX8XS0I8HBOcKFIDIPtPBUC2U27otioUsG-3/s1600/house-429204_960_720.png'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3XDLHZQi4zxRZ6MOxZyc9Te7fJ9CAWQkjRyJIYJuSl0v41OcYM1y1zRgI9hlvI_BsY9-BD_BkOA0D9a7toKDtWGJthxQ9R875Dix3QkIKgjYEcg_NyJ2lSzSNNaeCPvUIhKsVPOIJRnBq/s1600/home-146585_960_720.png'" /></a> <a class="lt-btn" href="URl Of PAGE">NAME</a><a class="lt-btn" href="URL OF PAGE">NAME</a><a class="lt-btn" href="URL">NAME</a><a class="lt-btn" href="URL">NAME</a><a class="postop1" href="URL">NAME</a><div id="lt-search"><form action="/search" method="get"><input autocomplete="off" div="" name="q" placeholde=" search..." /></form></div></div></div>
- Change blue background text with your page URL.
- Change red background text wuth page name.
