CARA MEROMBAK TAMPILAN FORM MENU PENCARIAN TEMPLATE BLOGGER CONTEMPO

Pada posingan sebelumnya kita telah belajar bagaimana caranya mengatur, merobah dan memindahkan menu pencarian "magnifier" bawaan Template contempo blogger  pada posisi yang kita inginkan, bahkan meletakannya pada posisi yang berbeda beda pada tampilan desktop dan mobile pada bagian Menu Navigasi hasil buatan kita sendiri.

Baca: MEMANFAATKAN TOMBOL BAWAAN TEMA CONTEMPO

Ya ketimbang menambahkan widget baru mendingan memanfaatkan yang sudah ada, apalagi tombol pencarian Contempo bentuknya sudah modern sekali.

Sekarang kita tinggal merombak form menu atau kotak dialog menu pencariannya dimana kita biasanya mengetikan kata kunci pencarian. Contoh gambar dibawah ini adalah saat menu kaca pembesar di pencet atau disentuh, muncul kotak dialog diatas menu navigasinya, walaupun menutup judul tapi kan hanya buat sementara:

contoh form menu kotak pencarian templat editblogtema.net

Cara menerapkannya, pada pengaturan blog langsung pilih opsi edit HTML, cari kode bawaan yang sudah terdapat pada template contempo ini:
Seluruh kodenya sebenarnya tampak sebagai berikut:

.search.focused form {
background: #C0C0C0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 1px;
      -ms-flex: 1 0 1px;
          flex: 1 0 1px;
  border-color: $(blog.title.color);

Hapus saja saja kode warna HEX (walaupun kodenya beda, sobat hanya perlu mencari kode: .search.focused form { dan memasukannya ke kotak pencarian diatas halaman edit HTML pada dasbor blogger   dan terdapat beberapa kode yang sama, perhatikan kdoe dibawanya, kalau sudah sama langsung di edit saja) yang saya sorot warna merah dan ganti dengan: -webkit-linear-gradient(right,#fff 0%,#B0C4DE 75%);

Dan lalu cari kode berikut:

.search-input input {
  background:transparent;
  border: 0;
  box-sizing: border-box;
  color: $(blog.title.color);
  display: inline-block;
  outline: none;
  width: calc(100% - 90px);
}

Sobat hanya perlu memasukan kode .search-input input { kedalam kotak pencarian diatas halaman pengeditan HTML, terdapat beberapa kode CSS yang sama namun perhatikan bagian bawahnya kalau sudah mirip langsung saja di edit. Jika tidak terdapat "transparent;" setelah background atau disana malah terdapat kode HEX atau kode warna RGB lainnya segera ganti saja dengan transparent; ingat titik-koma jangan tertinggal ya..

Save tema, dan lihat DEMO