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

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

هذا السكربت غير موجود في اي مكان ماعدا قالب سكويز فقط و انا جابته لكم بشكل مجاني و غير مشفر "لا تسألوني من اين جلبته" في البداية يجب ان نقف عند نقطة مهمة جدا القوالب الجديدة اغلبها تشتغل على حاصية amp و هي القوالب المسرعة او السريعة و توجد القوالب الاخرى العادية.

لذلك سوف اضع السكربت مجهز للقوالب amp و القوالب الاخرى بدون تعديل اذا لم يشتغل يمكنك طلب المساعدة .

ملاحظة اذا اردت التحقق من ان الاضافة تشتغل قم بإنشاء موضوع جديد او قديم بعد كل فقرة ضع هذا الرمز <><>

ضعه ثلاتة مرات يعني ثلاثة صفحات و من ثم ركب الاكواد لتقوم بالمعاينة على هذا الموضوع اتمنى ان تصل الفكرة

الان الى طريقة التركيب قبل كل شيئ خد نسخة احتياطية من القالب تحسبا للخطأ

ثم ابحث عن وسم b:skin سوف تجد اثنين منه فالتاني هو المطلوب ضع فوقه كود css هذا

.post-pages{position:relative;clear:both;overflow:hidden;margin-top:15px}
.post-pages:before{content:"";background-color:#eeeeee;height:5px;position:absolute;width:100%;top:15px}
a.next-page,a.prev-page{z-index:1;background-color:#ffffff;position:relative;border:2px solid #d24949;border-radius:100px;color:#d24949}
a.next-page:hover,a.prev-page:hover{border:2px solid #9e44c9;color:#9e44c9}
a.next-page:hover:before,a.prev-page:hover:before{background-color:#9e44c9}
.rtl a.prev-page{margin-right:10px;-webkit-box-shadow:10px 0 0, -20px 0 0 #FFF;box-shadow:10px 0 0, -20px 0 0 #FFF;float:right;padding:5px 10px 5px 15px}
.ltr a.prev-page{margin-left:10px;-webkit-box-shadow:-10px 0 0, 20px 0 0 #FFF;box-shadow:-10px 0 0, 20px 0 0 #FFF;float:right;padding:5px 10px 5px 15px}
.rtl a.next-page{margin-left:10px;-webkit-box-shadow:-10px 0 0, 20px 0 0 #FFF;box-shadow:-10px 0 0, 20px 0 0 #FFF;float:left;padding:5px 15px 5px 10px}
.ltr a.next-page{margin-right:10px;-webkit-box-shadow:10px 0 0, -20px 0 0 #FFF;box-shadow:10px 0 0, -20px 0 0 #FFF;float:left;padding:5px 15px 5px 10px}
a.next-page:before,a.prev-page:before{font-family:fontawesome;background-color:#d24949;width:21px;height:21px;border-radius:100px;text-align:center;color:#ffffff;font-size:16px}
.rtl a.next-page:before{content:"\f104"}
.rtl a.prev-page:before{content:"\f105"}
.ltr a.next-page:before{content:"\f105"}
.ltr a.prev-page:before{content:"\f104"}
a.next-page:before{float:left;margin-right:10px}
a.prev-page:before{float:right;margin-left:10px}

جميل الان الان قم بالبحث عن وسم data:post.bod يوجد اكثر من ثلاثة غالب هو الثالث او الرابع جرب حتى تجده ضع اسفله هذا الكود الخاص ب html

<div class='post-pages'></div>

الى الان قمنا بتركيب الاكواد الثانوية الان سوف نضع كود javascript المسؤول عن تقسيم المواضيع هو من سوف تقومون بتجربته اذا كنت تتوفر على قالب جديد بخاصية amp قم بثركيب هذا السكربت فوق وسم body الموجود في اخر القالب

<script type='text/javascript'>
/*<![CDATA[*/
          var postBody = document.querySelector('.amp-content'),
              PostPages = postBody.innerHTML.split('<><>'),
              currPage = 1,
              Pagin  = new String();
          document.querySelector('.post-outer').classList.add('divided-post');
          location.search.replace('?','').split('&').forEach(function(par){ 
            if(par.split('=')[0]==='page'){ currPage=parseInt(par.split('=')[1]); }
          });
          postBody.innerHTML = PostPages[currPage-1];
          if( (currPage) !== PostPages.length ){ Pagin += '<a class="next-page" href="?page='+ (currPage+1) +'" data-trans="2">التالي</a>';}
          if( currPage !== 1 ){ Pagin += '<a class="prev-page" href="?page='+ (currPage-1) +'" data-trans="3">السابق</a>'}
          document.querySelector('.post-pages').innerHTML = Pagin;
  /*]]>*/
</script>

اما اذا لم يشتغل الكود الاول جرب الكود التاني و سوف يشتغل بإذن لله

<script type='text/javascript'>
/*<![CDATA[*/
          var postBody = document.querySelector('.post-body'),
              PostPages = postBody.innerHTML.split('<><>'),
              currPage = 1,
              Pagin  = new String();
          document.querySelector('.post-outer').classList.add('divided-post');
          location.search.replace('?','').split('&').forEach(function(par){ 
            if(par.split('=')[0]==='page'){ currPage=parseInt(par.split('=')[1]); }
          });
          postBody.innerHTML = PostPages[currPage-1];
          if( (currPage) !== PostPages.length ){ Pagin += '<a class="next-page" href="?page='+ (currPage+1) +'" data-trans="2">التالي</a>';}
          if( currPage !== 1 ){ Pagin += '<a class="prev-page" href="?page='+ (currPage-1) +'" data-trans="3">السابق</a>'}
          document.querySelector('.post-pages').innerHTML = Pagin;
  /*]]>*/
</script>

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

الى هنا اترككم الى موضوع جديد اخر انشألله مع السلامة