إضافة موضوع مقسم لثلاثة صفحات

إضافة موضوع مقسم لثلاثة صفحات

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

 معاينة

معاينة

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

1. مباشرة إضافة موضوع

2. إنتقل لتبويب HTML

3. ضع الكود التالي به

 

 <style>
.post-pagination {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}
.button_1, .button_2, .button_3 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 6px 36px;
    color:#f4655f;
    transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
    background: none repeat scroll 0 0 #f4655f;
    color: #fff;
    text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>
<div class="content_1">

هنا المحتوى الأول

</div>

<div class="content_2" style="display: none;">

هنا المحتوى الثاني

</div>

<div class="content_3" style="display: none;">

هنا المحتوى الثالث

</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>