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

شرح اداة اكورديون Accordion في بلوجر

كيفية انشاء قائمة منسدلة Accordion داخل مقال بلوجر

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

ماهي اداة الاكورديون  Accordion

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

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

ويتم الاستعانة بخاصية اكورديون داخال المقال في الغالب اثناء طرح الاسئلة الشائعة و المتداولة ومباشرة بعد النقر على القائمة المنسدلة Accordion تجد داخل صندوق الاداة الجواب الذي يكون مخفيا. 

لماذا عليا استعمال قائمة اضافة أكورديون Accordion

بغض النظر عن الجانب الجمالي لاداة اكورديون داخل مقال بلوجر، فإن الأداة تعتبر شيء أساسي و ضروري داخل بعض المقالات و التي يكون دورها متمثلا فيما يلي:

1. الاستعانة باداة اكورديون في تقديم شروحات للخدمات المقدمة من طرف صاحب الموقع او المتجرالتي تقدمها بإختصار تام.
2. الإجابة على الأسئلة كثيرة التداول و الشائعة بطريقة منظمة وسلسة.
3. توفير مساحة كبيرة و كافية داخل مقال بلوجر
4. تنظيم محتوى المقال بطريقة رائعة و جذابة.
5. تحسين تجربة المستخدم و هذا بإضفاء جمالية على المدونة بشكل اكورديون المنسدل و الجذاب

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

1- تحرير قالب HTML مع اخذ نسخة إحتياطية منه للرجوع اليها في حالة الخط

 الاماكن المؤشر عليها باللون الأحمر هي التي يتم إستبدالها بحسب ما تريد، سواء نصوص html أو كتابة عادية

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>

.acc-tool{display: flex;flex-direction: column;width: 100%;text-align: right;direction: rtl; margin: 5px 0;border-radius: 5px;overflow: hidden;box-shadow: 0 1px 5px #999;border: solid 2px #388E3C;background-color: #388E3C;}
.acc-item{display: flex;flex-direction: column;width: 100%;border-bottom: solid 1px #ffffff20;}
.acc-item:last-child{border: 0;}
.acc-item .acc-title{display: block;justify-content: space-between;align-items: center;padding: 10px;font-weight: bolder;cursor: pointer;color: #fff;line-height: 20px;}
.acc-item .acc-title:after{display: inline-block;content: "\276F";transition: .3s ease-out;font-size: 20px;float: left;font-family:sans-serif;}
.acc-item .acc-content{padding: 10px;display: none;background-color: #eee;color: #000;}
.acc-down .acc-title{background-color: #2E7D32;}
.acc-down .acc-title:after{transform: rotate(-90deg);}

<script>
//<![CDATA[
var only_one = true;
$(".acc-item .acc-title").each(function() {
    var c = $(this),
        n = c.parent(),
        a = n.find(".acc-content");
    c.click(function() {
        n.hasClass("acc-down") ? (n.removeClass("acc-down"), a.slideUp()) : (only_one && $(".acc-down").each(function() {
            $(this).removeClass("acc-down"), $(this).find(".acc-content").slideUp()
        }), n.addClass("acc-down"), a.slideDown())
    })
});
//]]>
</script>

5- حفظ القالب و الانتقال الى الخطوة التالية للتحرير داخل محرر المقالات

<div class="acc-tool">
  <!-- يمكنك زيادة عدد التبويبات كما تريد -->
    <div class="acc-item">
    <div class="acc-title">سؤال</div>
    <div class="acc-content">محتوى HTML</div>
  </div>
    <div class="acc-item">
    <div class="acc-title">سؤال</div>
    <div class="acc-content">محتوى HTML</div>
  </div>
    <div class="acc-item">
    <div class="acc-title">سؤال</div>
    <div class="acc-content">محتوى HTML</div>
  </div>
  </div>

في نهاية هذا المقال نتمنى أن نكون قد وفقنا في تقديم شرح مبسط و عملي عن طريقة اضافة قائمة منسدلة عن طريق اداة اكورديون Accordion css js html