EDITBLOGTEMA

Let dancing with:

Cara membuat menu pencarian ikon kaca pembesar pada blogger

AvatarOleh:
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>
Demikianlah cara membuat menu pencarian dengan ciri ciri:
  1. Tombol pencarian kaca pembesar
  2. 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.
Cara membuat menu pencarian ikon kaca pembesar pada blogger

Tidak ada komentar

Tinggalkan komentar:

kembali ke atas