إضافة صندوق قابل للطي [Spoiler] في مواضيع بلوجر أو صفحات المواقع الإلكترونية

سبتمبر 24, 2021

اليلام عليكم، اليوم سأقدم لكم ضمن سلسلة دروس تطوير بلوجر طريقة إضافة صندوق قابل للطي [Spoiler] في مواضيع بلوجر بستايل مميز وبسيط وبدون أي سكربتات، هذه الإضافة تم إنشاءها فقط بلغتي CSS و HTML أي لن تحتاج لإضافة أكزاد جافا سكربت أو روابط خارجية والتي قد تتسبب ببطء سرعة تصفح الموقع.

إقرأ أيضا: كيفية إعداد مدونة بلوجر على نطاق فرعي (دومين فرعي) مخصص .

طريقة عمل الإضافة نفس طريقة عمل إضافة صندوق محتوى المواضيع (Table of Contents) باستثناء أنه يمكنك إضافة أي محتوى داخل هذا الصندوق ووضعه في أي مكان في صفحة الموضوع أي في أي صفحات ثابتة على بلوجر أو حتى على مواقع تعمل على منصات إدارة محتوى آخر.

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

مثال للنتيجة

تنبيه: لاتنسى أخذ نسخة إحتياطية للقالب قبل تطبيق هذا الدرس، كي تتمكن من إستعادة القالب في حال ظهور أي مشاكل أو أخطآء بعد تطبيق هذا الدرس.

إقرأ أيضا: شرح تركيب تعليقات Disqus مع خاصية التحميل الكسول (Lazy Loading).

كيفية إضافة صندوق قابل للطي [Spoiler] في مواضيع بلوجر

الخطوة الأولى: نسخ كود CSS أدناه وإضافته لكود Style الخاص بمدونتك.


  input {
  display: none;
}
.tocInner,
.spoiler {
  border: 1px solid #666;
  padding: 25px 15px;
  margin: 30px 0;
  font-size: 15px;
}

/* Article ToC */
.tocInner,
.spoiler {
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-align: right;
  border-left: 0;
  border-right: 0;
  padding: 0 15px;
  margin: 15px 0;
  font-size: 15px;
}
.tocInner .tocTitle,
.spoilerTitle {
  outline: 0;
  padding: 10px 0;
  margin: 10px auto;
  font-weight: 700;
  color: #444;
  display: flex;
  align-items: center;
  font-size: 24px;
  text-align: right;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
}
.tocInner .tocTitle:after {
  content: "إخفاء الك";
  font-weight: 400;
  font-size: 16px;
  color: #111;
  margin-right: auto;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
}
.tocInner .tocContent,
.spoilerContent {
  max-height: 1000vh;
  margin: 0 20px;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  overflow: hidden;
}
.tocInner .tocInput:checked ~ .tocContent {
  max-height: 0;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
}
.tocInner .tocInput:checked ~ .tocTitle:after {
  content: "إظهار الكل";
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
}
.tocInner a {
}
.tocInner ol,
.tocInner ul {
  padding: 0;
  list-style: none;
  font-size: inherit;
  font-weight: 400;
  counter-reset: toc-count;
  line-height: 1.8em;
}
.tocInner li {
  display: flex;
  flex-wrap: wrap;
}
.tocInner li ol,
.tocInner li ul {
  width: 100%;
  padding-right: 26px;
  margin-bottom: 10px;
  margin-top: 5px;
}
.tocInner li a:before,
.tocInner li span:before {
  content: counters(toc-count, ".") ".";
  counter-increment: toc-count;
  display: inline-block;
  min-width: 20px;
  margin-right: 5px;
  flex-shrink: 0;
  font-weight: 400;
}
/* Article Spoiler */
.spoilerTitle label {
  margin-right: auto;
  color: #fefefe;
  background-color: #0164f9;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 400;
}
.spoilerTitle label::before {
  content: "إظهار الكل";
}
.spoilerContent {
  max-height: 0;
}
.spoilerInput:checked + .spoilerTitle label:before {
  content: "إخفاء الكل";
}
.spoilerInput:checked ~ .spoilerContent {
  max-height: 1000vh;
}
.spoilerinput: checked ~.spoilerContent>
p {
  margin-bottom: 5px !important;
}
.spoiler p {
  font-size: 1.2em;
  line-height: 1.6em;
  font-weight: normal;
  margin: 20px auto;
}

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


<div class='spoiler'>
  <input class='spoilerInput hidden' id='spoiler-01' type='checkbox' />
  
  <div class='spoilerTitle'>
    <!--[ عنوان الصندوق ]-->
    <b>المحتوى: </b>
    <label for='spoiler-01'></label>
    
  </div>
  
  <!--[ محتوى الصندوق ]-->
  <div class='spoilerContent'>
  <!--[ ضع هنا المحتوى الذي تريده داخل الصندوق ]-->
  </div>
</div>

إقرأ أيضا: أفضل نسخة معربة لقالب Median UI ميديان - أفضل قالب بلوجر على الإطلاق (للتحميل)

ملحوظة : بإمكانك إضافة أكثر من صندوق في الموضوع الواحد، شريطة أن تعدّل الآي دي للصندوق الثاني ليكون مختلف عن الآي دي id='spoiler-01'الخاص بالصندوق أو الصناديق الأخرى. ولاتنسى تعديله في <label for='spoiler-01'></label>