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


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

Post a Comment

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan

Popular Minggu ini:

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

AUTODIDACT, WHY YOU FAIL TO PERFORM IT

INI DIA UKURAN GAMBAR TERBARU YANG IDEAL UNTUK KONTEN BLOG AMP