Bu Sitedeki Sabit olan Banner'ı Nasıl Eklerim

/* BeratK - Fixed Logo Styles */
/* Developer: BERAT K - R10 */

.BeratK-fixed-logo {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    /* BERAT K - R10 - Hover efekti */
}

.BeratK-fixed-logo:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    /* BERAT K - R10 - Hover animasyonu */
}

.BeratK-fixed-logo img {
    display: block;
    width: 80px;
    height: auto;
    border-radius: 4px;
    /* BERAT K - R10 - Logo boyutlandırma */
}

/* BERAT K - R10 - Responsive tasarım */
@media (max-width: 768px) {
    .BeratK-fixed-logo {
        bottom: 15px;
        left: 15px;
        padding: 8px;
    }
    
    .BeratK-fixed-logo img {
        width: 60px;
    }
}

/* BERAT K - R10 - Alternatif basit stil */
.BeratK-fixed-logo-simple {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    transition: all 0.3s ease;
}

.BeratK-fixed-logo-simple:hover {
    transform: scale(1.05);
    /* BERAT K - R10 - Basit hover efekti */
}

.BeratK-fixed-logo-simple img {
    width: 80px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

// BeratK - Fixed Logo JavaScript
// Developer: BERAT K - R10

const BeratK = {
    // BERAT K - R10 - Logo visibility kontrolü
    initFixedLogo: function() {
        const logo = document.querySelector('.BeratK-fixed-logo');
        if (!logo) return;
        
        // BERAT K - R10 - Scroll pozisyonuna göre logo görünürlüğü
        window.addEventListener('scroll', () => {
            const scrollY = window.scrollY;
            const threshold = 100;
            
            if (scrollY > threshold) {
                logo.style.opacity = '1';
                logo.style.visibility = 'visible';
            } else {
                logo.style.opacity = '0.7';
            }
        });
    },
    
    // BERAT K - R10 - Logo tıklama eventi
    logoClickHandler: function() {
        const logo = document.querySelector('.BeratK-fixed-logo');
        if (logo) {
            logo.addEventListener('click', function() {
                // BERAT K - R10 - Ana sayfaya git veya özel action
                window.location.href = '/';
            });
        }
    },
    
    // BERAT K - R10 - Responsive logo boyutu
    responsiveLogoSize: function() {
        const updateLogoSize = () => {
            const logo = document.querySelector('.BeratK-fixed-logo img');
            if (logo) {
                const windowWidth = window.innerWidth;
                if (windowWidth < 768) {
                    logo.style.width = '60px';
                } else {
                    logo.style.width = '80px';
                }
            }
        };
        
        window.addEventListener('resize', updateLogoSize);
        updateLogoSize(); // BERAT K - R10 - İlk yükleme
    }
};

// BERAT K - R10 - Sayfa yüklendiğinde çalıştır
document.addEventListener('DOMContentLoaded', function() {
    BeratK.initFixedLogo();
    BeratK.logoClickHandler();
    BeratK.responsiveLogoSize();
});
<!-- BERAT K - R10 - Sabit Logo HTML Yapısı -->
<div class="BeratK-fixed-logo">
    <img src="BURAYA-LOGO-LIN" alt="Şirket Logosu">
</div>

<!-- BERAT K - R10 - Alternatif basit yapı -->
<div class="BeratK-fixed-logo-simple">
    <img src="BURAYA-LOGO-URL-GIRIN" alt="Şirket Logosu">
</div>

// BeratK - SCSS Variables
// Developer: BERAT K - R10

$BeratK-logo-size: 80px;
$BeratK-logo-size-mobile: 60px;
$BeratK-logo-position: 20px;
$BeratK-logo-z-index: 1000;
$BeratK-logo-bg: rgba(255, 255, 255, 0.95);
$BeratK-logo-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

// BERAT K - R10 - SCSS Mixin
@mixin BeratK-fixed-position($bottom: $BeratK-logo-position, $left: $BeratK-logo-position) {
    position: fixed;
    bottom: $bottom;
    left: $left;
    z-index: $BeratK-logo-z-index;
}

.BeratK-fixed-logo {
    @include BeratK-fixed-position();
    background: $BeratK-logo-bg;
    padding: 10px;
    border-radius: 8px;
    box-shadow: $BeratK-logo-shadow;
    transition: all 0.3s ease;
    
    // BERAT K - R10 - Nested hover
    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }
    
    img {
        display: block;
        width: $BeratK-logo-size;
        height: auto;
        border-radius: 4px;
    }
    
    // BERAT K - R10 - Responsive
    @media (max-width: 768px) {
        bottom: 15px;
        left: 15px;
        padding: 8px;
        
        img {
            width: $BeratK-logo-size-mobile;
        }
    }
}