Cara Membuat PopUp Search Dan Fullscreen Di WordPress. Search atau pencarian merupakan salah satu fitur wordpress yang tak kalah penting dalam suatu website terlebih website yang memiliki banyak artikel seperti web berita. Fungsi dari search sendiri yaitu untuk mencari suatu artikel berdasarkan dengan kata atau kalimat yang diinput dalam opsi form search.
Dengan adanya fitur tersebut akan memudahkan pengunjung untuk mencari artikel yang mereka inginkan tanpa harus mengunjungi halaman satu persatu. Apalagi dengan ditambah tampilan yang unik dan menarik maka akan semakin memudahkan dan membuat pengunjung berlama-lama di situs website.
Dalam kesempatan kali ini kami tim teknologi.visitklaten.com akan berbagi cara Membuat Pop Up Search Dan Fullscreen Di WordPress. Silakan simak uraian berikut, apabila ada yang perlu ditanyakan silakan kirimkan di kolom yang telah disediakan.
Cara Membuat PopUp Search Dan Fullscreen
Pertama, silakan copy paste HTML berikut di tempat yang diinginkan semisal di header.php, single.php, dll. Code dibawah ini bisa Sobat edit lagi menyesuaikan dengan kebutuhan.
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">x</span>
<div class="overlay-content">
<form action="action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="openBtn py-sm-3 py-1 px-2 text-md-center text-right" onclick="openSearch()">
<i class="fa fa-search fa-lg"></i>
</div>
Kedua, tambahkan CSS berikut untuk mempercantik tampilan. Sobat juga bisa menambahkan atau mengurangi agar semakin terlihat profesional.
/* The overlay effect with black background */
.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); /* Black with a little bit see-through */
}
/* The content */
.overlay-content {
position: relative;
top: 46%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
/* Close button */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: white;
}
.overlay .closebtn:hover {
color: #ccc;
}
/* Style the search field */
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: none;
float: left;
width: 80%;
background: white;
}
.overlay input[type=text]:hover {
background: #f1f1f1;
}
/* Style the submit button */
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: #bbb;
}
Ketiga, tambahkan file java script berikut di custom.js atau tempat lainnya.
// Open the full screen search box
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
// Close the full screen search box
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
Keempat atau terakhir, jangan lupa jika belum terdapat font awesome silakan font tersebut. Caranya silakan copy paste file berikut di header.php sebelum tag body. Font tersbut berfungsi untuk tombol search.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Setelah semua sudah ditambahkan silakan cek di browser. Untuk contohnya bisa dilihat dibawah ini
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan dan saran silakan hubungi kami atau silakan isi di kolom komentar/review.
Komentar