Script html kotak pencarian di blog ~ Blog Responsive 2015

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

Script html kotak pencarian di blog

No comments:

Post a Comment

Blog Responsive 2015

Menu

Artikel Populer

Popular posts from this blog

Search This Blog

Labels