Membuat Hidangan Navigasi Plus Kotak Pencarian Responsive

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

Apa itu Menu Navigasi Plus Kotak Pencarian Responsive?
Menu Navigasi Plus Kotak Pencarian Responsive (Mobile Friendly) yakni sebuah akomodasi yang diberikan oleh pemilik situs, dimana didalamnya berisi sekumpulan link-link penting yang mengarah ke halaman tertentu dan sebuah kotak pencarian yang dipakai untuk mencari artikel dengan sebuah kata kunci serta mempunyai tampilan yang sanggup menyesuaikan segala jenis tampilan secara otomatis dengan baik jikalau di saluran melalui banyak sekali macam perangkat atau biasa disebut mobile friendly.

Baca juga : Membuat Blog Menjadi Responsive Mobile Friendly

Menu navigasi ini berbeda dengan sajian navigasi yang pernah aku share sebelumnya pada artikel berjudul

Perbedaannya terletak pada bentuk tampilan sajian navigasi. Menu navigasi sebelumnya apabila blog yang menggunakannya diakses melalui perangkat dengan ukuran layar yang lebih kecil menyerupai seluler atau handphone, tampilannya akan tampil amburadul tidak tersusun rapi. Sedangkan sajian navigasi plus kotak pencarian responsive mobile friendly yang akan aku share kali ini, tampilannya akan tersusun berbeda dan rapi alasannya secara otomatis menyesuaikan ukuran layar saat blog diakses melalui perangkat yang berbeda dan mempunyai ukuran layar yang lebih kecil.

Oleh alasannya itu, pengunjung yang mengakses blog melalui perangkat seluler atau mobile, tampilan sajian navigasi website atau blog akan terlihat tepat dan profesional serta memudahkan para pengunjung menentukan halaman tertentu di dalam sebuah blog dalam hal navigasi.

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

Cara Membuat Menu Navigasi Plus Kotak Pencarian Responsive Mobile Friendly Membuat Menu Navigasi Plus Kotak Pencarian Responsive

Tampilan Dekstop

Tampilan Seluler/Mobile

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

Pertama-tama pastikan template blog anda sudah terdapat instruksi di bawah ini. Kode di bawah ini berfungsi untuk menampilkan instruksi HTML simbol-simbol gambar (font awesome), alasannya di dalam sajian navigasi yang akan kita buat terdapat simbol gambar beling pembesar yang terletak pada tombol kotak pencarian dan gambar rumah pada home. Jika belum, silahkan copy paste instruksi di bawah ini tepat di atas instruksi </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 instruksi CSS di bawah ini tepat di atas instruksi </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 instruksi </body> (gunakan Ctrl+F untuk mempermudah pencarian), sehabis ketemu, copy paste instruksi JavaScript di bawah ini tepat di atas instruksi </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 instruksi </header> (gunakan Ctrl+F untuk mempermudah pencarian), sehabis ketemu copy paste instruksi HTML di bawah ini tepat di bawah instruksi </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://bloglandai.blogspot.comp/site.html' title='Sitemap'>Sitemap</a></li>
<li><a href='#' title:'Tools'>Tools</a>
<ul>
<li><a href='https://bloglandai.blogspot.com/search?q=membuat-blog-menjadi-responsive-mobile.html' target='_blank' title='Kamus HTML'>Kamus HTML</a></li>
<li><a href='https://bloglandai.blogspot.com/search?q=membuat-blog-menjadi-responsive-mobile' 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 diubahsuaikan dengan impian mulai dari link dan nama yang akan tampil pada menu.

Terakhir, silahkan klik Simpan Tema atau Save Template.

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

Dengan memasang sajian navigasi plus kotak pencarian responsive mobile friendly pada blog, maka akan menciptakan blog akan tampil tepat dan profesional secara otomatis di semua ukuran layar perangkat saat blog diakses.

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

Sumber https://harmansh.blogspot.com/

Landai

Membuat Hidangan Navigasi Plus Kotak Pencarian Responsive

Menu Halaman Statis