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

معرفی قابلیت اعلان بالای هدر

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

نحوه استفاده از کد

برای استفاده از این قابلیت، کافی است کد زیر را بعد از تگ <body> در فایل HTML خود قرار دهید. این کد شامل استایل‌ها و ساختار HTML لازم برای نمایش اعلان است. شما می‌توانید متن و لینک‌های مورد نظر خود را در این کد جایگزین کنید تا پیام دلخواه خود را به کاربران نمایش دهید.

<style>
.top_message{position:relative;background-color:#FFF;padding:10px 50px;text-align:center;z-index:2;border-top: 4px solid #59d7ea;}
.top_message a{background-color:#59d7ea;margin-right:10px;border-radius:7px;transition:all .2s;width:73px;height:32px;display:inline-flex;justify-content:center;align-items:center;color:#FFF}
.top_message a:hover{box-shadow:0 0 0 20px rgba(0,0,0,.1) inset;}
.top_message .close{position:absolute;transition:all .2s;cursor:pointer;left:0;top:0;bottom:0;width:50px;display:flex;justify-content:center;align-items:center;font-size:20px;color:#000;}
.top_message .close:hover{color:#59d7ea;}
</style>
<div class="top_message">جهت مطلع شدن از اخبار و اطلاعیه های سایت در کانال تلگرام ما عضو شوید<a href="https://t.me/" rel="nofollow external noopener noreferrer" title="کلیک کنید" data-wpel-link="external" onclick="javascript:window.open('https://t.me/', '_blank', 'noopener'); return false;">کلیک کنید</a>
    <div class="close close_message"  onclick="document.querySelector('.top_message').remove();"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
</svg></div>
</div>

سفارشی‌سازی اعلان

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

نمایش به صورت استیکی در پایین سایت

کد :

<style>
.top_message{position:relative;background-color:#FFF;padding:10px 50px;text-align:center;z-index:2;border-top: 4px solid #59d7ea;position:fixed;bottom:0;width:100%;}
.top_message a{background-color:#59d7ea;margin-right:10px;border-radius:7px;transition:all .2s;width:73px;height:32px;display:inline-flex;justify-content:center;align-items:center;color:#FFF}
.top_message a:hover{box-shadow:0 0 0 20px rgba(0,0,0,.1) inset;}
.top_message .close{position:absolute;transition:all .2s;cursor:pointer;left:0;top:0;bottom:0;width:50px;display:flex;justify-content:center;align-items:center;font-size:20px;color:#000;}
.top_message .close:hover{color:#59d7ea;}
</style>
<div class="top_message">جهت مطلع شدن از اخبار و اطلاعیه های سایت در کانال تلگرام ما عضو شوید<a href="https://t.me/" rel="nofollow external noopener noreferrer" title="کلیک کنید" data-wpel-link="external" onclick="javascript:window.open('https://t.me/', '_blank', 'noopener'); return false;">کلیک کنید</a>
    <div class="close close_message"  onclick="document.querySelector('.top_message').remove();"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
</svg></div>
</div>

دمو