Cara Menciptakan Hidangan Header Plus Tombol Search Responsive

Baca Juga

Menu Header merupakan sebuah Tab Menu yang berisi sebuah petunjuk aba-aba untuk pengunjung mencari kategori dari situs, yang berisi sebuah link tujuan sesuai dengan nama hidangan yang tercantum. Menu Header ini wajib ada dalam sebuah blog anda, alasannya hidangan ini mempunyai kegunaan 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, alasannya memudahkan pengunjung dalam surfing semua isi blog anda. Menu Header yang aku berikan kali ini sangat responsive, alasannya hidangan ini akan menyesuaikan pada perangkat anda. Selain responsive, hidangan ini juga dibekali plus dengan tombol search. Dimana tombol search ini mempunyai kegunaan untuk mencari artikel anda. Ok, cukup hingga disini deskripsinya selanjutnya eksklusif 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.

  <!-- hidangan header start-->   <nav class='menu-dropdowns'>   <a class='menu-header' href='#'><i class='fa fa-th-list'/> MENU </a>     <!-- secondary navigation hidangan 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 hidangan 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'/>   <!-- hidangan 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, jikalau terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat homepage anda, hidangan 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