CARA MEMBUAT MENU PENCARIAN LAYAR PENUH BLOGGER

Semakin hari saya semakin panasaran dengan berbagai trik pembuatan templat blogger, wordpress, WIX dan Drupal. Akhir akhir ini rajin melihat situs situs paling efektif memperesentasikan niche blog mereka melalui tampilan template mereka. Di tanah air Viomagz buatan Mas Sugeng boleh dikatakan salah satu template paling banyak di gunakan. Sayangnya hampir lebih separohnya yang telah dipergunakan terindikasi sebagai bajakan alias gak berbeli.

design tools

Saya tertarik dengan form pencarian "layar penuh" yang digunakannya. Jujur saya tidak tahu bagaimana Mas Sugeng menempatkan elemennya di dalam templat viomagz baik CSS pemebentuknya maupun HTML penampilnya. Tetapi setelah saya mencoba editorial W3School saya menemukan trik yang menghasilkan tampilan yang mirip. Sebenarnya ini di terapkan oleh editblogtema namun telah di modifikasi sehingga tampilan "full scree" alias tampilan "layar penuh"nya lenyap. Perhatikan Contoh aktif yang saya terapkan melalui opsi penulisan HTML berikut:

×

Menu pencarian layar penuh

klik tombol kaca pembesar dibawah untuk membuka.





Klik tombol "🔍" diatas, Maaf tidak sebagus buatan Admin editblogtema, ini hanya sebagai contoh penerapannya saja yang mungkin berguna buat kalian nantinya jika ingin membuat elemen elemen penting template sendiri. Cara penerapannya adalah:

1. TAMBAHKAN CSS 

1. Masuk ke pengaturan blogger
2. Pilih Tema
3. Pada pengaturan template terbaru klik titik tiga ⋮
4. Akan muncul menu seperti pada gambar:
   
5. Klik atau pilih "Edit HTML" 
6. Pada halaman editor HTML yang telah terbuka cari kode penutup </head>  dan letakan kode CSS berikut tepat diatasnya:

<style>
body {
  font-family: Arial;
}
* {
  box-sizing: border-box;
}
.openBtn {
  background: #f1f1f1;
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
}
.openBtn:hover {
  background: #bbb;
}
.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}
.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}
.overlay .closebtn:hover {
  color: #ccc;
}
.overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 80%;
  background: white;
}
.overlay input[type=text]:hover {
  background: #f1f1f1;
}
.overlay button {
  float: left;
  width: 15%;
  padding: 15px;
  background: transparent;
  font-size: 17px;
  border: none;
  cursor: pointer;
}
.overlay button:hover {
  background: transparent;
}
</style>

2. TAMBAHKAN HTML:Masih di dalam pengaturan blogger, tepatnya masih di dalam halaman editor HTML cari kode </head> seperti diatas tadi, dan letakan kode HTML berikut tepat dibawahnya:

<div id="myOverlay" class="overlay">
  <span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
  <div class="overlay-content">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#ffffff" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg></button>
    </form>
  </div>
</div>
<button class="openBtn" onclick="openSearch()"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg></button>

3. TAMBAHKAN JAVASCRIPT;

Masih di dalam pengaturan blogger, tepatnya masih di dalam halaman editor HTML cari kode </body> seperti diatas tadi, dan letakan kode JS berikut tepat dibawahnya:

<script>
function openSearch() {
  document.getElementById("myOverlay").style.display = "block";
}
function closeSearch() {
  document.getElementById("myOverlay").style.display = "none";
}
</script>

Kemudian SAVE template.

Catatan: Tutorial ini tidak akan mengajarkan Kalian bagaimana server memproses input kotak pencarian diatas.  Memproses input dijelaskan dalam tutorial PHP yang akan saya tulis pada artikel berikutnya....

Salam, Anissa