Cara Membuat Menu Navigasi beserta Kotak Pencarian Keren di Blog | AA Sciences

Postingan Terbaru

› › › ›

Cara Membuat Menu Navigasi beserta Kotak Pencarian Keren di Blog

By 11/09/2016 Add Comment
Cara Membuat Menu Navigasi beserta Kotak Pencarian Keren di Blog ~ Halo sobat Blogger kembali lagi dengan saya ya Aldi Andreansyah selaku Admin selaku Penulis yang alhamdulilah selalu membagi kan Ilmu pengalaman nih alhamdulilah kali ini mengenai blogger yang berjudul Cara Membuat Menu Navigasi beserta Kotak Pencarian Keren di Blog.

Baca Artikel Terkait : Cara Membuat Menu Navigasi beserta Sosial Media Responsive Melayang.

Membuat Menu Navigasi adalah salah satu cara untuk mempercantik tampilan sebuah web / blog , dengan ada nya Menu Navigasi maka pengunjung / pembaca pun lebih mudah melakukan metode penjelajahan di web ( blog ) kita sendiri dengan ada nya tampilan menu navigasi tersebut .

Biasa nya menu navigasi memiliki salah satu kategori / label untuk mencantumkan beberapa postingan postingan artikel kita di mana kala kita di anjurkan memasuk kan postingan artikel tersebut kedalam kategori(label) yang membuat para pengunjung pun lebih mudah melakukan interaksi dari kategori kategori artikel tersebut . Jika Menu Navigasi sudah terbilang cara salah satu mempercantik dan mempermudah para pengunjung mengakses web ( blog ) kita sendiri sebaiknya menu navigasi pun di tambah kan lagi untuk menambahkan kolom pencarian atau biasa yang disebut search box , memasang kolom pencarian atau search box ini adalah termasuk pula cara membuat para pengunjung lebih mudah mengakses suatu blog atau web anda , mengapa ? Karena sesuai pada seperti biasa nya kolom search box pun digunakan sebagai untuk memasuk kan kata dari isi web atau blog tersebut ,

maka itu yang membuat kita lebih mudah mengakses web dengan cara cukup mencari kata pada blog tersebut melainkan tidak harus mengklik klik nya terlebih dahulu, banyak yang bisa di katakan membuat tangan pegel hehe.

Mungkin cukup sekian saja mengenai arti dari menu navigasi beserta kotak pencarian yang saya ketahui , oke kita langsung saja simak ya cara membuat menu navigasi nya beserta kotak pencarian simak langkah langkah nya di bawah ini, cekidot :

Langkah Pertama :
seperti biasa nya Log-in lah terlebih dahulu ke akun Google / Blogger jika sudah Log-in langsung saja menuju Template -> Edit HTML -> CTRL+F lalu cari script <body> atau </head> 
Langkah Kedua :
jika sudah ditemukan langsung saja Copy Paste script Kode HTML menu navigasi nya beserta kotak pencarian tepat di bawah <body> atau </head> atau </header> atau juga kode sejenis lain nya :
 <nav class='dropdowns'>
  <a class='toggleMenu' 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='#'>Menu 1</a>
   <ul>
   <li><a href='#'>SubMenu 1</a></li>
   <li><a href='#'>SubMenu 2</a></li>
   <li><a href='#'>SubMenu 3</a></li>
   </ul>
  </li>
  <li><a href='#'>Menu 2</a>
   <ul>
   <li><a href='#'>SubMenu 1</a></li>
   <li><a href='#'>SubMenu 2</a></li>
   <li><a href='#'>SubMenu 3</a></li>
   </ul>
  </li>
  <li><a href='#'>Menu 3</a></li>
  <li><a href='#'>Menu 4</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>
  
  </b:if>
  
  <div class='clear'/>
  <!-- secondary navigation menu end -->

Langkah ketiga : 
Jangan lupa isikan tampilan CSS nya agar blog kalian tertata rapih dan bagus sesuai keinginan , langsung saja sobat seperti biasa CTRL+F lalu cari b:skin atau <style> lalu letakkan kode Script CSS ini tepat di dalam kode tersebut :
/* NAVIGATION MENU 2 edited by aldiandreansyah.blogspot.com*/
.toggleMenu {
    display:none;
    background:$(menu.navigation.border.color);
    padding:0 15px;
 height:48px;
 line-height:48px;
    color: #fff !important;
}
.dropdowns {
 font:$(menu.font);
 background:$(menu.background.color);
 text-transform:uppercase;
 height:48px;
 line-height:48px;
}
.nav-menu2 {
 background:$(menu.background.color);
    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:auto;
    white-space:nowrap;
}
.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:$(menu.navigation.text.color);
 box-shadow: 0 4px 0 $(menu.background.color) inset;
}
.nav-menu2 > li > a.active {
 background:$(menu.navigation.hover.color);
 box-shadow: 0 4px 0 $(menu.navigation.border.color) inset;
}
.nav-menu2 > li:hover > a {
 background:$(menu.navigation.hover.color);
 box-shadow: 0 4px 0 $(menu.navigation.border.color) inset;
}
.nav-menu2 li ul {
 background:#fafafa;
 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 {
    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;
 height:48px;
 width:200px;
}
#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:$(input.background.color);
 height:36px;
 line-height:36px;
 margin:5px 0 5px 10px;
 padding:0 10px;
 width:99%;
 color:$(input.color);
 border:none;
}
#search-form input#search-button[type="submit"] {
 font-family: FontAwesome;
 background:$(button.background.color);
 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;
}
#search-form input#search-button[type="submit"]:hover{
 background:$(menu.navigation.hover.color);
 cursor:pointer;
}
#search-form input#search-box[type="text"]:focus {
 background:#eee;
 outline:none;
}

Setidaknya cukup sampai sini pun menu navigasi dan kotak pencarian kali pun sudah terpasang di blog sobat . Jika Ingin membuat tampilan menu navigasi dan kotak pencarian tampil secara responsive ( dalam berbagai versi mobile atau seluler ) sebaiknya kalian melanjutkan cara selanjutnya di bawah cekidot :

Langkah Pertama :
Isikan lagi kode Script CSS di bawah tepat di dalam b:skin atau <style> yang membuat tampilan responsive : 
 /* 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: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;
 }

Langkah Kedua :
Masih berada di template lalu cari kode script </body> dan isi kode script Jquery di bawah ini tepat diatas nya ,tujuan nya agar tampilan menu dropdown nya terlihat sempurna jika di klik : 
  <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>
Langkah ketiga :
Oh iya saya hampir lupa sebelum nya menu navigasi beserta kotak pencarian ini memakai file javascript yaitu font awesome yang bisa di katakan agar icon fit awesome yang ingin di tambah kan tersebut tampil secara sempurna , langsung saja letak kan file javascript nya tepat di atas </head> atau sejenis nya di atas kode tersebut : 
 <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Langkah Terakhir :
Silahkan sobat langsung saja simpan/save template tersebut.
Catatan : Jika Tidak Bekerja silahkan cantumkan saja komentar kalian di kolom yang sudah di sediakan di bawah ya kawan.

Mungkin cukup sekian dari artikel mengenai blogger yang berjudul Cara Membuat Menu Navigasi beserta Kotak Pencarian Keren di Blog,saya harapkan semoga bermanfaat dan bekerja 100% selalu , Amin

0 Response to "Cara Membuat Menu Navigasi beserta Kotak Pencarian Keren di Blog"

Post a Comment


~ Jika ingin men Copy Paste harap masuk kan sumber link artikel saya di postingan sobat
~Dilarang Berkomentar link aktif , jika ada yang memasuk kan link aktif maka kami akan Hapus dan kami anggap Spam
~ Komentar lah dengan Bahasa yang Baik dan Relevan dengan sesuai artikel terkait tersebut . Terimakasih

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Loading...

Iklan Tengah Artikel 2

Iklan Bawah Artikel