 |
| tombol pencarian dengan ikon kaca pembesar |
Ikon yang di jadikan tombol adalah :
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>
Demikianlah cara membuat menu pencarian dengan ciri ciri:
- Tombol pencarian kaca pembesar
- Kolom pencarian full screem
Dan hasil cara membuat menu pencarian ikon kaca pembesar pada blogger ini mirip sih dengan menu pencarian viomagz buatan Mas Sugeng. Namun saya tidak tiru dia ya...Saya mengeditnya melalui 'HOW TO' pelajaran koding HTML di w3school.
Semoga bermanfaat.