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


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


نشارك معكم اليوم إضافة من إضافات بلوجر إضافة فريدة وجديدة يمكن إستخدامها في مدونات بلوجر وفي أي موقع يدعم صفحات الويب بصيغة 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>



شارك الموضوع :

ليست هناك تعليقات:

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

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

صفحة >>> سياسة الخصوصية Privacy Policy

اي مشكلة >>> contact اتصل بنا
خريطة الموقع >>> site map
جميع الكورسات >>> all course

لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"

التسويق Marketing

4/Marketing