التنقل بين الصفحات باستخدام مفاتيح الأسهم للوحة المفاتيح هي ميزة مفيدة جدا. أنه يوفر الوقت التنقل إلى أسفل الصفحة للعثور على وصلات إلى الصفحة التالية في موقع وبديهية جدا للزوار.
في هذا الدرس أنا أقدم إضافة إلى قالب بلوجر بسيط جدا والتي يمكن استخدامها للتنقل بين المشاركة الجديدة وأقدم على أي صفحة موجود فيها "blog pager" (بما في ذلك مؤشر والبحث والأرشيف والبند صفحات) باستخدام مفاتيح الأسهم اليسار واليمين.
هناك نوعان من الخطوات الرئيسية لإضافة التنقل باستخدام مفتاح السهم إلى قالب بلوجر:
إضافة برنامج نصي بسيط فقط قبل الإغلاق العلامة </ body>
إضافة الكود المطلوبة إلى القالب Blogger الخاص بك
أولا نحن بحاجة إلى تحرير "الحديثة" و "القديمة" وصلات في العنصر المدونة- بيجر من قالب blogger لدينا.
انتقل إلى قالب> تحرير HTML في لوحة تحكم رئيسية Blogger الخاص بك وتأكد من أنك قمت بالتحقق بالقرب من أعلى الصفحة.
باستخدام وظيفة البحث في المتصفح [CTRL+F] ، حدد موقع المقطع التالي من الأكواد البرمجية :
تعديل النص الأحمر الغامق بحيث تظهر مثل هذه بدلا من ذلك:
في هذا الدرس أنا أقدم إضافة إلى قالب بلوجر بسيط جدا والتي يمكن استخدامها للتنقل بين المشاركة الجديدة وأقدم على أي صفحة موجود فيها "blog pager" (بما في ذلك مؤشر والبحث والأرشيف والبند صفحات) باستخدام مفاتيح الأسهم اليسار واليمين.
هناك نوعان من الخطوات الرئيسية لإضافة التنقل باستخدام مفتاح السهم إلى قالب بلوجر:
إضافة برنامج نصي بسيط فقط قبل الإغلاق العلامة </ body>
إضافة الكود المطلوبة إلى القالب Blogger الخاص بك
أولا نحن بحاجة إلى تحرير "الحديثة" و "القديمة" وصلات في العنصر المدونة- بيجر من قالب blogger لدينا.
انتقل إلى قالب> تحرير HTML في لوحة تحكم رئيسية Blogger الخاص بك وتأكد من أنك قمت بالتحقق بالقرب من أعلى الصفحة.
باستخدام وظيفة البحث في المتصفح [CTRL+F] ، حدد موقع المقطع التالي من الأكواد البرمجية :
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='newer'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='older'><data:olderPageTitle/></a>
</span>
</b:if>
وأسهل طريقة هي استبدال كود في قالبك مع كود البديل أعلاه.
التالي، ابحت عن العلامة </ body> في القالب الخاص بك. قبله مباشرة، لصق المقطع التالي من الكود :
<script type='text/javascript'>
window.onload = function()
{
document.onkeyup = function(event)
{
var kGo = (!event) ? window.event : event;
switch(kGo.keyCode)
{
case 37:
window.location.href = document.getElementById('newer').href;
break;
case 39:
window.location.href = document.getElementById('older').href;
break;
}
};
};
</script>
عند هذه النقطة، فمن المستحسن معاينة القالب. إذا كنت قد أجريت أية أخطاء عند تحرير الشفرة، وهذا سوف يكون واضحا في المعاينة. يمكنك أيضا اختبار وظائف جديدة عن طريق الضغط على مفتاح السهم اليمين بينما أنت في صفحة المعاينة.
إذا كان كل شيء جيد، قم بحفظ القالب والتمتع بتنقل بين صفحات بستخدام لوحة المفاتيح من خلال موقعك.
قد ترغب في السماح للزائرين أن يدركون أنهم يمكن أن تنقل إلى مشاركات الجديدة / القديمة باستخدام مفتاح الأسهم حيث ان هذا ليس ميزة الافتراضية من blogger. على سبيل المثال، يمكنك إضافة عنصر واجهة مستخدم في التخطيط الخاص بك لشرح التنقل بمفتاح السهم.
ما رأيك؟
آمل أن يكون هذا الدرس سريعة و مفيدة في مساعدتك على تمكين تنقل بسيط بلوحة المفاتيح بين المشاركات على موقعك. لا تتردد في ترك أفكارك والتعليقات أدناه.
ولا أى اندهاش
ردحذفأحلى برامج