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-->
    memindahkan kolom pencarian evo magz
  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
    tampilan kotak telusur yang sudah dipindahkan

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

8 Responses to "Memindahkan Form Search Evo Magz ke Bagian Bawah Header"

  1. gk ada yg sempurna di dunia ini mas bro :D

    ReplyDelete
  2. Sebelumnya saya belum pernah kang mencoba yang satu ini karena belum terlalu mengerti sih, tapi kalau sekarang mah alhamdulillah sudah ada penerangan walaupun gak bisa langsung coba.

    ReplyDelete
  3. tak simpen dulu ya mas tutorialnya, dulu saya pernah pake template ini, cuma sekarang sudah ganti....

    ReplyDelete
    Replies
    1. simpen di mana kang? awas salah tempat terus lupa deh

      Delete
  4. klo ingin menghapus form search nya mas, tinggal di hapus aja kodenya yah??

    ReplyDelete
  5. lari ke tkp ke halaman sebelumnya, makasih tutorialnya mas

    ReplyDelete
  6. saya gak punya templatenya kang, jadi gak bisa praktek nih, tapi bagus juga ya kalau di taruh di bawah kotak pencariannya

    ReplyDelete
  7. nah jadi sebelum kita menggeser Form Search Evo Magz kita kudu meneghakan terlebih dulu judulnya terlebih dulu ya mang....akan segera tak praktekin ilmunya mang....kalau inget tapi

    ReplyDelete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...