أداة إخفاء و إظهار نصوص من المحتوى على بلوجر

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

معاينة الاضافة

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

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

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

طريقة تركيب الاضافة

ملاحظة : لا تنسى أخذ نسخة احتياطية للقالب

1. قم بتسجيل حسابك ثم إذهب إلى منصة البلوجرblogger
2. إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
3. إضغط في وسط محرر الأكواد  ثم   F  + Ctrl لإضهار مربع البحث
4. بإستعمال  الزر  C  + Ctrl  للنسخ و  V  + Ctrl  للصق قم بوضع الأكواد في المكان المناسب

قم بالبحث عن هذا الوسم

]]></b:skin> اضغط للتحديد

فوقه أي قبله قم بوضعcss.كود

.accordion{background-color:#eee;color:#444;cursor:pointer;padding:18px;width:100%;text-align:center;outline:none;font-size:17px;transition:.4s;border: 1px #a9a9a9c9;border-style: outset;}
.active2,.accordion:hover{background-color:#fd9e9e6e;}
.accordion:after{content:'\25BC';color:#777;font-weight:700;float:right;margin-left:5px}
.open:after{content:"\25B2"}.panel{padding:0 18px;background-color:#fff;max-height:0;overflow:hidden;transition:max-height .2s ease-out;border: 1px solid #a2a2a2;text-align: center;}

الخطوة الثانية

قم بالبحث عن هذا الوسم

</body> اضغط للتحديد

فوقه أي قبله قم بوضع js.كود

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

طريقة كتابة النص

اضف كود html.كود الى موضوعك الجديد

<button class="accordion">النص الاول</button>
<div class="panel">
<p>
اكتب النص هنا
<p/>
</div>

<button class="accordion">النص الثاني</button>
<div class="panel"> 
<p>  
اكتب النص هنا
<p/>
</div>

<button class="accordion">النص الثالث</button>
<div class="panel">
<p>
اكتب النص هنا
<p/>

يمكنكم اضافة المزيد

لتغيير لون الخلفية قم بتغيير هذا اللون

#ce9efd82 اضغط للتحديد

.active2, .accordion:hover {
	background-color: #ce9efd82;
}

• 
  بهذا ينتهي الدرس، أي إستفسار أترك تعليق في الأسفل أو إتصل بنا وإن شاء الله سنكون في عونكم.
  

إضافات بلوجر