Cara menambahkan search pada menu bar responsive di blog

Di kesempatan kali ini saya akan memberikan tutorial tentang Cara menambahkan search pada menu bar blog. Apabila blog anda search boxnya masih ada di luar menu bar menginginkan search boxnya berada di dalam menu bar, disini saya akan membahas tentang itu. Karena ada beberapa request juga untuk saya menuliskan tutorial tentang  Cara menambahkan search pada menu bar blog. 
Mengapa Search box harus di dalm menu bar ?
Biasanya search box secara default berada di header blog di sisi atas sebelah kanan, tetapi itu sangat menggangu apabila anda ingin mengikuti program adsense, karena penempatan iklan adsense ukuran terntu yang biasa di simpan di header tidak dapat di pasang di situ karena ada search box di bagian header. Karenanya itu akan mengurangi pendapatan anda di ads adsense. Oleh karena itu lebih baik search box idealnya berada di dalam menu bar, agar ada space untuk iklan adsense di header.
Nah, oleh karena itu saya di sini akan memberikan tutorial membuat search box berada di dalam menu bar. Ini dia langkah-langkahnya

 1. Cari <div class='container header'> apabila anda sudah menemukanya, nanti di sana anda akan
     melihat beberapa code HTML, copy kan code di bawah ini di bawah code HTML yang anda
     lihat disitu tepatnya di bawah </b:section>.

<div class='menu-wrap'>
    <button class='navbar-toggle' data-target='#menu-primary' data-toggle='collapse' type='button'>
        <i class='fa fa-bars'/>
        Menu
    </button>
    <div class='collapse navbar-collapse' id='menu-primary'>
        <b:section class='menu' id='menu' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML3' locked='true' title='Menu Utama' type='HTML'>
  <b:includable id='main'>
                <data:content/>

            </b:includable>
</b:widget>
</b:section>
    </div>
</div>

 2. Setelah anda selesai di langkah pertama, langsung anda lihat ke menu layout yang ada di dasboard
     blog anda, pasti anda melihat add gadget dibawah header. Nah, langkah pertama itu berfungsi
     untuk membuat fungsi add gadget, karena disini kita akan membuat menu bar dengan
     menggunakan fungsi add gadget. Karena apabila kita sedang review adsense 2, kita tidak perlu
     mengedit tempalte untuk mengganti atau menambahkan list menu untuk blog anda. Tidak
     mengganggu review adsense 2 bukan ?.
     Klik add gadget tersebut lalu copykan code ini di d dalamnya.

<ul class="list-inline navbar-nav container menu-primary">
<li class="current">
<a href="/">Home</a>
</li>
<li>
<a href="#">Dropdown</a>
<ul>
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a>
<ul>
<li><a href="#">Dropdown 3</a></li>
<li><a href="#">Dropdown 4</a></li>
<li><a href="#">Dropdown 5</a></li>
</ul>
</li>
<li><a href="#">Dropdown 4</a></li>
<li><a href="#">Dropdown 5</a></li>
</ul>
</li>
<li>
<a href="#">Menu 2</a>
</li>
<li>
<a href="#">Menu 3r</a>
</li>
<li>
<a href="#">Menu 4</a>
</li>
<li class="cari" class="btn">
<form action="/search" method="get">
<input id="s" name="q" placeholder="Search" type="text" />
<button type="submit"><span class="fa fa-search"></span></button>
</form>
</li>
</ul>

Yang di berikan tanda merah itu adalah code html untuk membuat search boxnya. Langkah selanjutnya yaitu kita akan memberikan code CSSnya kepada code HTML tersebut, agar responsive dan rapih. ini dia codenya.

/*CSS Menu bar Responsive*/

.menu-wrap {
    background-color: #4d4d4d;
}
#menu-primary, #menu, #menu-primary widget {
   position:relative;
}
ul.menu-primary li {
    padding:15px 0;
    position: relative;

}

ul.menu-primary li.cari {
    float:right;
    padding:4px 4px 4px;

}
ul.menu-primary li.cari form button {
    color:#fff;
    background-color: #F07241;
    font-size: 15px;
    -webkit-transition:all 0.7s ease-in-out;
    -moz-transition:all 0.7s ease-in-out;
    transition:all 0.7s ease-in-out;
}
ul.menu-primary li.cari form button:hover {
    color: #fff;
    background-color: #3B8686;
}

ul.menu-primary li.current, ul.menu-primary li a:hover {
    background-color: $(link.hover);
    text-decoration: none;
}

    ul.menu-primary li a{
        padding:17px 23px;
        color: #eee;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
    }
    ul.menu-primary li ul {
        visibility: hidden;
        position: absolute;
    }
    ul.menu-primary li:hover >ul {
        visibility: visible;
        top:50px;
        z-index: 999;
        min-width: 150px;
        background-color: #4d4d4d;
    }
    ul.menu-primary li:hover >ul li:hover ul {
        visibility: visible;
        left:100%;
        top:0;
        z-index: 9999;
        min-width: 150px;
        background-color: #4d4d4d;

    }
    ul.menu-primary li:hover >ul li{
        white-space: nowrap;
        padding: 0;
    }
    ul.menu-primary li:hover >ul li a{
        display: block;
        padding:15px 20px;
    }

@media (max-width: 767px) {
    ul.menu-primary {
        overflow: hidden;
    }
    ul.menu-primary li,ul.menu-primary li a {
        display: block;  
    }
    ul.menu-primary li {
        padding: 0;
        margin: 0;
    }
    ul.menu-primary li ul{
        height: 0;
        margin: 0;
        position: relative;
    }
    ul.menu-primary li:hover >ul, ul.menu-primary li:hover ul li:hover ul {
        height: auto;
        top: 0;
        left: 0;
        margin-left:20px;
        width: auto;
        z-index: 99999;
    }
}
.navbar-toggle{position:relative;width:100%;background-color:transparent;color:#eee;font-size:17px;line-height:1;text-align:left}@media (min-width: 768px){.navbar-toggle{display:none}}
.navbar-collapse{border-top:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);-webkit-overflow-scrolling:touch}
#menu-primary, #menu, #menu-primary widget {position:relative;}
.collapse{display:none}.collapse.in{display:block}
.navbar-collapse{border-top:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);-webkit-overflow-scrolling:touch}.navbar-collapse:before,.navbar-collapse:after{display:table;content:" "}.navbar-collapse:after{clear:both}.navbar-collapse.in{overflow-y:auto}@media (min-width: 768px){.navbar-collapse{width:auto;border-top:0;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}.navbar-collapse.in{overflow-y:visible}}
.list-inline{padding-left:0;list-style:none}
.list-inline > li{display:inline-block;padding-right:5px;padding-left:5px}
.navbar-nav{margin:7.5px -15px}.navbar-nav > li > a{padding-top:10px;padding-bottom:10px;line-height:20px}
.container{margin:0 auto}
.btn > .caret,.dropup > .btn > .caret{border-top-color:#000!important}

Itulah diatas CSS yang saya gunakan untuk menu bar di website saya yaitu
webtools-perbangga.blogspot.com anda bisa lihat hasil menu bar plus search box di dalamnya di blog itu. Sekian tutorial dari saya , apabila ada yang tidak mengerti bisa komentar di bawah.

Lihat DEMO

Cara menambahkan search pada menu bar responsive di blog Cara menambahkan search pada menu bar responsive di blog Reviewed by Abrizeni Duha Perbangga on 09:28 Rating: 5

11 comments:

  1. terima kasih min atas artikel ini ane berhasil nambahin search di blog ane thanks min

    ReplyDelete
  2. Ini beneran gan responsive? :3 ntr ane coba gk responsive lagi :3

    ReplyDelete
    Replies
    1. responsive gan, ane udah coba bikin di blog yang ane cantumin di atas

      Delete
  3. ada demonya gk gan?pingin ane coba :3

    ReplyDelete
    Replies
    1. demonya bisa di lihat di blog yang ane cantumin di atas tau klik di lihat demo gan :D. thnks for visit gan

      Delete
  4. Thank bro.. tempat ane udah responsive sekarang

    ReplyDelete

Powered by Blogger.