Membuat Menu navigasi dan kotak pencarian

Cara membuat menu navigasi dan kotak pencarian, Membuat website atau blog tentunya akan lebih lengkap jika di berikan Menu Navigasi dan kotak pencarian dalam website atau blog tersebut, sehingga pengunjung atau pengguna akan lebih nyaman dan mudah untuk menelusuri apa saja konten yang ada dalam website/blog tersebut dan juga kita sebagai pemilik dari website/blog akan lebih puas jika konten kita di kunjungi di baca oleh orang lain serta bermanfaat buat orangg banyak.

Maka dalam kesempatan ini Jasa setting blog sebagai jasa pembuatan website akan memberikan panduan Cara membuat Menu Navigasi dan kotak pencarian.
Lalu seperti apa sih Menu Navigasi dan kotak pencaraian atau penelusuran tersebut, sebagai contohnya seperti pada gambar yang di bawah ini

Membuat Navigasi dan kotak pencarian pada dasarnya sangat banyak dari segi model tampilanya akan tetapi untuk segi responsiv serta mode nya perlu di perhatikan supaya hasil keseluruhan tampilan website akan lebih menarik dan juga loading blognya bisa cepat tanpa ada hambatan, oleh karena itu dalam panduan ini admin jasa ganti domain akan memberikan Cara membuat Navigasi dan kotak pencarian yang responsiv.

Tujuan serta fungsi dari responsiv ini adalah jika sebuah website di buka dengan ponsel (HP) sekalipun maka tampilan menu navigasi dan kotak pencarian akan mengikuti layar ponsel tersebut, sehingga pengguna ponsel tidak kesulitan untuk menavigasi website tersebut, dan untuk cara pembuatanya selengkapnya silahkan ikuti panduanya di bawah ini:

Cara Membuat Menu Navigasi dan Kotak Pencarian
1.buka blog anda dengan mengunjungi alamat www.blogger.com
2.lalu login ke akun blog masing-masing
3.Klik Desain untuk menuju dashboard blogger
4.pada menu dashboard blog pilih Template , Lalu klik EDIT HTML, panduan gambarnya lihat gambar di bawah ini

5.selanjutnya kopi kode yang di bawah ini lalu pastekan di atas kode ]]</b:skin>

 
nav {
text-transform:uppercase;
position:relative;
font:bold 12px Arial,Sans-Serif;
background: #e74c3c;
}
nav * {
margin:0 0 0 0;
padding:0 0 0 0;
list-style:none;
}
nav ul {
overflow: hidden;
background:rgba(231, 76, 60, 0.84);
float:left;
}
nav li {
float:left;
display:inline;
}
nav li a {
padding:3px 15px;
line-height:40px;
color:#fff !important;
display:block;
text-decoration:none;
}
nav li a:hover {
background:rgba(231, 76, 60, 0.84) !important;
}
nav li ul {
display:block;
width:170px;
position:absolute;
left:auto;
z-index:10;
visibility:hidden;
opacity:0;
height:auto;
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;
}

6.Supaya Responsiv Perlu di tambahkan media kode query ke template anda, Disini saya berikan media query responsiv untuk ukuran 600px dan untuk ukuran 380px, Maka selanjutnya kopi kode yang di bawah ini dan pastekan atau letahkan di atas kode ]]</b:skin>

@media screen and (max-width:600px){
#nav2{display:inherit;margin:5px;float:left;padding:8px;}nav ul{display:none;}
}
@media screen and (max-width:380px){
#nav2{padding:3px;}#search-top{padding:5px;}input[type="text"]{padding:5px;width: 90px;}#search-button-top{background-image: url("http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png");
background-repeat: no-repeat;
transition: all 0.7s ease 0s;
height: 26px;
width: 29px;
background-color: #34495e;
background-position: 7px -247px;
border: none;
float: right;
cursor: pointer;}
}
}

7.Selanjutnya kopi lagi kode yang di bawah ini dan pastekan atau letahkan di bawah kode header atau </head>

<nav>
<ul>
<li><a href="/search/label/Tutorial">Tutorial</a></li>
<li class="sub"><a href="/search/label/Template">Template</a><ul>
<li><a href="/search/label/CSS3">CSS3</a></li>
<li><a href="/search/label/HTML5">HTML5</a></li>
<li><a href="/search/label/Responsive">Responsive</a></li>
<li><a href="Alamat Tautan disini">SEO</a></li>
</ul>
</li>
</ul>
<select class="nav2" id="nav2" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value="/">Home</option>
<option value="http://jasa-seting.blogspot.com/p/sitemap.html">Tutorial</option>
<option value="/search/label/Template">Template</option>
<option value="/search/label/CSS3">CSS3</option>
<option value="/search/label/HTML5">HTML5</option>
<option value="/search/label/Responsive">Responsive</option>
<option value="Alamat Tautan disini">SEO</option>
</select>
<form action="/search" id="search-top" method="get">
<input name="q" placeholder="Search..." type="text"/><input id="search-button-top" type="submit" value=""/></form>
</nav>

8.selanjutnya anda tinggal memasukan Nama menunya dan alamat tautanya sesuai konten blog masing-masing.
9.jika sudah selesai lalu simpan Template nya sampai berhasil tersimpan.
10.selesai.

Demikian panduan dari jasa murah pembuatan website tentang Cara membuat menu navigasi dan kotak pencarian, jika ada kesulitan silahkan untuk bertanya memalaui kolom komentar di bawah ini.