 |
| ikon menu pencarian |
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>
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.
asik juga kayanya kalau layar pencariannya penuh....semoga ngga sampe luber aja ya mang...hehe
BalasHapusijin follow yah
Terimakasih saya folback!
HapusKayaknya blog saya temanya begitu *garuk kening* 😁
BalasHapusnanti saya lihat :D
HapusTutorialnya donk mbah
BalasHapus