ترقيم الصفحات بطريقة فعالة وحل جميع المشاكل
ترقيم الصفحات Page Navigation widget إضافة هامه لمدونات بلوجر وخصوصا عندما تصبح المدونة بها عدد كبير من المواضيع ويصعب التنقل بها فتأتي إضافة الترقيم لتحل تلك المشكلة لكن كثيير من الإضافات الموجوده بها عدة مشاكل منها تخصيص شكلها أغلب المصممين يجعل الإضافة بلون يتناسب مع مدونته لكن قد لا يتناسب مع الجميع أما إضافتنا يمكنك تخصيص شكلها كما تشاء
أيضا مشكلة أخرى في بعض الإضافات وهي عند بلوغ المواضيع حد معين مثلا مئة موضوع تصبح لا تعمل جيداً وتكرر الموضوعات لكن إضافتنا اليوم لا توجد بها تلك المشكلة أيضا مشكلة تظهر مع التسميات أو الأقسام وتجعل المواضيع غير مرتبه لكن بإذن الله سنضع حل هذه المشكلة أيضا لنكون وصلنا لأكبر قدر من حلول المشاكل التي تواجه إضافة ترقيم الصفحات
أولا طريقة إضافة ترقيم الصفحات
الخطوة الأولى
أدخل الى خانة التخطيط في إدارة مدونتكقم بتحرير رسائل المدونة الإلكترونية
وفي خانة عدد الرسائل على الصفحة الرئيسية ضع رقم يناسبك وإعلم أنه سيستخدم في ترقيم الصفحات ايضا
الخطوة الثانية
أدخل الى تحرير قالبك وطبعا لا تنسى أخذ نسخة إحتياطية وأضف الكود التالي
رقم 5 هو عدد الرسائل في الصفحة إجعله نفس العدد الذي إخترته في الخطوة الاولى
رقم 8 هو عدد الصفحات الظاهر في الإضافة قم بالزيادة أو التقليل حسب عرض مساحة مدونتك
ويمكنك تغيير كلمتي السابق والتالي بما يناسبك
الخطوة الثالثة
إبحث عن الوسم
/* -- 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 );
هو لون خلفية الزر وهو تدرج يتكون من لونين الاول العلوي والثاني السفلي
هذا الكود 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 والمتكرر في كل الأكواد تقريبا هذا إن قمت بزيادته سيصبح الزر اكثر إستدارة
لقد شرحت تقريبا أهم الأكواد التي يمكن التعديل عليها أو يمكنك إضافة الكود كما هو إن لم تستطيع تغيير الألوان
ومن هنــا يمكنك تحصيل اكواد الألوان
حل مشكلة الترقيم والتسميات
تحدثنا في البداية عن وجود مشكلة بين الترقيم والتسميات عند دخول احد الاقسام تكون أعداد المواضيع بعكس المحدد في الترقيم وللتخلص من تلك المشكلة
نبحث عن الكود التالي في القالبونستبدله بهذا
مع تغيير رقم 5 بعدد المواضيع ويمكنك طبعا استخدام خاصية تعديل الكل مرة واحده لتغيير الكود في كامل القالب
يمكنك معرفة الطريقة من هذا الموضوع
شرح تعديلات واجهة تحرير قوالب بلوجر الجديدة
تحياتي للجميع
