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

درس اليوم في Micro Elnems سوف يكون عبارة عن إضافة تستطيع من خلالها تنسيق مقالاتك وتقسيمها إلى عدة اجزاء بشكل احترافي وسلس، وهي شبيهة بإضافات السلايدر ولكن هذه المرة لن يكون السلايدر في الصفحة الرئيسية بل داخل المواضيع.

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

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

 

تقسيم محتوى المقال إلى صفحات مُتعددة

1. توجه إلى لوحة تحكم بلوجر> انتقل على تبويب قالب>اضغط على تحرير HTML> ابحث عن الوسم التالي ]]></b:skin> وأضف الكود التالي فوقه.

/* Multiple Page Slide */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 40px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{direction: rtl;float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px}

2. قم بنسخ الكود التالي فوق الوسم </body>. 

<script type='text/javascript'>
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script>

لإضافة صفحات أكثر قم بتغيير maxIndex=4 إلى الرقم الذي تريده.
3. الآن قم بحفظ القالب.

الخطوة التالية، عند انشاء موضوع جديد قم بنسخ الكود التالي في وضع HTML 

<div class="next-wrap">
  <div id="photocons" class="instruction">
    <div class="slidecontentWrap">
      <div class="slidecontent">
        <-- هُنا يتم كتابة المحتوى -->
      </div>
      <div class="slidecontent">
        <-- هُنا يتم كتابة المحتوى -->
      </div>
      <div class="slidecontent">
        <-- هُنا يتم كتابة المحتوى -->
      </div>
      <div class="slidecontent">
        <-- هُنا يتم كتابة المحتوى -->
      </div>
      <div class="slidecontent">
        <-- هُنا يتم كتابة المحتوى -->
      </div>
      </div>
      </div>
      <a class="movepg prever">السابق</a>
      <a class="movepg nexter">التالي</a>
</div>