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

إضافة سكيما مخطط الأسئلة الشائعة في منشورات Blogger
شرح اداة اكورديون Accordion في بلوجر

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

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

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

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

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

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

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

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

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

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

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

    شرح مقدم من طرف الجعبة التقنية

    هذا المكان خاص بعرض محتوى HTML ويمكن ادراج أي شيء تريد هنا سواء عناوين أو فقرات كذلك

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

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

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

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

    2- اضافة مكتبة جيكويري Jquery تحت الوسم <head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>
    

    3- وضع كود css فوق الوسم   ]]></b:skin>

    
    .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);}

    4- وضع كود الجافا سكريبت js فوق الوسم </body>
    <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- حفظ القالب و الانتقال الى الخطوة التالية للتحرير داخل محرر المقالات

    6- اضافة كود html داخل محرر المقالات و التحكم في التبويبات كما تشاء
    
    <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

    أبو حسام الدين
    بواسطة : أبو حسام الدين
    مدون عربي مهتم بجديد تطبيقات وهواتف الأندرويد
    تعليقات



      حجم الخط
      +
      16
      -
      تباعد السطور
      +
      2
      -