Membuat Menu Navigasi Plus Kotak Pencarian Responsive

Cara Membuat Menu Navigasi Plus Kotak Pencarian Responsive Mobile Friendly - Navigasi adalah petunjuk posisi dan arah perjalanan. Di dalam dunia web, navigasi dianggap penting agar user / pengunjung yang sedang berada di dalam halaman tertentu tidak tersesat dan mudah menemukan halaman-halaman lain dalam blog / website.

Apa itu Menu Navigasi Plus Kotak Pencarian Responsive?
Menu Navigasi Plus Kotak Pencarian Responsive (Mobile Friendly) adalah sebuah fasilitas yang diberikan oleh pemilik situs, dimana didalamnya berisi sekumpulan link-link penting yang mengarah ke halaman tertentu dan sebuah kotak pencarian yang digunakan untuk mencari artikel dengan sebuah kata kunci serta memiliki tampilan yang dapat menyesuaikan segala jenis tampilan secara otomatis dengan baik bila di akses melalui berbagai macam perangkat atau biasa disebut mobile friendly.

Baca juga : Membuat Blog Menjadi Responsive Mobile Friendly

Menu navigasi ini berbeda dengan menu navigasi yang pernah saya share sebelumnya pada artikel berjudul

Perbedaannya terletak pada bentuk tampilan menu navigasi. Menu navigasi sebelumnya apabila blog yang menggunakannya diakses melalui perangkat dengan ukuran layar yang lebih kecil seperti seluler atau handphone, tampilannya akan tampil amburadul tidak tersusun rapi. Sedangkan menu navigasi plus kotak pencarian responsive mobile friendly yang akan saya share kali ini, tampilannya akan tersusun berbeda dan rapi karena secara otomatis menyesuaikan ukuran layar ketika blog diakses melalui perangkat yang berbeda dan memiliki ukuran layar yang lebih kecil.

Oleh karena itu, pengunjung yang mengakses blog melalui perangkat seluler atau mobile, tampilan menu navigasi website atau blog akan terlihat sempurna dan profesional serta memudahkan para pengunjung memilih halaman tertentu di dalam sebuah blog dalam hal navigasi.

Berikut penampakan Menu Navigasi Plus Kotak Pencarian Responsive (Mobile Friendly) pada perangkat yang berbeda.

Membuat Menu Navigasi Plus Kotak Pencarian Responsive - Tutorial Blogger

Tampilan Dekstop

Tampilan Seluler/Mobile

Bagaimana sob, cukup keren bukan? Apakah anda berminat?
Jika berminat, berikut ini kode CSS, JavaScript, dan HTML serta cara memasang Menu Navigasi dengan Kotak Pencarian Responsive Mobile Friendly.

Pertama-tama pastikan template blog anda sudah terdapat kode di bawah ini. Kode di bawah ini berfungsi untuk menampilkan kode HTML simbol-simbol gambar (font awesome), karena di dalam menu navigasi yang akan kita buat terdapat simbol gambar kaca pembesar yang terletak pada tombol kotak pencarian dan gambar rumah pada home. Jika belum, silahkan copy paste kode di bawah ini tepat di atas kode </head>. Untuk lebih jelasnya, baca artikel berjudul Cara Menggunakan dan Memasang Font Awesome di Blog sebagai panduannya.

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Copy paste kode CSS di bawah ini tepat di atas kode </head>

<style>
/* NAVIGATION MENU */
.toggleMenu {
display:none;
background:#555;
padding:0 15px;
height:45px;
line-height:45px;
color: #fff !important;
}
#nav {
background:#333;
text-transform:uppercase;
height:48px;
line-height:45px;
font-family:Arial;
font-size: 12px;
font-weight:bold;
/text-shadow:1px 1px 2px #000;
-webkit-box-shadow:0 1px 5px #000;-moz-box-shadow:0 1px 5px #000;box-shadow:0 1px 5px #000;
}
.nav-menu2 {
background:#333;
list-style: none;
margin:0 0 0 0;
*zoom: 1;
float:left;
}
.nav-menu2:before,
.nav-menu2:after {
content: " ";
display: table;
}
.nav-menu2:after {
clear: both;
}
.nav-menu2 ul {
list-style: none;
margin:0 0 0 0;
width:12em;
}
.nav-menu2 a {
display:block;
padding:0 15px;
}
.nav-menu2 li {
position: relative;
margin:0 0;
}
.nav-menu2 > li {
float: left;
}
.nav-menu2 > li > a {
display: block;
height:48px;
line-height:48px;
color:#fafafc;
}
.nav-menu2 > li > a.active {
background:#c00;
}
.nav-menu2 > li:hover > a {
background:#c00;
}
.nav-menu2 li ul {
background:#fff;
display:block;
position:absolute;
left:0;
z-index:10;
visibility:hidden;
opacity:0;
-webkit-transition:all .25s ease-out;
-moz-transition:all .25s ease-out;
-ms-transition:all .25s ease-out;
-o-transition:all .25s ease-out;
transition:all .25s ease-out;
border: 1px solid #d9d9d9;
border: 1px solid rgba(217,217,217,1);
box-shadow:0 0 2px rgba(0,0,0,0.2);
}
.nav-menu2 li li ul {
left:100%;
top:-1px;
}
.nav-menu2 > li.hover > ul {
visibility:visible;
opacity:10;
}
.nav-menu2 > li > ul:before {
content:"";
width:0px;
height:0px;
position:absolute;
bottom:100%;
left:20px;
border-width:8px;
border-style:solid;
border-color:transparent transparent #fff transparent;
display:block;
}
.nav-menu2 li li.hover ul {
visibility:visible;
opacity:10;
}
.nav-menu2 li li a {
display: block;
color:#333;
position: relative;
z-index:100;
line-height:32px;
}
.nav-menu2 li li a:hover {
background:#f0f0f0;
}
/.nav-menu2 li li li a {
background:#fff;
z-index:20;
color:#333;
}
.nav-menu2 li .parent:after {
content: "\f107";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-left:6px;
}
#search-form {
background:$(menu.background.color);
float:right;
margin:0 0;
width:230px;
}
#search-form table {
width:100%;
margin:0 0 0 0;
}
#search-form td.search-box {
padding-right:30px;
}
#search-form input#search-box[type="text"] {
background:#fff;
height:36px;
line-height:36px;
margin:5px 0 5px 10px;
padding:0 10px;
width:99%;
color:#666;
border:none;
}
#search-form input#search-button[type="submit"] {
font-family: FontAwesome;
background:#c00;
color:#fff;
height:36px;
line-height:36px;
margin:5px 5px 5px 0;
padding:0 12px;
border:none;
outline:none;
transition:all 0.25s;
-moz-transition:all 0.25s;
-webkit-transition:all 0.25s;
}

#search-form input#search-button[type="submit"]:hover{
background:#222;
cursor:pointer;
}
#search-form input#search-box[type="text"]:focus {
background:#eee;
outline:none;
}

@media only screen and (max-width:768px){
.nav {
float:none;
width:100%;
max-width:100%
}
.active {
display: block;
}
#search-form {
width:100%;
margin:0 0 0 0 !important;
}
.nav li ul:before {
display:none;
}
.nav > li {
float: none;
overflow:hidden;
}
.nav ul {
display: block;
width: 100%;
float:none;
}
.nav-menu2 li ul {
background:#eee;
border:none;
box-shadow:none;
}
.nav-menu2 li li ul {
background:#f5f5f5;
}
.nav-menu2 li li a:hover {
background:#ddd;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
#search-form {
width:100%;
background:#444;
}
#search-form td.search-box {
padding:0 10px !important;
}
#search-form td.search-button {
padding:0 10px;
width:1%;
}
#search-form input#search-box[type="text"] {
margin:0 0 0 0;
}
#search-form input#search-button[type="submit"] {
margin:0 0 0 0;
}
}
</style>
<b:if cond='data:blog.isMobile'>
<style type='text/css'>
.mobile .navigation-menu {
float:none;
width:auto;
max-width:728px;
width:100%;
padding:0 0 0 0;
margin:0 0 0 0;
}
/* NAVIGASI */
.mobile #mobile-nav {
background:#117AC9;
font-size:13px;
font-weight:bold;
color:#fff;
text-align:center;
width:auto;
overflow:hidden;
margin:0;
padding:10px 6px;
}
.mobile #mobile-nav span a{
color:#fff;
padding:3px 0;
margin:0
}
.mobile #mobile-nav span a:hover{
text-decoration:underline;
}
</style>
</b:if>

Selanjutnya temukan kode </body> (gunakan Ctrl+F untuk mempermudah pencarian), setelah ketemu, copy paste kode JavaScript di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".toggleMenu").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()})
;$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".toggleMenu").css("display","inline-block");if(!$(".toggleMenu").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".toggleMenu").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}}
//]]></script>

Kemudian temukan kode </header> (gunakan Ctrl+F untuk mempermudah pencarian), setelah ketemu copy paste kode HTML di bawah ini tepat di bawah kode </header>

<nav id='nav'>
<a class='toggleMenu' href='#'><i class='fa fa-th-list'/> Menu</i></a>
<ul class='nav nav-menu2'>
<li><a class='active' href='#'><i class='fa fa-home'/></i></a></li>
<li><a href='#' title='About'>About</a>
<ul>
<li><a href='#' target='_blank' title='Contact Us'>Contact Us</a></li>
<li><a href='#' target='_blank' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='#' target='_blank' title='Disclaimer'>Disclaimer</a></li>
<li><a href='#' target='_blank' title='Terms Of Service'>Terms Of Service</a></li>
</ul>
</li>
<li><a href='#' title:'Menu1'>Menu1</a>
<ul>
<li><a href='#'>Sub Menu1</a>
<ul>
<li><a href='#' title='Sub Sub Menu1'>Sub Sub Menu1</a></li>
<li><a href='#' title='Sub Sub Menu1'>Sub Sub Menu1</a></li>
</ul></li>
<li><a href='#'>Sub Menu2</a>
<ul>
<li><a href='#' title='Sub Sub Menu2'>Sub Sub Menu2</a></li>
<li><a href='#' title='Sub Sub Menu2'>Sub Sub Menu2</a></li>
<li><a href='#' title='Sub Sub Menu2'>Sub Sub Menu2</a></li>
<li><a href='#' title='Sub Sub Menu2'>Sub Sub Menu2</a></li>
<li><a href='#' title='Sub Sub Menu2'>Sub Sub Menu2</a></li>
</ul></li>
<li><a href='#' title='Sub Menu3'>Sub Menu3</a></li>
<li><a href='#' title='Sub Menu4'>Sub Menu4</a></li>
</ul>
</li>
<li><a href='https://harmansh.blogspot.com/p/site.html' title='Sitemap'>Sitemap</a></li>
<li><a href='#' title:'Tools'>Tools</a>
<ul>
<li><a href='https://harmansh.blogspot.com/2018/06/pengertian-fungsi-dan-tag-dasar-html.html' target='_blank' title='Kamus HTML'>Kamus HTML</a></li>
<li><a href='https://harmansh.blogspot.com/2018/09/cara-memasang-tools-kode-warna-di-blog.html' target='_blank' title='HTML Color Code'>HTML Color Code</a></li>
<li><a href='http://www.blogcrowds.com/resources/parse_html.php' target='_blank' rel="nofollow" title='Parse Code HTML'>Parse Code HTML</a></li>
</ul></li>
<li><a href='#' title='Translate'>Translate</a></li>
</ul>
<form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search…' vinput=''/></td>
<td class='search-button'><input id='search-button' title='Search' type='submit' value=''/></td></tr></tbody></table></form>
</nav>

Catatn : Silahkan disesuaikan dengan keinginan mulai dari link dan nama yang akan tampil pada menu.

Terakhir, silahkan klik Simpan Tema atau Save Template.

Catatan : Untuk kode HTML, selain memasang kode tersebut ke dalam kode Template, anda juga bisa memasangnya menggunakan Tambahkan gadget melalui menu Tata Letak untuk memudahkan anda dalam hal menambahkan atau mengganti link pada kode HTML. Namun apabila tata letak template anda tidak memiliki kolom Tambahkan gadget di bawah header, silahkan baca artikel berjudul Menambah 1 Kolom Gadget dibawah Header sebagai panduannya.

Dengan memasang menu navigasi plus kotak pencarian responsive mobile friendly pada blog, maka akan membuat blog akan tampil sempurna dan profesional secara otomatis di semua ukuran layar perangkat ketika blog diakses.

Demikian tutorial sederhana mengenai bagaimana cara membuat menu navigasi plus kotak pencarian responsive. Semoga bermanfaat and " Happy Blogging "

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG

1 komentar:

Tanza Erlambang - Speed Up said...: terkadang artikel yang di-search tidak ketemu.
begitu caranya agar responsive.

nice article...useful; December 8, 2018 at 5:17 PM

HARMANSYAH BLOG

Membuat Menu Navigasi Plus Kotak Pencarian Responsive

Related Posts :

1 komentar:

Post a Comment

LABELS

POPULAR POST