CARA MEMBUAT MENU PENCARIAN LAYAR PENUH

Sebenarnya membuatnya hanya membutuhkan tiga elemen: HTML, CSS dan JavaScript.

Sobat pernah lihat menu kaca pembesar pada template template premium? Bentuknya kaca pembesar dan jika di klik akan muncul kotak pencarian, contohnya Viomagz buatan Mas Sugeng, nah kita akan mencoba membuatnya dengan menerapkannya pada template bawaan blogger saja, namun kalau bisa dimodifikasi agar menjadi lebih responsive tema bawaan tersebut terlebih dahulu.
Perhatikan Contoh demo:








×



Menu Pencarian Layar Penuh

Klik ikon kaca pembesar dibawah ini, lalu klik ikon X diatas kanan layar untuk menutup.







Sudah lihat?
Kodenya telah saya modifikasi sebagai berikut agar mudah di terapkan:

<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<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: 20%;
    padding: 15px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
}

.overlay button:hover {

    background: #bbb;
}
</style>
</head>
<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" />
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>

<h2>
Menu Pencarian Layar penuh/h2&gt;
Klik Ikon menu pencarian kota pembesar.
<button class="openBtn" onclick="openSearch()"><i aria-hidden="true" class="fa fa-search"></i></button>

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

function closeSearch() {

    document.getElementById("myOverlay").style.display = "none";
}
</script>

</h2>
</body>
</html>

Keterangan:
1. Saya memanfaatkan kode fa fa search sebagai menu "onclick" perhatikan kode yang saya sorot merah itu adalah HTML.

2. Perhatikan kode yang saya sorot warna biru itu adalah CSS
3. Perhatikan kode yang saya sorot warna hijau itu adalah JS (JavaScript)

Anda tahu menempatkannya:
CSS selalu diatas atau sebelum kode ]]><b:skin> atau </style>
JS biasanya selalu ditempatkan sebelum atau diatas </body>
HTML biasanya diatas atau dibawah </header>

Kode kode dalam template default atau bawaan umumnya sama, kecuali jika sobat telah menggunakan template costum atau berbeli.
Perhatian! Ketidak rapian pada tombol penarian setelah klik ikon kaca pembesar terjadi karena kode css yang belum saya rapikan jadi mohon dimaklumi karena tutorial ini hanya untuk contoh. Jika sobat berminat saya akan catat dan simpan kode yang sudah jadi.


Comments

  1. asik juga kayanya kalau layar pencariannya penuh....semoga ngga sampe luber aja ya mang...hehe

    ijin follow yah

    ReplyDelete
  2. Kayaknya blog saya temanya begitu *garuk kening* 😁

    ReplyDelete

Post a Comment