recent
موضوعات تهمك

تركيب اضافة ترقيم صفحات بلوجر 2020 | blogger script 123

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



معظم المدونات تستعمل اداءة قديم ظهر في أواخر سنة 2010، ولأنه يحتوى على أخطاء وأكواد قديمة قررت إعادة تكويد الأداة وجعلها أفضل من الموجودة حاليا، وقبل الشروع في شرح طريقة إضافته للمدونة دعوني أذكر بعضا من مميزاته

مميزات الاداة

الاداءة التي  يُستعملها البعض في أغلبية مدونات بلوجر إن لم أقل كلها، لا يعمل في صفحات التصنيفات وهذا مزعج جدا لأصحاب المدونات لأنهم مجبرون على إضافة هذا المُعلِّم إلى روابط صفحاتهم رغما عنهم، وهم يعلمون أنه ضار لظهور صفحاتهم على محركات البحث، قمت بمعالجة هذه المشكلة والاداءة الآن يعمل على صفحات التصنيفات بدون إضافة أية شيء مُعلِّم للرابط.
ترقيم ذكي
تقوم الاداءة بإختيار الصفحات التي سيظهر ترقيمها بعناية، إذا كانت في مدونتك 1000 صفحة فهذه ليست مشكلة، لن تظهر ألف صفحة في الترقيم، ستظهر فقط الصفحات التي تسهل على الزوار التصفح.
سهل التركيب والتخصيص
إذا كنت مطورا لقوالب بلوجر أو لديك خبرة في ذلك، يمكنك إضافة السكربت لقالبك وإستعمال أكواد css الخاصة بك لتخصيص شكل ظهوره، حيث أن كل جزء من الإضافة لديها إسم فريد، وهذا سيسهل عليك عملية التخصيص، أو يمكنك إستعمال بعض التصميمات التي سأقوم بإرفاقها مع الاداءة.

إذا لم تكن لديك خبرة في تعديل القوالب فهذه ليست مشكلة يمكنك إضافة الكود لقالبك بسهولة، كما يمكنك إختيار بين 3 تصميمات لشكل الإضافة مرفوقة مع الشرح.

تركيب الإضافة

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

سيتم تقسيم تركيب الإضافة إلى قسمين، الأول تركيب سكربت الإضافة (javascript)، و الثاني تركيب شكل الإضافة (css).
تركيب الاداءة 
يمكنك وضع االاداءة في أي مكان أسفل أداة أزرار التنقل، وكلما كان أقرب لها سيبدأ العمل أسرع، إذا لم تعرف أين ستضعه بالظبط يمكنك فقط وضعه أسفل القالب، فوق </body> ، قم بالبحث عن الوسم </body> (أسفل القالب) وضعه فوقه مباشرة.



<script>
//<![CDATA[
var paginationConfig = {
  text: {
    page: "الصفحة",
    of : "من"
  },
  perPage: 8
};
//]]>
</script>
<script src='https://cdn.jsdelivr.net/gh/codatey/cdt-paginaton@1.1.0/dist/cdt-pagination.min.js'/>
يمكنك تعديل العبارات: الصفحة، من، وأيضا الرقم 8 الذي يمثل عدد التدوينات الذي تظهر في كل صفحة، هذا الرقم يجب أن يكون مطابق للرقم الذي قمت بإستعماله في الإعدادات:
إعدادات ⇠ المشاركات والتعليقات والمشاركة ⇠ الحد الأقصى لما يتم عرضه

إذا لم تكن ستغير أي من الإعدادات الثلاثة (الصفحة، من ، 8)، يمكنك إزالة الاداءة  الأول وترك فقط الاداءة الثاني لأنه يستعمل نفس الإعدادات، يمكنك إستعمال هذا فقط:

<script src='https://cdn.jsdelivr.net/gh/codatey/cdt-paginaton@1.1.0/dist/cdt-pagination.min.js'/>

تركيب شكل الإضافة

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

لكن أحببت إضافة بعض الأشكال لتكون مرافقة مع الاداءة ، ويمكنك تعديلها إن أردت ذلك لتحصل على ألوان تناسب قالبك، توجد 3 أشكال للإضافة يمكنك الإختيار بينها.

عند إختيار الشكل الذي تريده ضع الكود الخاص به فوق الوسم </head> ، يمكنك بإستعمال أداة البحث ctrl+f، بإيجاده بسرعة.



الشكل الأول

<style>
#blog-pager{padding:13px 0}#blog-pager span{display:inline-block;margin-left:5px;line-height:40px;white-space:nowrap;transition:all .3s ease}#blog-pager .showPageOf{font-size:14px;color:#757575;margin-left:15px}#blog-pager .pageNum{background:#eee;width:40px;text-align:center;border-radius:50%}#blog-pager .pageNum a{display:block;color:#545454}#blog-pager .pageNum.current{background:#d33;color:#fefefe;cursor:default}#blog-pager .pageNum.delimiter{background:none;cursor:default;width
:auto}#blog-pager .pageNum:not(.current):not(.delimiter):hover{background:#d6d6d6}

</style>

الشكل الثاني

<style>
#blog-pager{border:1px solid #e8eaed;overflow:hidden;float:right;margin:13px 0}#blog-pager span{display:block;white-space:nowrap;float:right;transition:all .3s ease;line-height:40px;border-left:1px solid #e8eaed}#blog-pager span:last-child{border:0}#blog-pager .showPageOf{padding:0 13px;font-size:14px;color:#606060;cursor:default}#blog-pager .pageNum a,#blog-pager .pageNum.current,#blog-pager .pageNum.delimiter{padding:0 13px;display:block}#blog-pager .pageNum a{color:#2788ff}#blog-pager .pageNum.current{cursor:default;background:#007aff;color:#fefefe}#blog-pager .pageNum.delimiter{cursor:default}#blog-pager .pageNum:not(.current):not(.delimiter):hover{background:#fafafa}
</style>

الشكل الثالث

<style>
#blog-pager{margin:13px 0;overflow:hidden}#blog-pager .showPageOf{display:none}#blog-pager .pageNum{float:right}#blog-pager .pageNum a,#blog-pager .pageNum.current{display:block}#blog-pager .pageNum a,#blog-pager .pageNum.current,#blog-pager .pageNum.delimiter{padding:.25em .7em;display:block;transition:all .3s ease;text-align:center;margin-left:5px;color:#888;border:1px solid #eee;border-radius:3px}#blog-pager .pageNum.current{cursor:default;background:#32c374;color:#fff}#blog-pager .pageNum.delimiter{cursor:default}#blog-pager .pageNum:not(.current):not(.delimiter):hover a{border-color:#999}
</style>

وفي الختام
حاولت ما أمكن تبسيط الشرح وجعله مفهوم لمن لديهم، ومن ليست لديهم خبرة في تعديل القوالب، أتمنى أن أكون قد وفقت في هذا الشرح وأن يكون مفهوم للجميع.
author-img
Ebrahim

تعليقات

ليست هناك تعليقات
إرسال تعليق
    google-playkhamsatmostaqltradent