Ayie Dadev
Script html kotak pencarian di blog
Ayie Dadev
Script html kotak pencarian di blog
Penjelasan
1. Fungsi Pencarian Blog:
Menggunakan URL pencarian Blogspot: https://[YOUR_BLOG_NAME].blogspot.com/search?q=[QUERY].
Ganti [YOUR_BLOG_NAME] dengan nama blog Anda.
2. Fungsi Pencarian Web:
Menggunakan Google Search API (atau pencarian biasa dengan Google):
https://www.google.com/search?q=[QUERY].
3. Hasil Pencarian dengan Accordion:
Menampilkan hasil pencarian dalam format accordion.
Cara Kerja:
1. Form:
Input kata kunci untuk pencarian.
Pilih sumber pencarian: Blogspot atau Google.
2. Hasil Pencarian:
Tautan hasil pencarian ditampilkan di dalam accordion.
Klik accordion untuk membuka atau menutup hasil pencarian.
berikut script lengkapnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Pencarian</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
fieldset { border: 1px solid #ccc; padding: 15px; }
#searchInContainer { margin: 10px 0; }
.icons li { display: inline-block; margin-right: 10px; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; border-radius: 4px; }
.icons li.active { background-color: #007BFF; color: white; }
#resultsDiv { margin-top: 20px; }
.accordion { background: #f1f1f1; cursor: pointer; padding: 10px; margin-bottom: 5px; border: 1px solid #ccc; border-radius: 4px; }
.panel { display: none; padding: 10px; background: #fafafa; border: 1px solid #ddd; border-top: none; }
</style>
</head>
<body>
<form id="searchForm">
<fieldset>
<input id="q" type="text" placeholder="Masukkan kata kunci" required />
<input id="submitButton" type="submit" value="Cari" />
<div id="searchInContainer">
<input id="searchSite" name="check" type="radio" value="site" checked />
<label for="searchSite">Cari di Blog</label>
<input id="searchWeb" name="check" type="radio" value="web" />
<label for="searchWeb">Cari di Web</label>
</div>
<ul class="icons">
<li class="web" data-searchType="web">Web</li>
<li class="images" data-searchType="images">Images</li>
<li class="news" data-searchType="news">News</li>
<li class="videos" data-searchType="video">Videos</li>
<li class="site" data-searchType="site">Blog</li>
</ul>
</fieldset>
</form>
<div id="resultsDiv"></div>
<script>
const form = document.getElementById('searchForm');
const resultsDiv = document.getElementById('resultsDiv');
const icons = document.querySelectorAll('.icons li');
let selectedSearchType = 'web';
icons.forEach(icon => {
icon.addEventListener('click', function () {
icons.forEach(i => i.classList.remove('active'));
this.classList.add('active');
selectedSearchType = this.dataset.searchType;
});
});
form.addEventListener('submit', function (e) {
e.preventDefault();
const query = document.getElementById('q').value;
const searchScope = document.querySelector('input[name="check"]:checked').value;
let searchUrl = '';
if (searchScope === 'site') {
// Pencarian di Blog
searchUrl = `https://responsiveblogger-seo.blogspot.com/search?q=${encodeURIComponent(query)}`;
} else {
// Pencarian di Web
searchUrl = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
}
// Menampilkan hasil dalam accordion
resultsDiv.innerHTML = `
<div class="accordion">Hasil Pencarian: ${query}</div>
<div class="panel">
<a href="${searchUrl}" target="_blank">Klik di sini untuk melihat hasil pencarian.</a>
</div>
`;
const accordion = document.querySelector('.accordion');
const panel = document.querySelector('.panel');
accordion.addEventListener('click', function () {
panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
});
});
</script>
</body>
</html>
ganti url https://responsiveblogger-seo.blogspot.com dengan alamat url blog anda
Masukkan Komentar Anda