کد اسکریپت بنر رنگی + آموزش

در این مطلب قصد داریم یک قطعه کد اسکریپت کاربردی و جذاب را برای ایجاد بنر رنگی و متحرک در بالاترین قسمت سایت یا وبلاگ به شما معرفی کنیم. از این نوار اطلاع‌رسانی می‌توانید برای نمایش اخبار مهم، لینک کانال‌های ارتباطی یا اطلاع‌رسانی جشنواره‌ها و تخفیف‌ها استفاده نمایید تا توجه مخاطبان را به بهترین شکل جلب کنید.
از مزایای مهم این اسکریپت این است که نیازی به تغییرات پیچیده و شلوغ کردن کدهای قالب ندارد و به صورت خودکار با فونت و ظاهر سایت شما هماهنگ می‌شود.

💻 کد اسکریپت:
نسخه تک 4 رنگ ( دارای انیمیشن) :

<script>
document.addEventListener("DOMContentLoaded", function() {
    
	var bannerText = "جشنواره فروش ویژه آغاز شد! برای مشاهده تخفیف‌ها کلیک کنید.";
	var bannerLink = "https://آدرس-سایت-یا-مطلب-شما.ir";

    
    var style = document.createElement("style");
    style.textContent = `
        .top-animated-banner { 
            background: linear-gradient(-45deg, #ff416c, #ff4b2b, #1fc7ba, #448aff); 
            background-size: 400% 400%; 
            animation: gradientBG 8s ease-in-out infinite; 
            text-align: center; 
            padding: 12px 20px; 
            width: 100%; 
            display: block; 
            box-sizing: border-box; 
            position: relative; 
            z-index: 99999;
        } 
        
        .top-animated-banner a { 
            color: #ffffff !important;
            text-decoration: none !important;
            font-size: 15px; 
            font-weight: bold; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            transition: transform 0.3s ease; 
            font-family: inherit; 
            text-shadow: 0px 1px 3px rgba(0,0,0,0.3);
        } 
        
        .top-animated-banner:hover a { 
            transform: scale(1.03);
        } 
        
        @keyframes gradientBG { 
            0% { background-position: 0% 50%; } 
            50% { background-position: 100% 50%; } 
            100% { background-position: 0% 50%; } 
        }
    `;
    document.head.appendChild(style);
    
    var banner = document.createElement("div");
    banner.className = "top-animated-banner";

    var anchor = document.createElement("a");
    anchor.href = bannerLink;
    
    var textNode = document.createTextNode(bannerText);

    anchor.appendChild(textNode);
    banner.appendChild(anchor);

    document.body.prepend(banner);
});
</script>

نسخه تک رنگ ثابت (بدون انیمیشن) :

<script>
document.addEventListener("DOMContentLoaded", function() {
    
	var bannerText = "جشنواره فروش ویژه آغاز شد! برای مشاهده تخفیف‌ها کلیک کنید.";
	var bannerLink = "https://آدرس-سایت-یا-مطلب-شما.ir";

    var style = document.createElement("style");
    style.textContent = `
        .top-static-banner { 
            background: #0060ff; 
            text-align: center; 
            padding: 12px 20px; 
            width: 100%; 
            display: block; 
            box-sizing: border-box; 
            position: relative; 
            z-index: 99999;
        } 
        
        .top-static-banner a { 
            color: #ffffff !important;
            text-decoration: none !important;
            font-size: 15px; 
            font-weight: bold; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            transition: transform 0.3s ease; 
            font-family: inherit; 
            text-shadow: 0px 1px 3px rgba(0,0,0,0.3);
        } 
        
        .top-static-banner:hover a { 
            transform: scale(1.03);
        } 
    `;
    document.head.appendChild(style);
    
    var banner = document.createElement("div");
    banner.className = "top-static-banner";

    var anchor = document.createElement("a");
    anchor.href = bannerLink;
    
    var textNode = document.createTextNode(bannerText);

    anchor.appendChild(textNode);
    banner.appendChild(anchor);

    document.body.prepend(banner);
});
</script>

نسخه دو رنگ ثابت (گرادیانت بدون انیمیشن) :

<script>
document.addEventListener("DOMContentLoaded", function() {
    
	var bannerText = "جشنواره فروش ویژه آغاز شد! برای مشاهده تخفیف‌ها کلیک کنید.";
	var bannerLink = "https://آدرس-سایت-یا-مطلب-شما.ir";

    var style = document.createElement("style");
    style.textContent = `
        .top-gradient-banner { 
            
            background: linear-gradient(-45deg, #ff416c, #448aff); 
            text-align: center; 
            padding: 12px 20px; 
            width: 100%; 
            display: block; 
            box-sizing: border-box; 
            position: relative; 
            z-index: 99999;
        } 
        
        .top-gradient-banner a { 
            color: #ffffff !important;
            text-decoration: none !important;
            font-size: 15px; 
            font-weight: bold; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            transition: transform 0.3s ease; 
            font-family: inherit; 
            text-shadow: 0px 1px 3px rgba(0,0,0,0.3);
        } 
        
        .top-gradient-banner:hover a { 
            transform: scale(1.03);
        } 
    `;
    document.head.appendChild(style);
    
    var banner = document.createElement("div");
    banner.className = "top-gradient-banner";

    var anchor = document.createElement("a");
    anchor.href = bannerLink;
    
    var textNode = document.createTextNode(bannerText);

    anchor.appendChild(textNode);
    banner.appendChild(anchor);

    document.body.prepend(banner);
});
</script>

⚙️ آموزش قرار دادن کد در وبلاگ:

۱. وارد پنل مدیریت وبلاگ خود شوید.

۲. از منوی سمت راست، روی گزینه «تنظیمات» کلیک کنید.

۳. به قسمت «شخصی‌سازی» بروید.

۴. گزینه «کدهای جاوا اسکریپت» را انتخاب کنید.

۵. کد را در این کادر قرار داده (Paste) و ذخیره کنید.

✏️ آموزش تغییر متن و لینک بنر:

۱. در کدی که کپی کرده‌اید، خط var bannerText را پیدا کنید.

۲. متن دلخواه خود را دقیقاً بین دو کوتیشن (" ") بنویسید.

۳. خط var bannerLink را پیدا کنید.

۴. لینک مدنظرتان را دقیقاً بین دو کوتیشن (" ") قرار دهید.

💻 آموزش ویدیویی :