اضافه موضوع مقسم لاكثر من صفحة


اهلا اصدقائي متابعين مدونة القيسي ويب,انتم تعلمون بانه  جديد بلوجر متوفر دائما عندنا،واليوم توصلت باضافه جديده رائعه ومفيده للكثير من المدونات العربيه،هي عباره عن كود تقوم باضافته يمكنك من خلاله تحويل موضوعك لعدة صفحات،انا انصح استخدامه لمدونات التي تقدم شروحات ومواضيع كتابيه طويله سوف تبدو جميله وتنسق مواضيعهم ،الان اريد ان اقدم لكم معاينه للاضافه 
طريقة تركيب الاضافة
1. يجب عليك التاكد من وجود مكتبة الجاكوري في قالب مدونتك يكون شبيه بالكود التالي،ان لم تجده يجب عليك اضافته بعد <head> مباشرة
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
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>
* المحتوى المحدد بالاصفر ضع به الموضوع
ربما تفكر في التعديل على الكود واضافة صفحات اخرى،لكن نصيحتي استخدم فقط ثلاث صفحات حتى لا تحصل اي مشاكل في الاضافه واظنها كافيه،اي استفسار فتعليقاتكم مرحب بها

اهلا اصدقائي متابعين مدونة القيسي ويب,انتم تعلمون بانه  جديد بلوجر متوفر دائما عندنا،واليوم تو...

روابط الموضوع للنسخ

رابط
HTML
BBCode
يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي
كيف تعلق ؟

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *