Script html kotak pencarian di blog

December 20, 2024

✏️ Form Pencarian

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:

<a href='https://ayi-service.blogspot.com'>Ayi Service</a>
<!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>

00:00

ganti url https://responsiveblogger-seo.blogspot.com dengan alamat url blog anda

Search This Blog

Blog Responsive 2015

Script html kotak pencarian di blog

Comments

Post a Comment

Popular posts from this blog

Ternyata mudah menghapus samsung akun yang nyangkut karena lupa password

Download Script Landing Page CPA Movie Free

Acunetix v9.0 full Version

10 Contoh Landing Page Responsive Siap Copy Paste

Contoh Template Movie & TV Series Full HTML, CSS, JAVASCRIPT

50 Contoh Prompt untuk membuat video menggunakan CapCut

Listing Crypto Terbaru 2026: Daftar Coin Baru, Tren, dan Cara Menemukannya

Kode Script Form kontak blog

Kumpulan Do'a sehari hari

Cara Mengaktifkan kembali akun Youtube yang kena Suspend

Script html kotak pencarian di blog

Tunggu sebentar...

Comments

Post a Comment

Popular posts from this blog