إضافة إنشاء مدونة بلوجر بتصميم احترافي وسهل الاستخدام

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

إضافة إنشاء مدونة بلوجر بتصميم احترافي وسهل الاستخدام.

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

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

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

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

مميزات الإضافة وطريقة عملها

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

خصائص الأكورديون وفائدتها للقارئ
الخاصية	وظيفتها
فتح قسم واحد	يُغلق القسم السابق عند فتح قسم جديد لتقليل المحتوى المعروض في اللحظة نفسها.
علامتا + و−	توضّحان حالة القسم وإمكانية توسيعه أو طيّه.
تغيير لون العنوان	يميّز حالة التفاعل أو القسم المفتوح بحسب إعدادات التنسيق.
انتقالات وتلاشٍ تدريجي	يضبط الكود انتقال الحد الأقصى للارتفاع والشفافية على 0.4 ثانية.
JavaScript دون مكتبات خارجية	يقلّل الاعتماد على ملفات إضافية، لكن سرعة الصفحة تبقى مرتبطة بالكود والقالب والمحتوى.

طريقة تركيب إضافة الأكورديون في بلوجر

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

إضافتها إلى أداة HTML/JavaScript

افتح لوحة تحكم بلوجر واختر المدونة المطلوبة، ثم انتقل إلى التنسيق.
اختر إضافة أداة في الموضع المناسب، ثم أداة HTML/JavaScript.
ألصق كود الإضافة الكامل الوارد أدناه، ثم عدّل عناوين الأقسام ومحتوياتها.
احفظ التغييرات وافتح المدونة للتحقق من عمل الفتح والإغلاق وملاءمة العرض.

توضح مساعدة بلوجر الرسمية لتغيير التصميم وإضافة الأدوات مسارات إضافة الأدوات وتعديل HTML وCSS.

عرضها داخل صفحة أو مشاركة

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

كود إضافة الأكورديون الكامل

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

كود الإضافة

  <style>
#ba-accordion{display:flex;flex-direction:column;gap:3px;}
#ba-accordion > h6{all:unset;display:flex;justify-content:space-between;background-color:rgba(0,0,0,.02);padding:15px;border:1px solid rgba(0,0,0,.02);border-radius:4px;cursor:pointer;position:relative;}
#ba-accordion > h6.active,#ba-accordion > h6:hover{background-color:rgba(0,0,0,.1);transition:all .4s;}
#ba-accordion h6::after{content:'+';font-weight:bold;font-size:20px;}
#ba-accordion h6.active::after{content:'-';}
#ba-accordion > div{display:block;overflow-y:hidden;max-height:0;opacity:0;transition:max-height .4s,opacity .4s;}
#ba-accordion > div.active{max-height:600px;overflow-y:auto;padding:10px;opacity:1;}
</style>

<div id="ba-accordion">
  
<!--بداية تبويب-->
<h6>اسم التبويب</h6>
<div>
المحتوى 
</div>
<!--نهاية تبويب-->

</div>

<script>
document.addEventListener("DOMContentLoaded",function(){const accordionHeaders=document.querySelectorAll("#ba-accordion h6");accordionHeaders.forEach(header=>{header.addEventListener("click",function(){accordionHeaders.forEach(otherHeader=>{if(otherHeader!==header){otherHeader.classList.remove("active");otherHeader.nextElementSibling.classList.remove("active")}});header.classList.toggle("active");const content=header.nextElementSibling;content.classList.toggle("active");if(!content.classList.contains("active")){content.addEventListener("transitionend",function handler(){content.classList.remove("active");content.removeEventListener("transitionend",handler)})}})})});
</script>

كيفية تخصيص التبويبات والتصميم

تعديل العناوين وإضافة أقسام جديدة

اكتب عنواناً يصف محتوى القسم مباشرة، مثل «طريقة استخدام الإضافة» بدلاً من «معلومات مهمة». لإضافة قسم جديد، انسخ الكتلة الواقعة بين التعليقين «بداية تبويب» و«نهاية تبويب»، والصقها داخل الحاوية نفسها ba-accordion. يجب أن يبقى عنصر div الخاص بالمحتوى مباشرة بعد h6، لأن السكربت يصل إليه باستخدام nextElementSibling. لا تنسخ الحاوية كاملة بالمعرّف نفسه لإنشاء مجموعات مستقلة.

يمكن إدراج فقرات وقوائم وصور وروابط داخل القسم، مع مراعاة عرض الشاشة. تجنّب وضع عناصر h6 إضافية داخل المحتوى؛ فالمحدد الحالي #ba-accordion h6 يلتقطها أيضاً ويعاملها كعناوين تفاعلية. ولا تكرّر فقرة واحدة تحت عدة عناوين؛ اجعل لكل قسم سؤالاً أو غرضاً محدداً.

تعديل الألوان والمسافات

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

تغيير ارتفاع المحتوى المفتوح

يضبط الكود max-height:600px وoverflow-y:auto للقسم المفتوح. لذلك، إذا تجاوز المحتوى الحد المتاح، يظهر تمرير داخلي بدلاً من تمديد القسم بلا حد. يمكنك تعديل قيمة 600px لتناسب المحتوى، ثم اختبار النتيجة على الهاتف. أما تغيير سرعة الحركة فيتم بتعديل القيمتين .4s داخل انتقال الارتفاع والشفافية.

استخدام الإضافة بطريقة تخدم القارئ

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

تؤكد إرشادات Google للمحتوى المفيد أهمية تلبية حاجة القارئ وتقديم عناوين وصفية ومعلومات كافية. لذلك استخدم الكلمات المناسبة لمحتوى كل قسم دون تكرار «إنشاء مدونة» في جميع العناوين.

اختبار لوحة المفاتيح والهاتف

النسخة الحالية تستخدم عناوين h6 تستجيب للنقر، ولا تضيف أزراراً قابلة للتركيز أو خصائص ARIA. لتحسين إمكانية الوصول، يلزم تعديل الكود ليستخدم أزراراً داخل عناوين مناسبة لهرمية الصفحة، قابلة للتشغيل بمفتاح Enter أو المسافة، مع تحديث aria-expanded وربطه بلوحته عبر aria-controls. يشرح دليل W3C لنمط الأكورديون هذا السلوك.

اختبر أيضاً وضوح النص والعلامات على الهاتف، وتأكد من عدم اقتصاص الصور أو ظهور تمرير أفقي غير ضروري. الكود يفعّل الحركات، لكنه لا يتضمن قاعدة تراعي تفضيل تقليل الحركة؛ يمكن إضافتها عند تطوير النسخة.

مشكلات شائعة عند تركيب الإضافة

هذه احتمالات تساعد على التشخيص، وليست حكماً على سبب المشكلة قبل فحص الصفحة والكود.

فحص أخطاء التبويبات بعد التركيب
المشكلة	ما الذي تفحصه؟
العناوين لا تستجيب	تحميل JavaScript، وتطابق الأصناف والمعرّفات، وأخطاء وحدة تحكم المتصفح.
الشكل مختلف عن المتوقع	وجود CSS وتعارض قواعده مع أنماط القالب أو ترتيب تحميلها.
جزء من المحتوى مقصوص	وجود تمرير داخلي بعد تجاوز حد 600 بكسل؛ فهذا سلوك محدد في الكود. افحص أيضاً عرض الصور وتعارض CSS.
تفاعل عنوان داخل المحتوى	وجود h6 متداخل داخل القسم؛ فمحدد JavaScript الحالي يشمله. افحص أيضاً بقاء div المحتوى مباشرة بعد عنوانه.

إذا لاحظت أن القسم يُغلق مجدداً عند النقر السريع، فافحص معالج transitionend في نهاية السكربت؛ فهو يزيل الصنف active عند انتهاء الانتقال، وقد يتداخل مع إعادة الفتح قبل انتهاء الحركة. معالجة ذلك تحتاج تعديل السكربت، وليست خياراً في التنسيق.

أسئلة شائعة حول إضافة الأكورديون

هل تحتاج الإضافة إلى إنشاء مدونة جديدة؟

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

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

هل يمكن فتح أكثر من قسم في الوقت نفسه؟

لا في هذا الكود؛ إذ تُغلق حلقة forEach بقية الأقسام عند النقر على عنوان. ويمكن تعديل JavaScript للسماح بفتح عدة أقسام إذا كان ذلك أنسب للمحتوى.

هل تظهر الأقسام مفتوحة عند تحميل الصفحة؟

لا، المحتوى يبدأ بحد أقصى للارتفاع يساوي صفراً وشفافية تساوي صفراً. النقر على العنوان يفتحه، والنقر عليه مرة أخرى يطويه.

هل تعمل الإضافة مع جميع قوالب بلوجر؟

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

ابدأ بعدد محدود من الأقسام وعناوين دقيقة، ثم راجع التجربة من منظور الزائر. وللاطلاع على موضوع مرتبط بإدارة المدونة، يمكنك قراءة حماية مدونة بلوجر وأرباحها.

رؤية تقنية