هل سئمت من دفع السعر الكامل لخدمات الاشتراك مثل Canva و Netflix و غيرها ؟

"إضافة تصميم جدول عرض المعلومات  سريع الاستجابة إلى موقع الويب الخاص بك على Blogger هو الحل الأمثل لتحسين تجربة المستخدم وتصميم المحتوى. يتيح لك هذا المقال خطوة بخطوة إضافة علامة تبويب سريع الاستجابة إلى موقع الويب الخاص بك بشكل سهل ومرن.

عزز موقع الويب الخاص بك على Blogger باستخدام تصميم جدول عرض المعلومات سريع الاستجابة. اتبع الدليل الخطوة بخطوة لإضافة تصميم جذاب ومتطور على موقع الويب الخاص بك وزيادة تجربة المستخدم. اعزز عرض محتواك وتحسين تصميم الموقع الخاص بك الآن.

أولا قم بانشاء مشاركه جديده :

ثانيا بعد انشاء مشاركه جديده قم بإنشاء <style>  </style> لنسخ اكواد ال css بداخلها 

اكواد css

body {
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
}

.tabs-container,
.tabs-container * {
  box-sizing: border-box;
}

.tabs-container {
  width: 800px;
  height: 400px;
  font-family: "Roboto", sans-serif;
  padding: 16px;
  background: #fff;
  color: #14213d;
  box-shadow: 0 5px 50px -8px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.tabs-container .tab-heading .icon svg {
  height: 30px;
}

.tabs-container .tab-heading-container {
  display: flex;
  background: #e63946;
  margin: -16px;
  border-radius: 10px;
  overflow: hidden;
}

.tabs-container .tab-heading {
  padding: 12px 30px;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-transform: uppercase;
  font-weight: 800;
  gap: 4px;
}

.tabs-container .tab-heading.active {
  background: #1d3557;
}

.tabs-container .tab-content {
  display: none;
  overflow-y: scroll;
  height: 300px;
  margin-top: 24px;
}

.tabs-container .tab-content.active {
  display: block;
}

.tabs-container .tab-content h2 {
  font-size: 40px;
  margin-top: 16px;
  margin-bottom: 8px;
}

.tabs-container .tab-content .content {
  line-height: 2;
}

.tabs-container .tab-content .content img {
  width: 100%;
}

@media (max-width: 900px) {
  .tabs-container {
    width: 80%;
  }

  .tabs-container .tab-heading-container {
    justify-content: space-between;
  }

  .tabs-container .tab-heading {
    flex: 1;
  }
}

@media (max-width: 600px) {
  .tabs-container {
    width: 90%;
  }

  .tabs-container .tab-content h2 {
    font-size: 30px;
    margin-top: 16px;
    margin-bottom: 8px;
  }

  .tabs-container .tab-heading {
    font-size: 14px;
    padding: 8px;
  }
}

ثالثا  قم بنسخ ال html للجدول :

اكواد html

      <div class="tabs-container">
      <div class="tab-heading-container">
        <div class="tab-heading active">
          <div class="icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="2"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
              />
            </svg>
          </div>

          Bookmarks
        </div>

        <div class="tab-heading">
          <div class="icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="2"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
              />
            </svg>
          </div>

          Analytics
        </div>

        <div class="tab-heading">
          <div class="icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="2"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
              />
            </svg>
          </div>

          Comments
        </div>
      </div>

      <div class="tab-content-container">
        <div class="tab-content active">
          <h2>Bookmarks</h2>

          <div class="content">
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse
              architecto consequatur iure reiciendis sit atque veritatis non
              magni quaerat odio, voluptatibus est dolor eligendi dolorem
              voluptates alias accusamus quasi cumque hic? In quasi, expedita
              molestiae sunt iste saepe reprehenderit ea?
            </p>
          </div>
        </div>

        <div class="tab-content">
          <h2>Analytics</h2>

          <div class="content">
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse
              architecto consequatur iure reiciendis sit atque veritatis non
              magni quaerat odio, voluptatibus est dolor eligendi dolorem
              voluptates alias accusamus quasi cumque hic? In quasi, expedita
              molestiae sunt iste saepe reprehenderit ea?
            </p>

            <img src="images/analytics.jpg" alt="" />

            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse
              architecto consequatur iure reiciendis sit atque veritatis non
              magni quaerat odio, voluptatibus est dolor eligendi dolorem
              voluptates alias accusamus quasi cumque hic? In quasi, expedita
              molestiae sunt iste saepe reprehenderit ea?
            </p>
          </div>
        </div>

        <div class="tab-content">
          <h2>Comments</h2>

          <div class="content">
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse
              architecto consequatur iure reiciendis sit atque veritatis non
              magni quaerat odio, voluptatibus est dolor eligendi dolorem
              voluptates alias accusamus quasi cumque hic? In quasi, expedita
              molestiae sunt iste saepe reprehenderit ea?
            </p>

            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse
              architecto consequatur iure reiciendis sit atque veritatis non
              magni quaerat odio, voluptatibus est dolor eligendi dolorem
              voluptates alias accusamus quasi cumque hic? In quasi, expedita
              molestiae sunt iste saepe reprehenderit ea?
            </p>

            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse
              architecto consequatur iure reiciendis sit atque veritatis non
              magni quaerat odio, voluptatibus est dolor eligendi dolorem
              voluptates alias accusamus quasi cumque hic? In quasi, expedita
              molestiae sunt iste saepe reprehenderit ea?
            </p>
          </div>
        </div>
      </div>
    </div>

    <script src="main.js"></script>

رابعا قم بانشاء في اخر المقاله <script>  </script> لنقوم بوضع اكواد الجافا سكريبت بداخلها

اكواد javascript

const tabHeadingAll = document.querySelectorAll(".tabs-container .tab-heading");
const tabContentAll = document.querySelectorAll(".tabs-container .tab-content");

const removeAllActive = () => {
  tabContentAll.forEach((c) => {
    c.classList.remove("active");
  });

  tabHeadingAll.forEach((h) => {
    h.classList.remove("active");
  });
};

tabHeadingAll.forEach((h, i) => {
  h.addEventListener("click", () => {
    removeAllActive();
    tabContentAll[i].classList.add("active");
    h.classList.add("active");
  });
});