November 09, 2019

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
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

I am a student of Senior High School (SMA) I am living in Bandar Lampung, Selalu tertarik dengan HTML, sedang belajar Javascript, python dan C++

3 comments:

  1. mantap makasih mas..kapan2 mau saya praktekan di template baru saya

    ReplyDelete
  2. Saya baru ngeh, blog ini ada 3 adminnya ya? :D
    Makanya kontennya kece-kece :D

    Yang beginian kudu di bookmark aja dulu, soalnya kalau nggak langsung praktek ya nggak bakal ngerti :D

    Meskipun bahaya juga kalau nyimpan postingan kayak gini, soalnya jadi ketagihan utak atik hmtl hahahaha

    ReplyDelete
    Replies
    1. Benar he he he..tepi sebenarnya menulis alami saja menurut hobi lebih plong.

      Delete