Membuat Menu Navigasi dan Search dibawah Header

Setiap kali kita mengunjungi sebuah web blog pasti kebanyakan menampilkan menu navigasi di bawah header yang berisi HOME dan menu-menu lainnya. Nah, untuk template rancangan blogger atau standar kita tidak menemukan menu navigasi dan search tersebut, lalu  bagaimana cara membuatnya ?

Hemmm,,, gampang kok cara membuat menu navigasi dan search seperti di bawah ini !

Menu Navigasti dan Search di bawah header

Pertama, masuklah ke blogger template - Edit HTML lalu cari kode </header> dan letakkan script berikut ini di bawah kode tersebut. 

<!-- navigasi dibuka -->

<!-- menu navigasi untuk template seluler -->

<b:if cond='data:blog.isMobile'>

<div id='mobilemenu'>

<span><a href='/'>HOME</a></span> &#183;

<span><a href='#'>MENU</a></span> &#183;

<span><a href='#'>MENU2</a></span> &#183;

<span><a href='#'>MENU3</a></span> &#183;

<span><a href='#'>MENU4</a></span> &#183; 

<span><a href='#'>MENU5</a></span>

<span><a href='#'>MENUT6</a></span>

</div>

<b:else/>

<!-- menu navigasi versi desktop -->

<nav>

<ul>

<li><a href='/'>Home</a></li>

<li><a href='#'>MENU1</a></li>

<li><a href='#'>MENU2</a></li>

<li><a href='#'>MENU3</a></li>

<li><a href='#'>MENU4</a></li>

<li><a href='#'>MENU5</a></li>

<li class='search'>

<form action='/search' id='search' method='get'> <input name='q' placeholder='Search...' size='40' type='text'/><input id='search-button' type='submit' value='Search'/></form>

</li>

</ul>

</nav>

</b:if>

<div class='clear'/>

<!-- navigasi ditutup -->

MENU di ganti dengan Nama Navigasi Sesuai keinginan sobat, lalu ...

Kedua, cari kode ]]></b:skin> bila sudah ketemu letakkan script di bawah ini di atas kode tersebut.

/* NAVIGATION*/

nav {

text-transform:uppercase;

position:relative;

font:bold 12px Arial,Sans-Serif;

}

nav * {

margin:0 0 0 0;

padding:0 0 0 0;

list-style:none;

}

nav ul {

background:#7bcd18;

height:40px;

}

nav li {

float:left;

display:inline;

}

nav li a {

padding:0px 15px;

line-height:40px;

color:#fff !important;

display:block;

text-decoration:none;

}

nav li a:hover {

background:#0122b1

}

nav li a:active {

background:#0122b1;

}

nav li ul {

display:block;

width:170px;

position:absolute;

left:auto;

z-index:10;

visibility:hidden;

opacity:0;

height:auto;

-webkit-transition:all 0.26s ease-out 0.2s;

-moz-transition:all 0.26s ease-out 0.2s;

-ms-transition:all 0.26s ease-out 0.2s;

-o-transition:all 0.26s ease-out 0.2s;

transition:all 0.26s ease-out 0.2s;

}

nav li li {

display:block;

float:none;

width:100%;

}

nav li:hover > ul {

visibility:visible;

width:200px;

opacity:1;

}

nav li li ul {

left:200px;

margin-top:

-40px;

}

nav li.sub > a {

position:relative;

padding-right:30px;

}

nav li.sub > a:after {

content:"";

width:0px;

height:0px;

border-width:4px;

border-style:solid;

border-color:#eee transparent transparent transparent;

position:absolute;

top:20px;right:10px;

}

nav li.sub li.sub > a:after {

content:"";

width:0px;

height:0px;

border-width:4px;

border-style:solid;

border-color:transparent transparent transparent #eee;

position:absolute;

top:16px;

right:10px;

}

nav #search{

position:relative;

float:right;

margin:5px 10px 5px 10px;

}

nav li.search{

float:right;

line-height:normal;

}

nav #search input[type="text"]{

float:left;

height:30px;

line-height:30px;

border:0 none;

font-size:12px;

font-weight:500;

width:120px;

padding:0 10px;

}

nav #search input#search-button{

height:30px;

line-height:30px;

background:#333;

border:none;

float:right;

padding:0 10px;

cursor:pointer;

color:#fff;

}

nav #search input#search-button:hover{

background:#272727;

}

nav #search input[type="text"]:focus{

background-color:#fff;

text-shadow:none !important;

outline:none;color:#555;

}

Warna merah adalah warna dasar background menu navigasi dan warna biru adalah warna dasar menu yang di sorot kursor. Silahkan di ganti sesuai keinginan dan warna blog sobat. Untuk navigasi di atas antara header dan menu tidak ada ruang kosong, apabila ingin ada ruang kosong silahkan isi dan ganti kode yang saya tebalkan seperti di bawah ini menjadi tidak nol.

nav * {

margin:0 0 0 0;

padding:0 0 0 0;

list-style:none;

Untuk Navigasi Versi Mobile taruh script di bawan ini di atas menu  /* NAVIGATION*/ tersebut. 

/* NAVIGASI */

.mobile #mobilemenu{background:#0a68a4;color:#ddd;text-align:center;width:auto;overflow:hidden;

margin:0;font:normal 14px Calibri,Arial,Sans-Serif;

border-top:1px solid #666;border-bottom:1px solid #000}.mobile #mobilemenu span a{color:#ddd;padding:0;margin:0}.mobile #mobilemenu span a:hover{text-decoration:underline}.mobile #sosnet{background:#F5F5F5;border-bottom:1px solid #ddd;clear:both;overflow;hidden;margin:0;padding:6px}

Jika sudah selesai silahkan klik save template dan lihat hasilnya.

Tweet