Blogger İçin Akıllı ve Dinamik Yorum Kutusu (Kapatılabilir & Yüzer Mod)

Yazı Başlığı: Blogger İçin Akıllı ve Dinamik Yorum Kutusu (Kapatılabilir & Yüzer Mod)

Bugün sizlere blogunuzdaki kullanıcı etkileşimini zirveye taşıyacak, modern ve akıllı bir yorum sistemi eklentisini paylaşıyorum. Standart yorum kutularının aksine, bu sistem sayfa yüklendikten 5 saniye sonra nazikçe ortaya çıkıyor, okuyucuyla birlikte hareket ediyor ve en önemlisi; okuyucu zaten yorum alanına ulaştığında otomatik olarak eski yerine geri dönüyor. Üstelik kullanıcı dilerse tek tıkla kutuyu kapatabiliyor!

Öne Çıkan Özellikler:

  • Gecikmeli Açılış: Sayfa açılır açılmaz okuyucuyu boğmaz, 5 saniye sonra belirir.

  • Akıllı Konumlandırma: Sayfa içinde yüzer ancak gerçek yorum alanına gelindiğinde orijinal yerine oturur.

  • Kapatılabilir Yapı: Sağ üstteki "X" butonu ile kullanıcı deneyimine saygı duyar.

  • Karanlık Tema Uyumu: Şık gradyan geçişleri ve neon efektlerle fütüristik görünüm.

Kurulum:

Aşağıdaki kod bloğunu kopyalayın ve Blogger panelinizden Tema > HTML'yi Düzenle yolunu izleyerek </body> etiketinin hemen üzerine yapıştırın.

<!-- Blogger Arşivim - Akıllı Yorum Sistemi Başlangıcı -->
<style>
/* Yorum Formu Genel Görünümü */
.comment-form {
    background: #152331 !important;
    background: linear-gradient(to right, #000000, #152331) !important;
    border: 1px solid #a55b12 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 4px 25px rgba(0,0,0,0.5) !important;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    opacity: 0;
    visibility: hidden;
    max-width: 600px;
    margin: 20px auto;
    position: relative;
}

/* Yüzen (Sticky) Mod Ayarları */
.comment-form.meta-float {
    position: fixed !important;
    bottom: 25px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(0) !important;
    width: 92% !important;
    z-index: 99999 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Orijinal Yerine Dönme Ayarları */
.comment-form.meta-at-home {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
}

/* Kapatma Butonu Tasarımı */
.close-comment-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #a55b12;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    z-index: 100001;
    line-height: 1;
    transition: 0.3s;
}

.close-comment-btn:hover { color: #ff4d4d; }

/* Yüzerken Çıkan "Yorum Yap" Etiketi */
.comment-form.meta-float::before {
    content: "YORUM YAP";
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    color: #a55b12;
    font-family: 'Bruno Ace', sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    animation: metaPulse 1.5s infinite;
}

@keyframes metaPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.comment-form.meta-at-home::before { display: none !important; }

/* Iframe İçi Renk Optimizasyonu */
.comment-form iframe {
    filter: invert(0.9) hue-rotate(180deg) brightness(1.1);
}
</style>

<script type='text/javascript'>
//<![CDATA[
(function() {
    window.addEventListener('load', function() {
        const commentBox = document.querySelector('.comment-form') || document.getElementById('comment-holder');
        const footer = document.getElementById('footer-wrapper');
        let isClosedManually = false;

        if (commentBox && footer) {
            // Kapatma butonunu oluştur
            const closeBtn = document.createElement('div');
            closeBtn.innerHTML = '&times;';
            closeBtn.className = 'close-comment-btn';
            commentBox.appendChild(closeBtn);

            closeBtn.onclick = function() {
                commentBox.style.display = 'none';
                isClosedManually = true;
            };

            // 5 Saniye bekle ve sistemi başlat
            setTimeout(function() {
                if (!isFooterVisible() && !isClosedManually) {
                    commentBox.classList.add('meta-float');
                }
            }, 5000);

            // Kaydırma (Scroll) takibi
            window.addEventListener('scroll', function() {
                if (isClosedManually) return;

                if (isFooterVisible()) {
                    commentBox.classList.remove('meta-float');
                    commentBox.classList.add('meta-at-home');
                    closeBtn.style.display = 'none';
                } else {
                    if (commentBox.classList.contains('meta-at-home')) {
                        commentBox.classList.remove('meta-at-home');
                        commentBox.classList.add('meta-float');
                        closeBtn.style.display = 'block';
                    }
                }
            });

            function isFooterVisible() {
                const rect = footer.getBoundingClientRect();
                return (rect.top <= (window.innerHeight || document.documentElement.clientHeight) + 150);
            }
        }
    });
})();
//]]>
</script>
<!-- Blogger Arşivim - Akıllı Yorum Sistemi Bitiş -->



Bu küçük dokunuşla blogunuzu daha dinamik ve kullanıcı dostu bir hale getirebilirsiniz. Kurulumda herhangi bir sorun yaşarsanız veya renk kodlarını kendi temanıza göre değiştirmek isterseniz yorum kısmından bana ulaşabilirsiniz. 
Etiketler: Blogger Eklentileri, Yorum Kutusu Özelleştirme, Blogger Tasarım, Dinamik Widget, Web Tasarım Rehberi

1 yorum: