تقسيم موضوع على تلات صفحات لبلوجر

السلام علسكم ورحمة الله تعالى وبركاته أعزائي المتابعين نعود إليكم من جديد بعد غياب طويل عن التدوين والحواسيب بصفة عامة ودائما مع الجديد ... 

تدوينة اليوم مصنفة في قسم إضاافات بلوجر ... بعنوان تقسيم موضوع إلى صفحات متعددة 

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

الآن ننتقل لشرح كيفية عمل دلك .. 

في صفحة إنشاء موضوع ,, نفتح تبويب HTML ونضيف الكود التالي :

معاينة

<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>

* المحتوى المحدد بالأصفر ضع به الموضوع

ربما تكن لدي فكرة أن تعدل على الكود بإضافة صفحة اخرى (الكود يقبل فقط ثلاث صفحات)، وأضنها كافية أي إستفسار فتعليقاتكم مرحب بها