إضافة زر العودة لأعلى الصفحة وزر كتابة تعليق

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

أولا: إضافة زر العودة لأعلى الصفحة:-

ما سوف يُعرض في هذا الموضوع سيكون مختلف قليلا، فوظيفة الزر واحدة ولكن موقعه مختلف. أي أنه سيكون ثابتا في مكانه (عائما) حتى مع التنقل بالصفحة لأعلى أو لإسفل ويمكن رؤيته في جميع الأوقات. وسنقوم بذلك فقط باستخدام كود html قصير مع قليل من التصميم.
تنبية:
هذا الزر والآخر ربما لا يعملوا كما ينبغي عند استخدام انترنت اكسبلورر خاصة النسخ القديمة..
الخطوات:
1- الذهاب إلى تحرير html. من التخطيط في لوحة التحكم الرئيسية أو الإعدادات..
2- الضغط على Ctrl+F للبحث عن كود </body>.
3- إضافة الكود التالي مباشرة قبل كود </body>:

<a href='#' style='position: fixed; bottom:5px;right:5px;' title='your title'><img src='photo url' style='border: none;'/></a>

إذا كنت تفضل استخدام نص بدلا من الصورة استخدم هذا الكود:

<a href='#' style='position: fixed; bottom:5px;right:5px;' title='your title'>your text</a>

مصدر الكود السابق مع بعض التعديلات ليتماشى مع اللغة العربية:
Adding A Floating “Back To Top” Button
أما كود كتابة تعليق فهو مجهود شخصي خاصة مكان الكود..

ثانيا: إضافة زر كتابة تعليق:-

الخطوات:
1- الذهاب إلى تحرير html. من التخطيط في لوحة التحكم الرئيسية أو الإعدادات..
2- التأشير على "توسيع قوالب عناصر واجهة المستخدم".
3- الضغط على Ctrl+F للبحث عن كود <p><data:post.body/></p>. إذا كنت تستخدم خاصية اقرأ المزيد ربما تجد هذا الكود مرتين، وما نقصد هو الكود الأول. بمعنى آخر الكود الذي سنضيفه يكون بين الأثنين..
4- إضافة الكود التالي مباشرة بعد كود <p><data:post.body/></p>:

<a href='#comment-form' style='position: fixed; bottom:5px;right:45px;' title='your title'><img src='photo url' style='border: none;'/></a>

وإذا كنت تفضل استخدام نص بدلا من الصورة استخدم هذا الكود:

<a href='#comment-form' style='position: fixed; bottom:5px;right:45px;' title='your title'>your text</a>

ملاحظات:
- في حين استخدام الصور يفضل أن لا يزيد حجمها عن 30*30 بيكسل وأن يكون امتدادها png ليكون حجمها صغير.
- كل ما هو باللون الأخضر بالأكواد يمكن تغييره بأي لغة.
- يمكن التعديل على مكان الصورة أو النص من خلال bottom:#px;right:#px.
- كما يمكن تعديل نص العنوان title الذي يظهر عند وقوف مؤشر الفارة على الصورة أو النص.
- يمكن الاعتماد على بحث جوجل عن الصور للحصول على ايقونة كتابة تعليق أو الذهاب لأعلى الصفحة.
- أي اقتراح أو استفسار يرجى ذلك من خلال التعليق.