Cara Membuat Menu Header Plus Tombol Search Responsive

Menu Header merupakan sebuah Tab Menu yang berisi sebuah petunjuk arahan untuk pengunjung mencari kategori dari situs, yang berisi sebuah link tujuan sesuai dengan nama menu yang tercantum. Menu Header ini wajib ada dalam sebuah blog anda, karena menu ini berguna untuk memudahkan pengunjung dalam mencari kategori sebuah artikel. Menu Header ini sendiri biasanya berada pada bagian Header atau dibawah Menu Navigasi. Menu Header ini sangat perlu diterapkan di blog anda, karena memudahkan pengunjung dalam surfing semua isi blog anda. Menu Header yang saya berikan kali ini sangat responsive, karena menu ini akan menyesuaikan pada perangkat anda. Selain responsive, menu ini juga dibekali plus dengan tombol search. Dimana tombol search ini berguna untuk mencari artikel anda. Ok, cukup sampai disini deskripsinya selanjutnya langsung ke proses pembuatan.

Cara Pertama : 

1. Buka Blogger - Kemudian login

2. Dashboard - Template

3. Edit HTML

Proses Pembuatan : 

1. Temukan kode ]]></b:skin> atau </style>

2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>

/* HEADER MENU */
.menu-header {
    display:none;
    padding:0 15px;
 height:48px;
 line-height:48px;
    color: #fff !important;
 border-radius:$(curvature.border.radius);
}
.menu-dropdowns {
 font-family:sans-serif;
 background:#374760;
 font-weight:bold;
 text-transform:uppercase;
 height:60px;
 line-height:50px;
 border-radius:4px;
 padding:2px;
}
.nav-menu2 {
 padding:5px;
 background:#374760;
    list-style: none;
 margin:0 0 0 0;
    *zoom: 1;
 float:left;
 border-radius:$(curvature.border.radius);
}
.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:auto;
    white-space:nowrap;
 border-radius:$(curvature.border.radius);
}
.nav-menu2 a {
 display:block;
    padding:0 15px;
 border-radius:$(curvature.border.radius);
}
.nav-menu2 li {
    position: relative;
 margin:0 0;
 border-radius:$(curvature.border.radius);
}
.nav-menu2 > li {
    float: left;
 margin:2px;
}
.nav-menu2 > li > a {
 color:#fff;
    display: block;
 height:48px;
 line-height:48px;
 color:$(menu.navigation.text.color);
 box-shadow: 0 4px 0 #374760 inset;
}
.nav-menu2 > li > a.active {
 background:#374760;
 box-shadow: 0 4px 0 #374760 inset;
}
.nav-menu2 > li:hover > a {
 background:#36a7f2;
 box-shadow: 0 4px 0 #374760 inset;
 border-radius:4px;
}
.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;
 box-shadow:0 0 4px rgba(0,0,0,0.3);
}
.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 {
 margin-left:-45px;
    display: block;
 color:#333;
    position: relative;
    z-index:100;
 line-height:32px;
}
.nav-menu2 li li a:hover {
 background:#374760;
}
.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 */
#search-form {
 background:#374760;
 float:right;
 margin:0 0;
 width:220px;
 border-radius:$(curvature.border.radius);
}
#search-form table {
 width:100%;
 margin:0 0 0 0;
}
#search-form td.search-box {
 padding-right:30px;
 background:#374760;
 border-radius:4px;
}
#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:#000);
 border:none;
 text-transform: uppercase;
 border-radius:4px;
}
#search-form input#search-button[type="submit"] {
 font-family: FontAwesome;
 background:#fff;
 color:$(button.color);
 height:36px;
 line-height:36px;
 margin:5px 10px 5px 0;
 padding:0 12px;
 border:none;
 outline:none;
 transition:all 0.25s;
 -moz-transition:all 0.25s;
 -webkit-transition:all 0.25s;
 border-radius:4px;
}
#search-form input#search-button[type="submit"]:hover{
 cursor:pointer;
}
#search-form input#search-box[type="text"]:focus {
 background:#eee;
 outline:none;
}

/* MEDIA QUERY */
@media only screen and (max-width:1066px){
 #wrapper {
  margin:0 auto;
 }
}
@media only screen and (max-width:768px){
 #wrapper {
  padding:12px;
 }
 #post-wrapper, #sidebar-wrapper, .nav {
  float:none;
  width:100%;
  max-width:100%
 }
    .active {
        display: block;
    }
 #search-form {
  width:100%;
  margin:10px 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 ul {
  white-space:normal !important;
 }
 .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:$(menu.background.color);
 }
 #search-form td.search-box {
  padding:0 10px !important;
 }
 #search-form td.search-button {
  background:#374760;
  padding:0 10px;
  width:1%;
  border-radius:4px;
 }
 #search-form input#search-box[type="text"] {
  margin:0 0 0 0;
 }
 #search-form input#search-button[type="submit"] {
  margin:0 0 0 0;
 }
 .img-thumbnail {
  margin:3px 10px 3px 0;
 }
 .sidebar-container, .post-container {
  padding:15px 0 0px;
 }
}

3. Temukan kode <header> atau <div class='header-wrapper'> atau <div class='outer-wrapper'>
4. Copy & Paste kode berikut ini dan letakkan diatas kode salah satu kode diatas.

  <!-- menu header start-->
  <nav class='menu-dropdowns'>
  <a class='menu-header' href='#'><i class='fa fa-th-list'/> MENU </a>
  
 <!-- secondary navigation menu start -->
 <ul class='nav nav-menu2'>
  <li><a class='active' href='/'><i class='fa fa-home'/> Home</a></li>
  <li><a href='#'><i class='fa fa-wrench'/> Menu</a><i/>
   <ul>
     <li><a href='####'>Menu 1</a></li>
              <li><a href='####'>Menu 2</a></li>
     <li><a href='####'>Menu 3</a></li>
              <li><a href='####'>Menu 4</a></li>
              <li><a href='####'>Menu 5</a></li>
              <li><a href='####'>Menu 6</a></li>
              <li><a href='####'>Menu 7</a></li>
            </ul>
  </li>
  <li><a href='####'><i class='fa fa-pencil'/> Menu 2</a><i/>
   <ul>
              <li><a href='####'>Menu 1</a></li>
     <li><a href='####'>Menu 2</a></li>
     <li><a href='####'>Menu 3</a></li>
              <li><a href='####'>Menu 4</a></li>
            </ul>
  </li>
            <li><a href='####'>Menu 3</a></li>
            <li><a href='####'>Menu 4</a></li>
   <li><a href='####'>Menu 5</a></li>
   <li><a href='####'>Menu 6</a></li>
   
 </ul>
 <!-- secondary navigation menu end -->
 
 <form action='/search' id='search-form' method='get'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...' vinput=''/></td> <td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
 
  </nav>
  
 
  <div class='clear'/>
  <!-- menu header end --

5. Terakhir, temukan kode </body>
6. Copy & Paste kode berikut ini, dan letakkan diatas 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")}});$(".menu-header").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){$(".menu-header").css("display","inline-block");if(!$(".menu-header").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){$(".menu-header").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>

7. Simpan Template!


Demikian Tutorial Blogger kali ini, bila terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat homepage anda, menu tersebut udah muncul atau belum. . Sekian dari saya, Semoga Bermanfaat! Thanks for Reading : Cara Membuat Menu Header Plus Tombol Search Responsive

Incomming Search:

Cara Membuat Menu Header, Cara Membuat Menu, Cara Membuat Header Menu, Cara Membuat Top Menu Navigasi, Cara Membuat Menu Header Responsive, Cara Membuat Menu Navigasi, Cara Membuat Menu Navigasi Header, Cara Membuat Menu Responsive

Share this post

Related Post