إضافة قسم أسئلة شائعة لمدونة بلوجر بشكل رائع

 
نشارك معكم اليوم إضافة من إضافات بلوجر إضافة فريدة وجديدة يمكن إستخدامها في مدونات بلوجر وفي أي موقع يدعم صفحات الويب بصيغة html وذلك يتيح لكم إنشاء قسم اسئلة وأجوبة أو قسم الأسئلة الشائعة وبما يعرف بـ FAQ 

معاينة الأداة

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

1. أنتقل من لوحة تحكم مدونتك إلى المظهر ثم انقر على تحرير html وأبحث عن الرمز </body> وعادةً هو قبل آخر رمز في المظهر بعد العثور عليه أضف الكود التالي فوق الرمز </body> مباشرةً:

<script>
jQuery(function() {
var $ = jQuery;
var faqTitle = $( &quot;.faq h3&quot; );
var answerFaq = $(&quot;.response&quot;);
faqTitle.click(function(e) {
e.preventDefault();
$(this).toggleClass(&#39;titleopen&#39;).next().slideToggle().toggleClass(&#39;open-close&#39;);
});
$( &quot;#showall&quot; ).click(function(e) {
e.preventDefault();
faqTitle.addClass(&#39;titleopen&#39;);
answerFaq.slideDown().addClass(&#39;open-close&#39;);
});
$( &quot;#hideall&quot; ).click(function(e) {
e.preventDefault();
faqTitle.removeClass(&#39;titleopen&#39;);
answerFaq.slideUp().removeClass(&#39;open-close&#39;);
});
});
</script>

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

<style>
.faq_container{
background: #f5f5f5;
padding: 20px;
border: 1px solid #e5e5e5;
border-radius: 10px;
}
 
#show_hide_wrap{
text-align: right;
}
 
#show_hide_wrap p{
font-size: 16px;
}
 
#showall, #hideall{
display: inline-block;
background: #fff;
border: 2px solid rgba(86, 77, 77, 0.18);
padding: 5px 5px;
line-height: 1.5;
margin-bottom: 20px;
font-weight: bold !important;
height: 25px;
}
 
#showall{
 margin-right: 20px;
}
 
#showall:hover, #hideall:hover{
background: #707070;
color: #fff;
}
 
.response{
display: none;
}
 
ul.faq, ul.faq li{
list-style: none !important;
}
 
.faq h3{
background: #fff;
padding: 10px 10px;
border: 1px solid #e5e5e5;
}
 
.faq h3:hover, .faq h3.titleopen{
background: #808080;
color: #fff;
}
 
.faq h3:after{
content: '+';
float: left
}
 
.faq h3.titleopen:after{
content: '-'
}
 
.faq_qtn{
cursor: pointer;
-webkit-transition: color .2s ease, background .2s ease;
-moz-transition: color .2s ease, background .2s ease;
-o-transition: color .2s ease, background .2s ease;
transition: color .2s ease, background .2s ease;
}
 
.para {
padding-top: 20px;
padding-right: 30px;
font-size: 18px;
text-align: justify;
line-height: 30px;
padding-left: 30px;
}
</style>

<div class="faq_container">
<div id="show_hide_wrap">
<div id="showall" class="faq_qtn">إظهار الجميع</div>
<div id="hideall" class="faq_qtn">إخفاء الجميع</div>
</div>
<ul class="faq">
<!-- القسم الاسئلة الشائعة Q&A -->
<li>
<h3 class="faq_qtn"> هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>  
<!-- القسم الاسئلة الشائعة Q&A -->
<li>
<h3 class="faq_qtn">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>  
<!-- القسم الاسئلة الشائعة Q&A -->
<li>
<h3 class="faq_qtn">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>
<!-- القسم الاسئلة الشائعة Q&A -->
<li>
<h3 class="faq_qtn">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>
<!-- القسم الاسئلة الشائعة Q&A -->
<li>
<h3 class="faq_qtn">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>
<!-- القسم الاسئلة الشائعة Q&A -->
<li>
<h3 class="faq_qtn">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>
<!-- القسم الاسئلة الشائعة Q&A -->
<li>
<h3 class="faq_qtn">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>
<!-- القسم الاسئلة الشائعة Q&A -->
<li>
<h3 class="faq_qtn">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>
<!-- يمكنك إضافة المزيد من تكرار الكود نفس الاكواد السابقة -->
</ul>
</div>

عدل على النص بالنص الذي ترغب بأن يكون اسئلة شائعة في مدونتك.

يمكنك زيادة عدد الأقسام أو حذفها بإضافة او حذف مثل الرمز ادناه:

<li>
<h3 class="faq_qtn">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</h3>
<div class="response">
<p class="para">هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق..</p>
</div>
</li>

 

هذا ونقول مرحباً بإضافات بلوجر من جديد!