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

ترقيم الصفحات 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/pagenav.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: left;
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: left;
border:1px solid #BEBEBE;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px
}
.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: left;
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: left;
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: left;
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: left;
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 ); 
هو لون خلفية الزر وهو تدرج يتكون من لونين الاول العلوي والثاني السفلي
هذا الكود 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>

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

منشورة في: *, إضافات بلوجر, حلول, blogger widget