طريقة ترقيم الصفحات بطريقة فعالة وحل جميع المشاكل

طريقة  ترقيم الصفحات بطريقة فعالة وحل جميع المشاكل

ترقيم الصفحات Page Navigation widget إضافة هامه لمدونات بلوجر وخصوصا عندما تصبح المدونة بها عدد كبير من المواضيع ويصعب التنقل بها فتأتي إضافة الترقيم لتحل تلك المشكلة لكن كثيير من الإضافات الموجوده بها عدة مشاكل منها تخصيص شكلها أغلب المصممين يجعل الإضافة بلون يتناسب مع مدونته لكن قد لا يتناسب مع الجميع أما إضافتنا يمكنك تخصيص شكلها كما تشاءأيضا مشكلة أخرى في بعض الإضافات وهي عند بلوغ المواضيع حد معين مثلا مئة موضوع تصبح لا تعمل جيداً وتكرر الموضوعات لكن إضافتنا اليوم لا توجد بها تلك المشكلة أيضا مشكلة تظهر مع التسميات أو الأقسام وتجعل المواضيع غير مرتبه لكن بإذن الله سنضع حل هذه المشكلة أيضا لنكون وصلنا لأكبر قدر من حلول المشاكل التي تواجه إضافة ترقيم الصفحات

أولا طريقة إضافة ترقيم الصفحات

 الخطوة الأولى أدخل الى خانة التخطيط في إدارة مدونتكقم بتحرير رسائل المدونة الإلكترونيةوفي خانة عدد الرسائل على الصفحة الرئيسية ضع رقم يناسبك وإعلم أنه سيستخدم في ترقيم الصفحات ايضا
الخطوة الثانية
 أدخل الى تحرير قالبك وطبعا لا تنسى أخذ نسخة إحتياطية 
إبحث عن الوسم </body> وأضف فوقه الكود التالي

&lt;script type=&#39;text/javascript&#39;&gt;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=8;
var upPageWord =&#39;السابق&#39;;
var downPageWord =&#39;التالي&#39;;
&lt;/script&gt;
&lt;script src=&#39;https://cnmu.googlecode.com/svn/trunk/pagenavar.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt;

رقم 5 هو عدد الرسائل في الصفحة إجعله نفس العدد الذي إخترته في الخطوة الاولى
رقم 8 هو عدد الصفحات الظاهر في الإضافة قم بالزيادة أو التقليل حسب عرض مساحة مدونتك
ويمكنك تغيير كلمتي السابق والتالي بما يناسبك

الخطوة الثالثة قم بتوسيع عناصر الستايل بالضغط على سهم التوسيع

 إبحث عن الوسم </b:skin> وأضف فوقه الكود التالي

/* -- number page navigation -- */
.showpageArea {
color:#787D7E;
margin: 10px 5px 3px 5px;
padding: 0px;
float: right;
display: inline;
font-size:13px;
}
.showpageArea a {
background: #DAD8D9;
background: -moz-linear-gradient(top,  #F0F0F0 , #DAD8D9 );
background: -webkit-linear-gradient(top,  #F0F0F0 ,#DAD8D9 );
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
color:#787D7E;
display: inline;
float: right;
border:1px solid #BEBEBE;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px
}
.showpageNum {float:right;}
.showpageNum a {
font-size:13px;
font-weight: bold;
background: #DAD8D9;
background: -moz-linear-gradient(top,  #F0F0F0 , #DAD8D9 );
background: -webkit-linear-gradient(top,  #F0F0F0 ,#DAD8D9 );
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
color:#787D7E;
display: inline;
float: right;
border:1px solid #BEBEBE;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px
}
.showpageNum a:hover {
background: #D1E0E5;
background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5);
background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5);
text-decoration: none;
border:1px solid #BEBEBE;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px
}
.showpagePoint {
font-size:13px;
font-weight: bold;
background: #4A4A4A;
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
color: #FFFFFF;
display: inline;
float: right;
border:1px solid #BEBEBE;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px
}
.showpageOf {
font-weight: bold;
background: #DAD8D9;
background: -moz-linear-gradient(top,  #F0F0F0 , #DAD8D9 );
background: -webkit-linear-gradient(top,  #F0F0F0 ,#DAD8D9 );
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
color:#787D7E;
display: inline;
float: right;
border:1px solid #BEBEBE;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px
}
.showpage a {
background: #DAD8D9;
background: -moz-linear-gradient(top,  #F0F0F0 , #DAD8D9 );
background: -webkit-linear-gradient(top,  #F0F0F0 ,#DAD8D9 );
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
color:#787D7E;
display: inline;
float: right;
border:1px solid #BEBEBE;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px
}
.showpage a:hover {
background: #D1E0E5;
background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5);
background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5);
text-decoration: none;
border:1px solid #BEBEBE;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px
}

هذا الكود #787D7E يخص لون الخط في الإضافة ستجد الاكواد متكرره يجب تعديلها كلهاهذا الكود background: #DAD8D9;
background: -moz-linear-gradient(top,  #F0F0F0 , #DAD8D9 );
background: -webkit-linear-gradient(top,  #F0F0F0 ,#DAD8D9 ); background: -moz-linear-gradient(top,  #F0F0F0 , #DAD8D9 );background: -webkit-linear-gradient(top,  #F0F0F0 ,#DAD8D9 ); background: -moz-linear-gradient(top,  #F0F0F0 , #DAD8D9 );background: -webkit-linear-gradient(top,  #F0F0F0 ,#DAD8D9 ); هو لون خلفية الزر وهو تدرج يتكون من لونين الاول العلوي والثاني السفلي هذا الكود border:1px solid #BEBEBE; هو خاص بحجم ولون الإطار حول الأرقامbackground: #D1E0E5;background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5);background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5);هذا الكود هو تدرج آخر ولكنه الذي يظهر عند مرور الماوسو border:1px solid #ccc; هو لون الإطار عند مرور الماوساما هذا اللون background: #4A4A4A; هو خلفية الصفحة التي تكون موجود بهاوهذا هو لون الخط color: #FFFFFF; أما الرقم radius:2px والمتكرر في كل الأكواد تقريبا هذا إن قمت بزيادته سيصبح الزر اكثر إستدارةلقد شرحت تقريبا أهم الأكواد التي يمكن التعديل عليها أو يمكنك إضافة الكود كما هو إن لم تستطيع تغيير الألوان

حل مشكلة الترقيم والتسميات

تحدثنا في البداية عن وجود مشكلة بين الترقيم والتسميات عند دخول احد الاقسام تكون أعداد المواضيع بعكس المحدد في الترقيم وللتخلص من تلك المشكلةنبحث عن الكود التالي وتذكر ان تكون مؤشر على خانة توسيع العناصر

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

ونستبدله بهذا الكود

<script type='text/javascript'>
  var lblname = &quot;<data:label.name/>&quot;;
  lblname2 = encodeURIComponent(lblname);
  var feedlink = &#39;/search/label/&#39; + lblname2+&#39;?&amp;max-results=5&#39;;
  document.write(&#39;&lt;a href=&quot;&#39; + feedlink + &#39;&quot;&gt;&#39;+lblname+&#39;&lt;/a&gt;&#39;);
</script>

رقم 5 هو عدد المواضيع إختر نفس الرقم في المرحلة الأولى 

ملحوظة قد يكون الكود متكرر أكثر من مرة يجب تغييرها جميعا
وهذا سيكون مختص بآداة التسميات وإن لم تكن موجوده لديك لن تجد الكود
أما بالنسبة للتسميات التي تكون داخل الموضوع
فإبحث عن الكود التالي وإستبدله بنفس الكود كالسابق

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

تحياتي للجميع

هل أعجبك الموضوع ؟

بقلم يونس اوشن

انا مداوين مغربي الجنسي اعيش وادرسو بيمدينة اكدير أعشق التدوين المعلوماتي ومهتم بكل ما هو جديد في عالم التقنية