اضافه قائمه الاكورديون الى مدونه بلوجر

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

اضافه قائمه الاكورديون الى مدونه بلوجر

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

وتم تكويد هذه الاضافه بلغتى html وcss ويمكنك معاينه الاضافه من خلال الزر التالى

معاينه

طريقة اضافة الاكورديون الى مدونه بلوجر

1.قم بالدخول الى لوحه التحكم الخاصه بمدونه بلوجر ثم قم باختيار المظهر ثم تعديل html
2.قم بالبحث عن وسم ]]></b:skin> ثم اضف الكود التالى اعلى الوسم     
 /* Accordion */ .Accordion{margin:1.7em 0;font-size:.93rem;font-family:tajawal;line-height:1.7em ;} details.ac{padding:18px 0;border-bottom:1px solid #d8d8d8} details.ac:first-child{border-top:1px solid #d8d8d8} details.ac summary{font-weight:700;cursor:default; display:flex;align-items:baseline; transition:all .1s ease} details.ac summary::before{content:'\203A'; flex:0 0 25px;display:flex;align-items:center;justify-content:flex-start;padding:0 5px; font-weight:400;font-size:1.33rem;color:inherit} details.ac[open] summary{color:#000} details.ac:not(.alt)[open] summary::before{transform:rotate(90deg);padding:0 5px 0 0;justify-content:center} details.ac.alt summary::before{content:'\002B'; padding:0 2px} details.ac.alt[open] summary::before{content:'\2212'} details.ac .aC{padding: 0 25px;opacity: .9;margin-top: 14px;margin-bottom: -10px;}
4.قم بنسخ الكود التالى  وقم باضافته فى صفحة المقال
<div class="Accordion">
  <!--[ Accordion line 1 ]-->
  <details class="ac">
    <summary>هذا النص هو مثال</summary>
    <div class="aC">
      <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class="ac">
    <summary>هذا النص هو مثال</summary>
    <div class="aC">
      <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</p>
    </div>
  </details>
  
  <!--[ Accordion line 3 ]-->
  <details class="ac">
    <summary>هذا النص هو مثال</summary>
    <div class="aC">
      <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</p>
    </div>
  </details>
  
  <!--[ Accordion line 4 ]-->
  <details class="ac alt">
    <summary>هذا النص هو مثال</summary>
    <div class="aC">
      <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</p>
    </div>
  </details>
</div>
3.يمكنك استخدامها فى احدى الصفحات عن طريق استخدام الكود التالى </body> واضف الكود التالي أسفل الوسم
<style>
 /* Accordion */ .Accordion{margin:1.7em 0;font-size:.93rem;font-family:tajawal;line-height:1.7em ;} details.ac{padding:18px 0;border-bottom:1px solid #d8d8d8} details.ac:first-child{border-top:1px solid #d8d8d8} details.ac summary{font-weight:700;cursor:default; display:flex;align-items:baseline; transition:all .1s ease} details.ac summary::before{content:'\203A'; flex:0 0 25px;display:flex;align-items:center;justify-content:flex-start;padding:0 5px; font-weight:400;font-size:1.33rem;color:inherit} details.ac[open] summary{color:#000} details.ac:not(.alt)[open] summary::before{transform:rotate(90deg);padding:0 5px 0 0;justify-content:center} details.ac.alt summary::before{content:'\002B'; padding:0 2px} details.ac.alt[open] summary::before{content:'\2212'} details.ac .aC{padding: 0 25px;opacity: .9;margin-top: 14px;margin-bottom: -10px;}
</style>
<div class="Accordion">
  <!--[ Accordion line 1 ]-->
  <details class="ac">
    <summary>هذا النص هو مثال</summary>
    <div class="aC">
      <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class="ac">
    <summary>هذا النص هو مثال</summary>
    <div class="aC">
      <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</p>
    </div>
  </details>
  
  <!--[ Accordion line 3 ]-->
  <details class="ac">
    <summary>هذا النص هو مثال</summary>
    <div class="aC">
      <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</p>
    </div>
  </details>
  
  <!--[ Accordion line 4 ]-->
  <details class="ac alt">
    <summary>هذا النص هو مثال</summary>
    <div class="aC">
      <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</p>
    </div>
  </details>
</div>


تحميل الاكواد

Accordion.zip 740.00 B

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

الاسم احمد منصور امتلك خبره اكثر من ثلاث سنوات فى مجال التدوين مهتم بمجال التدوين والبرمجه

إرسال تعليق