MENGATUR POSISI TOMBOL PENCARIAN PADA TEMPLATE BLOGGER CONTEMPO

MANFAATKAN TOMBOL PENCARIAN BAWAAN CONTEMPO

Tombol atau menu pencarian atau "Search Menu" pada tema contempo itu sayang sekali dibuang karena tampilannya  yang modern yakni dalam bentuk  kaca pembesar.

Sobat harus tahu dari hasil polling di Google Help Forum hampir 93% websider "mendambakan" tombol menu pencarian jenis ini. Mereka menyebutnya "magnifier search" ada yang menyebutnya tombol pencarian tersembuyi. Ikonnya ya kaca pembesar seperti ini:

Tapi sayang tataletaknya yang default 85% tidak sesuai dengan selera pengguna tempate premium Jadi mari kita robah tampilannya:

1. UNTUK TAMPILAN DESKTOP/LAPTOP/LAYAR BESAR

Bersyukurlah karena contempo itu adalah CSS! Jadi perosalannya menjadi lebih sederhana. CSS hanya meng-interface tampilan, lay out internal dan eksternal contempo. Dan 90% CSS pada contempo amat mudah di modifikasi.
Masuk ke dasbor atau pengaturan blogger sobat>pilih tema>pilih opsi edit HTML
Cari kode dibawah ini masukan saja kode yang saya sorot warna merah (ada beberapa kode yang sama, enter saja beberapa kali sampai ketemu) kedalam kotak pencarian di halaman HTML blogger sobat dengan cara menekan CTRL+F untuk menampilkan menu pencarian tersebut:

.search .flat-icon-button.ripple {
box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
   right: 90px;
    top: 100px;
    position: absolute;
    background: white;
}

Perhatiakan  kode right: 90px; biarkan saja nilai tersebut karena jika sobat ganti misalnya menjadi 10px ikon menu pencarian akan bergeser ke tepi kanan dan kemungkinan hilang sebagian, jika diganti menjadi 300px, ikon kaca pembesar tersebut akan pindah ke kiri menubar.

Yang perlu sobat ganti adalah kode: top: 100px; karena sebelumnya saya telah merobah header blog lab saya maka saya mengganti nilai tersebut menjadi 25px; sobat dapat mengejasnya disesuaikan dengan kondisi hasi editorial template sobat sendiri. Hasilnya adalah sebagai berikut:

Tampilan desktop sebelum (atas) dan sesudah (bawah)

2. UNTUK TAMPILAN MOBILE/HAPE/LAYAR KECIL
Masuk ke dasbor atau pengaturan blogger sobat>pilih tema>pilih opsi edit HTML
Cari kode dibawah ini masukan saja kode yang saya sorot warna merah (ada beberapa kode yang sama, enter saja beberapa kali sampai ketemu) kedalam kotak pencarian di halaman HTML blogger sobat dengan cara menekan CTRL+F untuk menampilkan menu pencarian tersebut:

.search .flat-icon-button.ripple {
    right: 20px;
    top: 70px;
}

Sobat tidak perlu mengganti angka 20px untuk tetap membiarkan ikon pencarian tetap berada disebelah kanan. Namun jika sobat ingin memindahkannya kesebelah kiri cukup ganti right: 20px; menjadi right: 195px;

Akan tetapi agar posisi ikon pencarian kaca pembesar tersebut berada didalam menu bar pada tampilan mobile atau hape saya merobah nilainya dari top: 70px; menjadi top: 21px; dan perubahannya seperti pada gambar dibawah ini:

Tampilan menu pencarian mobile sebelum (kiri) dan sedudah (kanan)

Tambahan: Mobile sidebar
Jika sobat ingin tampilan sidebar (yang di dalamnya ada popular post, profile, dan widget/gagdet lain yang sobat ingin pasang tampilannya menjadi kecil atau lebar cari kode dibawah ini:

aside.sidebar-container.container.sidebar-invisible {
    float: left;
position: static;
max-width: 80%;
width: 80%;
}

 Jika ingin mengembalikan tampilan menjadi normal kembali robah nilai prosentasi menjadi seperti ini:

aside.sidebar-container.container.sidebar-invisible {
    float: left;
position: static;
max-width: 95%;
width: 100%;
}

SAVE template

Trik ini berjalan dengan sangat baik pada contempo. Saya juga memberikan tips:

1. Sebelum pengeditan dilakukan sebaiknya rombak total heading contempo agar menjadi lebih dinamis, caranya sudah saya tulis di dalam blog ini
2. Cara diatas dapat sobat lakukan apabila menu navigasi dibuat berdasarkan laman atau page list, menu bar akan tetap sangat responsive.
3. Cara diatas juga tetap dapat diterapkan dengan sangat bagus sekalipun sobat telah merombak habis header dan menambahkan menu navigasi custom buatan saya yang sudah saya postingkan dalam bentuk artikel di blog ini, (saya sarankan untuk sementara pakai saja menu bar atau menu navigasi buatan saya karena beberapa menu cuctom tidak sesuai dengan struktur contempo)
4. Sobat tidak perlu kuatir salah pada saat mengedit melalui laptop (saya hanya menggunakan tablet), buka halaman browser chrome menjadi multi jendela satu jendela untuk membuka dasbor dan melakukan pengeditan HTML,  sementara jendela lain untuk melihat hasilnya dengan me-refresh  halaman setelah hasil editan yang telah di save, ketika terjadi kesalahan sobat dengan mudah kembali ke opsi pengeditan pada jendela lain yang telah terbuka tadi.
5. Selamat mencoba menjadi desainer template!