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

زينو ثك
زينو ثك
زينو ثك

مدون و مطور يسعى لتقديم محتوى ( دروس، قوالب، إضافات،دروس تعليمية...) بلوجر يحتاجه كل مدون أو مطور التي من ٱسسها أن تساهم و تدعم المدون و المطور في ترقية محتوى بلوجر (العربي) .

2 وقت القراءة

أداة الاكورديون تعد من الأدوات أو الاضافات التي تزين مدونتك , فقد نراها أحيانا في مواقع الهبوط بحيث تضع كـ أسئلة شائعة , مميزات , الخ... 

ففي هذا المقال سوف أشرح لك كيفية تركيبها واستخدامها في مدونتك بالاضافة الأادة تم بنائها ب html و css بدلا من Jquery والتي قد تأثر على سرعة مدونتك .

شرح طريقة التركيب :

أولا ستذهب الى بلوجر ثم المظهر ثم تعديل HTML ثم ابحث عن /b:skin والصق الكود التالي فوقه :

 .accordian_znthec{padding:0;display:block;margin:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.accordian_znthec input{display:none}.accordian_znthec label{margin:4px auto;display:block;padding:0 10px;height:50px;overflow:hidden;cursor:pointer}.accordian_znthec label p{background:-o-linear-gradient(42deg,#969cfd,#3d5afe)!important;background:linear-gradient(48deg,#969cfd,#3d5afe)!important;color:#fff;padding:10px;display:block;border-radius:3px;width:100%;height:45px;-webkit-box-shadow:0 2px 4px rgb(0 0 0 / 18%);box-shadow:0 2px 4px rgb(0 0 0 / 18%);font-size:15px;margin:3px!important}.accordian_znthec label p:before{content:'\f07e';font-family:FontAwesome!important;margin-left:5px;vertical-align:-2px}.accordian_znthec label span{color:#000;width:98%;font-size:15px;margin:5px auto;text-align:right;padding:5px;max-height:0;overflow:hidden;display:block;-webkit-transition:all 1s;-o-transition:all 1s;transition:all 1s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:3px}.accordian_znthec input:checked ~ label{height:auto;overflow:hidden}.accordian_znthec input:checked ~ label p:before{content:'\f07d';font-family:FontAwesome!important;margin-left:5px;vertical-align:-2px}.accordian_znthec input:checked ~ label span{max-height:200vh}

لون الأداة , قم بالبحث و تغيير هذا اللون linear-gradient(48deg,#969cfd,#3d5afe)

بعدا لصقك للكود السابق قم بعمل حفظ تعديلات ,ثم أنشئ صفحة للتجربة و ألصق الكود التالي وقم ببعض التعديلات التالية :

<div class='accordian_znthec'>
<input type='radio' name='tab_zn' id='tab_zn' />
<label for='tab_zn'>
<p>هذا النص هو مثال لنص يمكن أن يستبدل</p>
<span>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى
  </span>
</label> 
</div>
<div class='accordian_znthec'>
<input type='radio' name='tab_zn' id='tab_zn1' />
<label for='tab_zn1'>
<p>هذا النص هو مثال لنص يمكن أن يستبدل</p>
<span>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى
  </span>
</label> 
</div>
<div class='accordian_znthec'>
<input type='radio' name='tab_zn' id='tab_zn2' />
<label for='tab_zn2'>
<p>هذا النص هو مثال لنص يمكن أن يستبدل</p>
<span>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى
  </span>
</label> 
</div>

بعد تركيبك للأكواد السابقة ستلاحظ كل <input id='tab_zn1' /> و <label for='tab_zn1'> بمعنى كل lable و input لهم معرف خاص بهم لذلك قم بجعل id='tab1' و for='tab1' لهم نفس المعرف ,اذا أرادت اضافة أكثل من أكورديون قم بنسخ الكود التالي ولا تنسى تغيير المعرف وجعله نفسه ومختلف عن معرف أكورديون السابقين ,بمعنى كل اكوردين له معرف خاص ومختلف عن الأخر...

لاضافة أكورديون جديدة : 

<input type='radio' name='tab_zn' id='tab_zn' />
<label for='tab_zn'>
<p>هذا النص هو مثال لنص يمكن أن يستبدل</p>
<span>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى
  </span>
</label> 
</div>
وهنا ينتهي المقال أتمنى أن ينال اعجابكم هذا المقال حسب طلب أحد المتابعين ,لذلك اذا أردت طلب موضوع أتركه في التعليقات أو واجهتك مشكلة قم بتركها في التعليقات أو اتصل بنا .

زينو ثك
زينو ثك
مسؤول
زينو مدون و مطور يسعى لتقديم محتوى ( دروس، قوالب، إضافات،دروس تعليمية...) بلوجر يحتاجه كل مدون أو مطور التي من ٱسسها أن تساهم و تدعم المدون و المطور في ترقية محتوى بلوجر (العربي) .