مرحباً بكم مرة اخري متابعينا الاعزاء في مدونة كوليكا ويب موضوع اليوم عن اضافة جميلة جداً و هي تقسيم الموضوع لصفحات في مدونات بلوجر اليوم معانا سكربت بسيط و مش معقد محتاج بس تركيز بسيط يلا بينا ♥

اولا إبحث في القالب على </head> وضع الكود التالي فوقه مباشرة:

<b:if cond='data:view.isPost'>
<style type="text/css">
/*<![CDATA[*/
/*=====================================
= Page Navigation
=====================================*/
div#pager-body-out br:first-of-type{display:none}
#pager-body-out a:hover{text-decoration:underline}
#pager-body-out a{color:#2c82c9}
.page-navigation{position:relative;clear:both;overflow:hidden;margin-top:15px;padding:25px}
#pager-page-number{padding-top:5px}
#pager-prev{float:right;border-radius:0 5px 5px 0}
#pager-next,#pager-prev{background:#fff;display:inline-block;cursor:pointer;margin:3px!important;-webkit-box-shadow:0 1px 3px 1px rgba(60,64,67,0.15),0 1px 2px 0 rgba(60,64,67,0.3);box-shadow:0 1px 3px 1px rgba(60,64,67,0.15),0 1px 2px 0 rgba(60,64,67,0.3);border-radius:50px}
.pager-next-prev a{display:block}
#pager-prev span:nth-child(1){float:left;font-size:15px;line-height:36px;position:relative;padding:4px 25px 2px 15px}
#pager-prev span:nth-child(1):before{top:0;right:-11px;content:"\f105";font-family:fontawesome;background-color:#0c37de;color:#ffffff;padding:8px 0;width:25px;height:25px;line-height:11px;display:inline-block;border-radius:100px;text-align:center;font-size:14px;position:relative;transition:all 0.3s ease;margin-left:4px}
#pager-next span:nth-child(1):before{top:0;left:-81px;content:"\f104";font-family:fontawesome;background-color:#0c37de;color:#ffffff;padding:8px 0;width:25px;height:25px;line-height:11px;display:inline-block;border-radius:100px;text-align:center;font-size:14px;position:relative;transition:all 0.3s ease;margin-left:4px}
.pager-next-prev span{font-size:30px;color:#585858}
#pager-prev span:nth-child(2){float:right;line-height:45px}
#pager-next{float:left;margin:0}
#pager-next span:nth-child(1){float:right;font-size:15px;line-height:35px;padding:3px 0 3px 52px;position:relative}
#pager-next span:nth-child(2){float:left;line-height:45px}
#pager-page-number{text-align:center;color:#ffffff;font-size:17px;line-height:30px;display:block;margin:0 auto;width:43px;height:42px;background:#0c37de;border-radius:50px;border:1px solid #ddd}
#pager-next:hover,#pager-prev:hover{background:#0c37de}
#pager-next span,#pager-prev span{color:#0c37de}
#pager-next:hover span,#pager-prev:hover span,#pager-next:hover span:before,#pager-prev:hover span:before{color:#fff}
#pager-next,#pager-prev{transition:all 0.3s}
#pager-next:hover span:before,#pager-prev:hover span:before{background:#fff;color:#0c37de}
/*]]>*/
</style>
</b:if>

ثانيا إبحث في القالب على </body> وضع الكود التالي فوقه مباشرة:

<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".page-navigation").each(function(){if($(".post-body").html().match("_split")){var a=function(a){var b,c,d=decodeURIComponent(window.location.search.substring(1)),f=d.split("&");for(c=0;c<f.length;c++)if(b=f[c].split("="),b[0]===a)return!(void 0!==b[1])||b[1]},b=a("page"),c=$("#pager-next"),d=$("#pager-prev"),e=$(".post-body2").prop("innerHTML").split("_split"),f=$(this);f.show(),$(".post-body").remove();var g=$("#pager-body-out"),h=$("#pager-page-number");if(void 0===b||1==b)d.hide(),c.find("a").attr("href","?page=2"),g.html(e[0]),h.html("1");else{b=parseInt(b),e.length<=b&&c.hide();var i=b+1,j=b-1;c.find("a").attr("href","?page="+i),d.find("a").attr("href","?page="+j),g.html(e[j]),h.html(b)}}})});
//]]>
</script>
</b:if>

ثالثا نبحث في القالب على <data:post:body/> ستجده مكرر اكثر من مرتين لانه يوجد في قوالب الاولى مخصصة لصفحة الرئيسية و الثانية لصفحة الموضوع و الثالثة لصفحات حسب القالب

عندما تجدها سوف تجد معها div هكذا

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'><data:post.body/></div>

ضع الكود التالي اسفل هذا الكود يعني اسفل الـ </div>

<b:if cond='data:view.isPost'>
<div class='content-post' id='pager-body-out'/>
<div class='page-navigation' style="display:none">
<div class='pager-next-prev' id='pager-prev'>
<a><span>
السابق
</span><span class='siki-prev'/></a></div>
<div class='pager-next-prev' id='pager-next'>
<a><span>
التالي
</span><span class='siki-next'/></a></div>
<div id='pager-page-number'/>
</div>
</b:if>

الان احفظ القالب وإذا اردت اضافة تقسيم لموضوع تذهب الى الموضوع وتضع هذا الكود بين كل تقسيم تريده _split

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

ملاحظة الكود عند نسخه من هذا الموضوع ضعه في نوتباد او اكتبه لكي تتجنب نقل اكواد اخرا معه

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

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

ثالثا نبحث في القالب على <data:post:body/> ستجده مكرر اكثر من مرتين لانه يوجد في قوالب الاولى مخصصة لصفحة الرئيسية و الثانية لصفحة الموضوع و الثالثة لصفحات حسب القالب

عندما تجدها سوف تجد معها div هكذا

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'><data:post.body/></div>

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

ملاحظة الكود عند نسخه من هذا الموضوع ضعه في نوتباد او اكتبه لكي تتجنب نقل اكواد اخرا معه

تحميل التعليقات

صفحات المدونة

Social Items

كوليكا ويب | هدفنا تطوير الويب العربي

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

الاشعارات