إضافة تبويبات أفقية HTML - CSS - JavaScript

هل تشعر أن مقالاتك في بلوجر أصبحت طويلة ومتعبة في القراءة؟ هل ترغب في تنظيم المحتوى داخل تدوينتك بطريقة جذابة وسهلة التصفح؟ إذًا أنت في المكان الصحيح! في هذا المقال، نقدم لك كود تبويبات أفقية احترافي لبلوجر يعمل بتقنيات HTML وCSS وJavaScript، يتيح لك عرض عدة أقسام أو مواضيع داخل نفس الصفحة دون أن تحتاج إلى تقسيم المحتوى على عدة تدوينات أو صفحات.

هذا النوع من الإضافات أصبح من أساسيات تصميم واجهة المستخدم، لأنه يُسهم بشكل كبير في تحسين تجربة الزائر، ويمنح مدونتك لمسة عصرية ومرونة أكبر في العرض. سواء كنت تقدم شروحات تقنية، مقارنات بين أدوات، أو حتى تبويب لأجزاء مختلفة من نفس الموضوع، فإن هذه الإضافة ستمنحك التحكم الكامل في تنسيق المحتوى بطريقة تفاعلية ومرتبة.

تابع الشرح الكامل خطوة بخطوة، وشاهد بنفسك كيف تضيف هذه التبويبات الأفقية إلى بلوجر بسهولة، دون أي تعقيد في الأكواد!

ما أهمية هذه الإضافة لمدونات بلوجر؟

التنقل بين المحتوى بشكل سريع وسلس هو عنصر رئيسي في تحسين تجربة الزائر داخل الموقع. عند استخدام تبويبات أفقية في بلوجر، فإنك:

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

معاينة كود التبويبات

الكود مقسم إلى 3 أجزاء: HTML للبنية، CSS للتصميم، JavaScript للوظائف.

محتوى التبويب الأول

محتوى التبويب الثاني

محتوى التبويب الثالث

تركيب التبويبات على مدونة بلوجر

إليك خطوات بسيطة لإضافة هذه التبويبات إلى لمدونتك على بلوجر :

الخطوة الأولى: قم بالدخول إلى لوحة تحكم بلوجر، توجه إلى قسم المظهر ثم السهم بجانب التخصيص اختر تعديل html.

الخطوة الثانية: قم بالبحث عن وسم ]]></b:skin> أضف الكود التالي فوقه مباشرة:

بعد حفظ الخطوة السابقة ومن نفس المحرر قم بالبحث عن وسم </body> أعلاه مباشرة قم باضافه الكود التالي:





<script src="https://unpkg.com/feather-icons"></script>
<script>
function openTab(event, tabId) {
  document.querySelectorAll('.tab-content').forEach(function(tab) {
    tab.classList.remove('active');
  });
  document.querySelectorAll('.eltiqni-tabs').forEach(function(btn) {
    btn.classList.remove('active-tab');
  });
  document.getElementById(tabId).classList.add('active');
  event.currentTarget.classList.add('active-tab');
}
feather.replace();
</script>

الخطوة الأخيرة وهي كود html سيتم إضافته داخل كل مقال لعرض التبويبات بشكل متناسق ويمكن التعديل على محتوى التبويب بما ترغب:



<div class="tabs-wrapper">
  <div class="tabs-container">
    <button class="eltiqni-tabs active-tab" onclick="openTab(event, 'tab1')"><i data-feather="home"></i> تبويب 1</button>
    <button class="eltiqni-tabs" onclick="openTab(event, 'tab2')"><i data-feather="file-text"></i> تبويب 2</button>
    <button class="eltiqni-tabs" onclick="openTab(event, 'tab3')"><i data-feather="settings"></i> تبويب 3</button>
  </div>
</div>

<div class="tab-content active" id="tab1">محتوى التبويب الأول</div>
<div class="tab-content" id="tab2">محتوى التبويب الثاني</div>
<div class="tab-content" id="tab3">محتوى التبويب الثالث</div>

الخلاصة

بإستخدام كود تبويبات أفقية مميز مثل هذا، يمكنك جعل تجربة التصفح في مدونتك أكثر احترافية وتنظيماً. هذه الإضافة البسيطة تفتح أمامك إمكانيات عرض متعددة وتمنح الزائر تجربة مرنة وسريعة دون تشويش. لا تتردد في تجربة الكود وتعديله ليتناسب مع تصميم مدونتك.

هل أعجبتك الإضافة؟ شاركنا رأيك في التعليقات، ولا تنسَ مشاركة المقال مع من يهمه الأمر!