Memindahkan Form Search Evo Magz Ke Bab 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 bab header/logo blog ke tengah. Anda dapat lihat caranya pada artikel Teknik Merubah Header Evo Makara Ke Tengah Responsive Bag II
2. Menghilangkah form search pada navigasi/navbar evo. Untuk menghilangkannya Anda dapat membaca artikel
   Teknik 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 praktis sekali, dan apa yang akan dilakukan ini tentunya kesannya juga akan responsif, mengingat poembuatnya Sugeng sudah mengatur duduk perkara resposif untuk bab header dan kotak telusurnya, jadi disini kita spesialuntuk memindahkan, mengaturnnya berada pada posisi center

Berikut ini yaitu 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 bab diberikut
   
   

   <!--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 bab atas <!--Show the description-->
   
4. Selanjutnya semoga form searchnya tidak kecil serta berada ditengah  Anda dapat melebarkannya dan mengatur posisinya de ngan merubah properti pada CSS #search-form menjadi diberikut
   
   #search-form {  
   float: left;
   margin: 0 33px 20px;
   height: 48px;
   width: 700px;
   } 
5. Bila berhasil kurang lebih nanti tampilannya menyerupai diberikut
   

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

 Silahkan Anda berkreasi sendiri, selamat mencoba

Share :