هذه الإضافة مناسبة جدًا لمدونات بلوجر الاخبارية والتقنية وخصيصًا لمن يكتبوا شروحات ومقالات طويلة مثل مراجعات الهواتف الذكية أو التي تحتاج إلى شرح كثير. بدلًا من أنّ تكتب مقال طويل، يُمكنك أنّ تُقسمه إلى عدة اجزاء وبالتالي سوف توفر مساحة ولن تجعل الزائر يُصاب بالملل وهو يقرأ المقال. دعونا نتعرف على طريقة التركيب.
معاينة
تقسيم محتوى المقال إلى صفحات مُتعددة
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>
الآن قم بنشر المقال لرؤية النتائج.
وهكذا قد نكون أنتهينا من التعرف على كيفية تقسيم محتوى المقال إلى عدة صفحات بتقنية السلايدر، والتي قد تكون مُفيدة للكثير من المدونين، بالتوفيق.
Original Article