CARA MEROMBAK TAMPILAN FORM MENU PENCARIAN TEMPLATE BLOGGER CONTEMPO

CARA MEROMBAK TAMPILAN FORM MENU PENCARIAN TEMPLATE BLOGGER CONTEMPO

menu bentuk kaca pembesar atau magnifier tampak modern dan menyenangkan
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

Beri Komentar ya...

2 Comments

  1. Sampai sekarang saya masih belum berani edit html begini. Takut salah terus malah bingung. Hahaha.

    ReplyDelete
    Replies
    1. Tidak perlu takutt salah kalau contempo banyakan yang diedit adalah CSSnya

      Delete

请给我们一个礼貌的评论与任何相关的主题
Just give us a polite comments with any related topics
Hanya komentar yang sopan dan berhubungan dengan topik