براتی طراح سایت

ساخت پیام سفارشی در سایت المنتوری (کد سفارشی)

مشخصات مقاله:
بروزرسانی: تیر ۱۴۰۴
ساخت پیام سفارشی در سایت المنتور
فهرست مطالب

ویدیو

ساخت پیام سفارشی یا متن نمایش در المنتور

برای ساخت پیام سفارشی در سایت المنتوری از قابلیت کد سفارشی در المنتور که در پیشخوان وردپرس استفاده میکنیم.

  • کد جدید
  • جایگاه روی بادی یا بدنه محتوا
  • انتشار

body


<script>
  window.onload = function () {
    // بررسی نمایش پیام قبلی
    if (!localStorage.getItem('messageBoxDisplayed')) {
      // ایجاد المان پیام
      const messageBox = document.createElement('div');
      messageBox.style.position = 'fixed';
      messageBox.style.top = '20%';
      messageBox.style.left = '50%';
      messageBox.style.transform = 'translate(-50%, -50%)';
      messageBox.style.width = '300px';
      messageBox.style.padding = '20px';
      messageBox.style.backgroundColor = '#fff';
      messageBox.style.border = '1px solid #ccc'; /* نوار خاکستری */
      messageBox.style.borderRadius = '10px';
      messageBox.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.2)';
      messageBox.style.fontFamily = 'Arial, sans-serif';
      messageBox.style.textAlign = 'center';
      messageBox.style.zIndex = '10000';
      // متن داخل باکس پیام
      messageBox.innerHTML = `
        <p style="color: #333; font-size: 16px; margin-bottom: 20px;">
          این یک پیام سفارشی است که فقط یک‌بار نمایش داده می‌شود.
        </p>
        <button style="
          padding: 10px 15px;
          background-color: #007bff;
          color: #fff;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          font-size: 14px;
        ">باشه</button>
      `;
      // دکمه بستن پیام
      const closeButton = messageBox.querySelector('button');
      closeButton.onclick = function () {
        messageBox.style.display = 'none';
        localStorage.setItem('messageBoxDisplayed', 'true'); // ذخیره وضعیت نمایش
      };
      // افزودن پیام به صفحه
      document.body.appendChild(messageBox);
    }
  };
</script>


ساخت مسیج باکس یا MessageBox در المنتور

  • حذف قبلی
  • کد جدید
  • جایگاه روی هدر یا سربرگ
  • انتشار
مقاله مرتبط:  ریسپانسیو کردن صفحات در المنتور

header


<script>
  window.onload = function () {
    // بررسی نمایش پیام قبلی
    if (!localStorage.getItem('customMessageDisplayed')) {
      // ایجاد المان پیام
      const messageBox = document.createElement('div');
      messageBox.style.position = 'fixed';
      messageBox.style.top = '0';
      messageBox.style.left = '0';
      messageBox.style.width = '100%';
      messageBox.style.backgroundColor = '#ff9800';
      messageBox.style.color = '#fff';
      messageBox.style.padding = '15px';
      messageBox.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.2)';
      messageBox.style.fontSize = '16px';
      messageBox.style.fontFamily = 'Arial, sans-serif';
      messageBox.style.textAlign = 'center';
      messageBox.style.zIndex = '1000';
      // محتوای پیام
      messageBox.innerHTML = `
        <span>پیام سفارشی شما اینجاست</span>
        <button style="
          margin-left: 20px;
          padding: 5px 10px;
          background-color: #333;
          color: #fff;
          border: none;
          border-radius: 5px;
          cursor: pointer;
        ">بستن</button>
      `;
      // دکمه بستن
      const closeButton = messageBox.querySelector('button');
      closeButton.onclick = function () {
        messageBox.style.display = 'none';
        localStorage.setItem('customMessageDisplayed', 'true'); // ذخیره وضعیت نمایش
      };
      // افزودن به صفحه
      document.body.appendChild(messageBox);
    }
  };
</script>


مقاله افزایش سرعت المنتور

مقاله مرتبط:  ساخت افکت برف باران در سایت با کد CSS

ستاره⭐⭐⭐⭐مارا رنگی کنید

۴/۵ - (۸ امتیاز)

2 پاسخ

دیدگاهتان را بنویسید

نوزده + سیزده =