إضافة ترقيم الصفحات بشكل إحترافى

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

1 - القالب / تحرير الـ HTML / إضغط على Ctrl+f وإبحث عن الكود التالى

b:includable id='mobile-index-post' var='post'>

ستجده مثل الصورة التالية

2 - ضع الكود التالى قبلة مباشرة ستجد الكود مثل الصورة المظلل عليه

<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}</script>
<script src='http://awesome-navigation.googlecode.com/
files/onlinetrick.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

تخصيص
اللون       وهو عدد الصفحات التى تظهر فى الرئيسية 
اللون       وهو عدد تنقل الصفحات ويفضل عدم التغيير 

3 - مرة أخرى إبحث عن هذا الكود بنفس طريقة الخطوة الأولى 

<b:include name='nextprev'/>

ولكن هذة الخطوة سنقوم بإستبداله بهذا الكود 

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</b:if>

4 - وهى الخطوة الأخيرة وهو الجزء الخاص بـ الـ Css
قم بالبحث عن هذا الكود ]]></b:skin> وضع قبلة مباشرة الكود التالى

#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
     margin: 0 5px 0 0;
     padding: 2px 10px 3px;
     text-decoration: none;
     color: #fff;
     background: #e06666;
     -moz-border-radius: 2px;
     -khtml-border-radius: 2px;
     -webkit-border-radius: 2px;
     border-radius: 2px;
     -webkit-transition: all .3s ease-in;
     -moz-transition: all .3s ease-in;
     -o-transition: all .3s ease-in;
     transition: all .3s ease-in;
}
#blog-pager a:visited, .pagenavi a:visited {
     color: #fff;
}
#blog-pager a:hover, .pagenavi a:hover {
     color: #fff;
     text-decoration: none;
     background: #000;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
     color: #fff;
     text-decoration: none;
     background: #000;
}
.pagenavi .pages, .pagenavi .current {
     font-weight: bold;
}
.pagenavi .pages {
     color: #fff;
     background: #e06666;
}

5 -  قم بحفظ القالب ومبروك ترقيم الصفحات أى إستفسار قم بكتابته . 

منشورة في: اضافات بلوجر