الرئيسية بلوجر اضافة ترقيم الصفحات داخل مدونتك 2

بلوجر

اضافة ترقيم الصفحات داخل مدونتك 2

Mahmoud 0

A+ A-

أقدم لكم اليوم بإذن الله إضافة هامة و هي ترقيم الصفحات داخل مدونتك. و أهميتها تظهر في المدونات ذوات المواضيع الكثيرة حيث أن الصفحة الرئيسية لمدونتك تعرض عدداً من الموضوعات تقوم أنت بتحديدها من تحرير رسائل المدونة الإلكترونية و لتكن ثمانية موضوعات مثلاً. فبعدما يزيد عدد موضوعات مدونتك عن ثمانية موضوعات فأين تظهر تلك الموضوعات؟؟؟

الحل بفضل الله وحده في تلك الإضافة !!!

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

هيا بنا إلى الجانب العملي :

نستعين بالله أولاً قبل كل شئ.

إذا لم تكن محدداً لعدد الرسائل التي تظهر على الصفحة الرئيسية لمدونتك٬ فقم بتحديدها كما يلي :

1-      قم بالذهاب إلى لوحة تحكم بلوجر الخاصة بمدونتك.

2-      قم بالذهاب إلى " التخطيط ".

3-      قم بالذهاب إلى " تحرير " الخاصة بـ " رسائل المدونة الإلكترونية ".

4-      قم بتحديد " عدد الرسائل على الصفحة الرئيسية " كما يناسب مدونتك.

بعدما قمت بتحديد عدد الرسائل على الصفحة الرئيسية لمدونتك قم بالذهاب إلى تحرير قالب مدونتك بعد أخذ نسخة احتياطية لمدونتك تلافياً لأي أخطاء قد تحدث أثناء التطبيق ثم قم باتباع الخطوات التالية :

1-      قم بالدخول إلى لوحة تحكم بلوجر الخاصة بمدونتك.

2-      قم بالذهاب إلى " التخطيط ".

3-      قم بإضافة أداة HTML/JavaScript.

·       يمكنك مراجعة هذا الموضوع لمعرفة كيفية إضافة الأداة : إضافة أدواتك المفضلة لمدونتك وتخصيص أداة HTML/JavaScript.

4-      قم بإضافة الكود التالي داخل الأداة ثم قم بالحفظ.

<!-- Numbered Page Navigation Widget For Blogger --> <style type="text/css"> #blog-pager{ padding:5px 0; } .showpageArea { font-weight: bold; margin:5px; float:right; } .showpageArea a { text-decoration:underline; color: #fff; float: right; } .showpageNum a, .showpage a { color: #fff; text-decoration:none; border:1px solid #C7C7C7; -webkit-border-radius:3px; -moz-border-radius:3px; margin:0 3px; padding:5px 10px; float: right; background: #FFB493; background: -moz-linear-gradient(top,#FFB493,#FF6600); background: -webkit-linear-gradient(top,#FFB493,#FF6600); } .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #D0C0B6; background: -moz-linear-gradient(top,#D0C0B6,#8A6B58); background: -webkit-linear-gradient(top,#D0C0B6,#8A6B58); } .showpagePoint { color: #000; text-decoration:none; border:1px solid #C7C7C7; -webkit-border-radius:3px; -moz-border-radius:3px; margin:0 3px; float: right; padding:5px 10px; background: #CBCBCB; background: -moz-linear-gradient(top,#CBCBCB,#fefefe); background: -webkit-linear-gradient(top,#CBCBCB,#fefefe); } .showpageOf { border:1px solid #C7C7C7; text-decoration:none; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; padding:5px 10px; margin: 0 3px; float: right; color:#fff; background:#FF6600; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#fff; float: right; } </style> <script type='text/javascript'> var home_page="/"; var urlactivepage=location.href; var postperpage=8; var numshowpage=9; var upPageWord ='السابق'; var downPageWord ='التالي'; </script> <script src='https://rawgit.com/Abu-Omar/profit-tech/master/Profit-tech-numbered-page-navigation.js' type='text/javascript'></script> <!-- Numbered Page Navigation Widget For Blogger --> 

  

مع مراعاة التالي :

•        1-      "  postperpage=8; " : الرقم " 8 " عبارة عن عدد الموضوعات التي تظهر في كل صفحة. اجعله مطابقاً لما اخترته سابقاً كما شرحنا في بداية التدوينة.
         2-      "  numshowpage=9; " : الرقم " 9 " عبارة عن عدد الصفحات الذي يظهر في الترقيم. قم بتغييره بما يناسبك.
         3-      " السابق و التالي " : الكلمتان اللتان تظهران على زري الصفحتين السابقة و التالية. قم بتغييرهما بما يناسبك.
         4-      " #fff " : عبارة عن كود لون الخط في الإضافة. ستجده مكرراً أربع مرات تقريباً. قم بتغييره بما يناسبك.
         5-      " #C7C7C7 " : عبارة عن كود لون إطار الزر. ستجده مكرراً ثلاث مرات تقريباً. قم بتغييره بما يناسبك.
         6-      " #FFB493 " و " #FF6600 " : عبارة عن لوني التدرج لخلفية الزر. قم بتغييرهما بما يناسبك.
         7-      " #D0C0B6 " و " #8A6B58 " : عبارة عن لوني التدرج لخلفية الزر عند المرور عليه بالماوس. قم بتغييرهما بما يناسبك.
         8-      " color: #000 " : عبارة عن كود لون الخط للصفحة الحالية. قم بتغييره بما يناسبك.
         9-      " #CBCBCB " و " #FEFEFE " : عبارة عن لوني التدرج لخلفية زر الصفحة الحالية. قم بتغييره بما يناسبك.
         10-   " background:#000 " : عبارة عن كود لون خلفية زر " صفحة ... من ... ". قم بتغييره بما يناسبك.

و بذلك تكون قد انتهيت من إعداد فهرس مطور و أنيق لمواضيع مدونتك و قد اجتهدت قدر طاقتي في تنسيق ألوانه و أنت لك الخيار في تغيير ألوانه بما يناسب ألوان مدونتك حسب التفصيل في الشرح أعلاه.

و بذلك تكون قد أضفت ترقيم الصفحات إلى مدونتك بطريقة بسيطة و بإضافة خفيفة..

الوسوم: بلوجر