Memindahkan Form Search Evo Magz ke Bagian Bawah Header

Terinpirasi dari halaman beranda mesin Pencari Google, dimana Google meletakan kotak telusurnya dibawah logonya,  dari situlah Saya ingin mulai mencoba menerapkan hal tersebut pada template Evo Magz. Sebelum Form Search Evo Magz ke Bagian Bawah Header ada beberapa hal yang perlu Anda lakukan

1. Memposisikan bagian header/logo blog ke tengah. Anda bisa lihat caranya pada artikel Cara Merubah Header Evo Jadi Ke Tengah Responsive Bag II
2. Menghilangkah form search pada navigasi/navbar evo. Untuk menghilangkannya Anda bisa membaca artikel
   Cara Menghilangkan Form Search Pada Template Evo Magz

Jadi nanti posisi header/logo blog jadi center kemudian dibawahnya nanti kita akan tempatkan  kotak telusur. Prosesnya sangat mudah sekali, dan apa yang akan dilakukan ini tentunya hasilnya juga akan responsif, mengingat poembuatnya Sugeng telah mengatur masalah resposif untuk bagian header dan kotak telusurnya, jadi disini kita hanya memindahkan, mengaturnnya berada pada posisi center

Berikut ini adalah langkah – langkah Memindahkan Form Search Evo Magz ke Bagian Bawah Header :

1. Copy script form search template Evo yang dihilangkan dari navbar 
2. Kemudian taruh script tersebut pada bagian berikut
   
   

   <!--Show the image only-->
         <div id='header-inner'>
           <b:if cond='data:blog.pageType != &quot;item&quot;'>
             <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
               <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
             </b:if>
           </b:if>
           <a expr:href='data:blog.homepageUrl' style='display: block'>
             <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
           </a>
       <!--Custom Search-->
   <form action='#' 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='Cari'/></td></tr></tbody></table></form>
           <!--Show the description-->
   

3. Script form searchnya ditaruh tepat pada bagian atas <!--Show the description-->
   
4. Selanjutnya supaya form searchnya tidak kecil serta berada ditengah  Anda bisa melebarkannya dan mengatur posisinya de ngan merubah properti pada CSS #search-form menjadi berikut
   
   #search-form {  
   float: left;
   margin: 0 33px 20px;
   height: 48px;
   width: 700px;
   } 
5. Bila berhasil kurang lebih nanti tampilannya seperti berikut
   

Untuk pada tampilan mobile Saya juga sudah mengeceknya, dan hasilnya lumayan namun tidak terlalu begitu sempurna, tapi mungkin untuk tampilan pada layar desktop Saya rasa sudah cukup. 

 Silahkan Anda berkreasi sendiri, selamat mencoba

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple