Cara Menghilangkan Tanda Silang Di Bawah Menu Drop-Down Halaman Blog Versi Mobile

Jika Anda menggunakan setelan template ‘Tersesuai (Custom)’ untuk tampilan halaman blog versi mobile, sementara itu dalam tampilan versi web terpasang widget kotak penelusuran yang dapat digunakan untuk melakukan pencarian secara cepat atas artikel yang Anda terbitkan, maka apabila blog yang dimaksud dibuka dengan menggunakan perangkat seluler secara otomatis di bawah menu drop-down atau di atas bidang posting akan ditampilkan pula tanda silang berwarna abu-abu.

Tanda silang tersebut sebenarnya merupakan tombol yang digunakan untuk membersihkan hasil pencarian yang secara otomatis akan ditampilkan setelah melakukan penelusuran artikel pada tampilan blog versi web dengan memakai kata kunci tertentu. Namun sayangnya dalam tampilan seluler (dengan setelan template ‘Tersesuai’) tanda silang tersebut tetap dimunculkan walau saat itu tidak melakukan penelusuran artikel sama sekali. Dan bahkan ketika halaman blog versi seluler baru saja dibuka, tanda silang yang dimaksud juga langsung ditampilkan seperti halnya tanda silang yang tampak pada gambar di atas.

Walau ukurannya kecil, akan tetapi dengan adanya tombol tersebut di bawah menu drop-down akan mengakibatkan ‘pemandangan’ tampilan halaman versi seluler menjadi sedikit terganggu dan terkesan kurang rapi. Sebenarnya apabila widget kotak penelusuran juga ditampilkan dalam halaman versi seluler dengan menggunakan teknik yang saya uraikan dalam artikel berjudul “Cara Menampilkan Widget Pada Blog Versi Mobile Atau Widget Tampilan Halaman Seluler”, maka tanda silang tersebut secara otomatis tidak dimunculkan lagi.

Lantas bagaimana caranya menghilangkan tanda silang tersebut dari halaman versi seluler, ketika kita hanya menampilkan widget kotak penelusuran pada tampilan versi web saja? Bisa jadi Anda akan berpikir bahwa tombol dengan tanda silang tersebut dapat dihilangkan dengan cara menambahkan atribut mobile=’no’ seperti teknik yang dipakai untuk menyembunyikan widget dari tampilan halaman versi mobile. Namun pada kenyataannya tidaklah demikian, karena yang mesti dilakukan adalah menambahkan kode CSS tertentu ke dalam template. Dimana untuk mengerjakannya maka Anda dapat melakukan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari kode ]]></b:skin> dan kemudian sisipkan kode berikut ini tepat di atasnya.

.mobile div.gsc-clear-button {
  display : none;
} 

Ketiga, simpan template

Dengan demikian maka tombol bertanda silang (clear button) tersebut tidak lagi dimunculkan dalam tampilan halaman versi mobile walau setelan template seluler yang digunakan adalah ‘Tersesuai (Custom)’. Dan akhirnya tampilan halaman blog versi seluler pun menjadi terkesan lebih rapi, karena tidak ada lagi tanda silang di atas bidang posting yang dapat mengganggu pemandangan pembaca saat membaca artikel.

Semoga berguna dan bermanfaat.

Salam.