CARA MEMBUAT MENU PENCARIAN DENGAN IKON KACA PEMBESAR PADA BLOG

dengan ikon kaca pembesar
tombol pencarian dengan ikon kaca pembesar
Menu pencarian melengkapi navbar atau navigasi menu sebuah template blog. Template template modern menggunakan ikon "kaca pembesar" atau ikon "magnifier" di ujung kanan navbar atau navigasi menu blog mereka. Ada sebuah model template seribu umat dengan menu pencarian LAYAR PENUH.

Ikon yang di jadikan tombol adalah :
X : tutup
Cobalah klik ikon tersebut!

Nah dari sini kalian akan dibawa untuk memahami bagaimana HTML bekerja. Perhatikan kode kode berikut di bawah ini:
1. CSS style di tandai dengan pembuka <style> dan ditutup dengan </style> di letakan di dalam template di atas tag penutup </head>
<style>body {font-family: Arial;}* {box-sizing: border-box;}.openBtn {background: #fff;border: none;padding: 10px 15px;font-size: 20px;cursor: pointer;}.openBtn:hover {background: #fff;}.overlay {height: 100%;width: 100%;display: none;position: fixed;z-index: 1;top: 0;left: 0;background-color: rgb(100, 149, 237);background-color: rgb(100, 149, 237);}.overlay-content {position: relative;top: 46%;width: 100%;text-align: center;margin-top: 30px;margin: auto;}.overlay .closebtn {position: absolute;top: 150px;left: 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: right;width: 100%;background: white;}.overlay input[type=text]:hover {background: #f1f1f1;}
.overlay button {float: right;width: 20%;padding: 15px;
background: #ddd;font-size: 17px;border: none;cursor: pointer;}
.overlay button:hover {background: #bbb;}</style>
2. HTML di dalam template di latekan di bawah kode </head> atau di bawah <body>
<div class="overlay" id="myOverlay"><span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span><div class="overlay-content"><form action="/action_page.php"><input name="search" placeholder="Search.." type="text" /></form></div></div><center>
<button class="openBtn" onclick="openSearch()"><svg style="height: 74px; width: 74px;" viewbox="0 0 24 24">
<path 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" fill="#000000">
</path></svg></button></center>
3. Javascript ciri cirinya di buka dengaqn <script> dan lalu akhirnya di tutup dengan </script> di dalam template blogger di letakan di atas tag penutup </body>
<script>function openSearch() {document.getElementById("myOverlay").style.display = "block";}
function closeSearch() {document.getElementById("myOverlay").style.display = "none";}</script>
Jadi perhatikan baik baik. Walaupun tidak selalu, penambahan elemen umumnya melibatkan 3 jenis kode kode berikut:
  1. CSS
  2. HTML
  3. Javascript
Walaupun dalam beberapa hal pembuatan elemen atau widget baru di dalam template bisa saja hanya melibatkan trik trik HTML-CSS tanpa Javascript, namun dalam beberapa hal belum bisa menandingi kompleksnya kemampuan Javascript dalam menghasilkan elemen elemen yang responsif dan atraktif pada desain web.

Baca: Cara melakukan pengeditan HTML blogger
Demikianlah cara membuat menu pencarian dengan ciri ciri:

  1. Tombol pencarian kaca pembesar
  2. Kolom pencarian full screem
Semoga bermanfaat.

Beri Komentar atau, Ajukan Pertanyaan

0 Comments