AYBETWEP KAYNAK KODLARI

CSS KODU

body { background-color: #202124; } .search-container { text-align: center; margin-top: 50px; position: relative; } #search-input { padding: 10px; width: 300px; border: 1px solid #ccc; } #search-button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } .suggested-sites { margin-top: 30px; text-align: center; } .site-box { display: inline-block; width: 120px; height: 60px; border: 1px solid #ccc; margin: 10px; cursor: pointer; text-align: center; line-height: 60px; font-weight: bold; } .overlay-text { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); background-color: none; color: #0f0; padding: 5px 10px; font-weight: bold; font-size: 43px; }

HTML KODU

            <div class="search-container">
                <div class="overlay-text">
                    <span style="color: #f00;">A</span>
                    <span style="color: #0f0;">y</span>
                    <span style="color: #f00;">b</span>
                    <span style="color: #f0f;">e</span>
                    <span style="color: #000;">t</span>
                </div>
                <input type="text" id="search-input" placeholder="Ne vereyim abime..." />
                <button id="search-button">Ara</button>
            </div>

            <div class="suggested-sites">
                <div class="site-box" onclick="window.open('https://haberkalbi.blogspot.com', '_blank')">Haberkalbi</div>
                <div class="site-box" onclick="window.open('https://instagram.com', '_blank')">Instagram</div>
                <div class="site-box" onclick="window.open('https://youtube.com', '_blank')">YouTube</div>
            </div>

            <!-- Alt Alta Kutular -->
            <div class="suggested-sites">
                <div class="site-box" onclick="window.open('https://translate.google.com/?hl=tr', '_blank')">Çeviri</div>
                <div class="site-box" onclick="window.open('https://haberkalbi.blogspot.com/p/doviz-kurlar-doviz-kripto-altn-borsas.html', '_blank')">Döviz</div>
                <div class="site-box" onclick="window.open('https://haberkalbi.blogspot.com/p/weatherpulse.html', '_blank')">hava durumu</div>
            </div>
        

JS KODU

            <script>
                var searchButton = document.getElementById("search-button");
                searchButton.addEventListener("click", search);

                var searchInput = document.getElementById("search-input");
                searchInput.addEventListener("keyup", search);

                function search(event) {
                    var input = document.getElementById("search-input");
                    var query = input.value;

                    if (event.type === "click" || (event.type === "keyup" && event.keyCode === 13)) {
                        if (query.trim() !== "") {
                            var searchUrl = "https://search.aol.com/aol/search;_ylt=AwrNY9BwxHRkyw0E7_FpCWVH;_ylc=X1MDMTE5NzgwMzg4MQRfcgMyBGZyA25hBGdwcmlkA1JzR1ZtUGtNVHNpcXJ6Y0VKakNwREEEbl9yc2x0AzAEbl9zdWdnAzEwBG9yaWdpbgNzZWFyY2guYW9sLmNvbQRwb3MDMARwcXN0cgMEcHFzdHJsAzAEcXN0cmwDMQRxdWVyeQNhBHRfc3RtcAMxNjg1Mzc0MDcw?q=" + encodeURIComponent(query);
                            window.open(searchUrl, "_blank");
                            input.value = "";
                        }
                    }
                }
            </script>
        

Örnek Sayfa

Metin içeriği burada yer alır.