2010/05/22

كود الانتقال إلى أعلى


كود الانتقال إلى أعلى
تعتبر هذه الإضافة من الكماليات وليست من الأساسيات فهي تعتبر إضافة إلى حد ما مهمة لأصحاب المدونات التي تحتوي صفحاتهم الرئيسية على عدد كبير من المقالات او الموضوعات او التي موضوعاتهم كبيره لدرجة يعتبر فيها الرجوع إلى اعلى الصفحه عمليه مملة لدى الزائر لكن البعض من المدونات تحب إضافة هذه الإضافة البسيط .
وهو عبارة عن صورة او ايقونة صغير لسهم اتجاهه إلى اعلى يتواجد في الجانب الايمن اسفل المتصفح كم بتلك الصورة :
أيقونة الانتقال إلى أعلى
وبما انها اداه بسيطة فهي ايضا عبارة عن كود صغير وسهل وضعه في مدونتك عبر وضع هذا الكود في عنصر جديد عن طريق هذا المسار المعتاد الذي تعودنا عليه :
لوحة التحكم الرئيسية التخطيط اضافة عنصر
وبعد ذلك ضع هذا الكود في المكان المخصص له بدون وضع عنوان للعنصر :
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://img256.imageshack.us/img256/1627/top2010.gif" /></a>
ثم احفظ
ومن مميزات هذه الإضافة ان زر الانتقال إلى الأعلى يتبع متصفح مدونتك اينما ذهب لأسفل او لأعلى في الجانب الايمن اسفل الصفحة كما تجده في مدونتي "قد يتم حذف هذه الإضافة من مدونتي بعد فتره من نشر الموضوع ، فهي فقط للتوضيح"
ملاحظه :
1.      يمكنك تغيير الصورة (الأيقونة) عن طريق تغيير رابط الصوره الموجود في الكود مثل رابط الصورة هذا :
http://img256.imageshack.us/img256/1627/top2010.gif
ووضع رابط الصورة التي تريدها "بعد رفعها على اي موقع لرفع الصور"
2.      يمكنك ايضا نقل الزر من اليمين إلى اليسار عبر تغيير كلمة right إلى كلمة left
3.      مقاس الصورة او الايقونة الاعتيادي هو 25x25 بكسل
4.      يمكنك ملاحظة أيضا عند وقوففك بمؤشر الفأرة على أيقونة الانتقال إلى أعلى في هذه المدونة، تلك الجملة الانجليزية (Back to Top) وهي تعني "العوده إلى أعلى" يمكنك تغييرها إلى أي جملة تراها مناسبه لتعني الذهاب إلى أعلى الصفحة عن طريق تغيير تلك الجملة المتواجدة في الكود باللون البنفسجي (Back to Top) ولو حتى بأستخدام اللغة العربية لتصبح مثل هذه الصورة :

العودة إلى أعلى

ولتحميل مجموعة صغيرة من الأيقونات (عبارة عن اسهم لأعلى ، مقاس 25x25 بكسل) لاختيار السهم الذي يناسبك من هنا "تحميل الأيقونات"
بعد اختيار الأيقونة التي تناسبك ارفع الصورة على أحد مواقع رفع الصورة مثل imageshack وخذ رابط الصورة وضعه بدل رابط الصورة الموجود بالكود
ويمكنك تحميل كود الانتقال إلى اعلى في ملف Text Document من هنا "تحميل الكود"
وأرجو منكم المشاركة بروابط ايقوناتكم التي تشير إلى الذهاب إلى أعلى ان وجد لديكم منها، عبر وضع روابط تلك الصور في التعليق ليستفاد منها الجميع وجزاكم الله كل خير.
وشكرا لتعاونكم معنا

هناك 12 تعليقًا:

  1. بارك الله فيك اخى العزيز.
    ولكن لدى تسائل
    فعند اضافة html/javascript يطلب منى عنوان ولذلك تظهر الاداة بالعنوان فى البلوج دوان داعى لها.
    السؤال. كيف اضيف اداة بغير عنوان بالعلم انه حين اترك العنوان فارغ يعطى رسالة خطأ ويطلب عنوان للاداة.
    شكرا لكم وبارك الله فيك اخى.

    ردحذف
  2. كمال النحاس :
    اهلا بك اخي الفاضل
    وبالنسبة لسؤالك : فقد حدث هذا ايضا معي كما قلت بالضبط منذ ايام ولكن اليوم عندما قمت بإضافة أداة جديدة ولم اضع بها عنوان فتم الحفظ بدون ان يطلب مني عنوان للعنصر .
    وأعتقد انه كان إلى حد ما خطأ من بلوجر وانه تم الرجوع مره أخرى إلى ما كانت علية سابقا .
    فيمكنك الان تجربة إضافة كود "الانتقال إلى أعلى" بدون عنوان وبأذن الله سوف يتم الحفظ بدون مشاكل .

    ردحذف
  3. تم التطبيق بنجاح مستر ميزو

    اشكرك

    ردحذف
  4. Dr/ walaa salah :
    شكرا لمرورك الطيب اختي الفاضل وكل عام وانتي بخير بمناسبة شهر رمضان الكريم

    ردحذف
  5. اسعدوتنا بهذه المواضيع

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

    مع الشكر

    ردحذف
  7. شكرا على المجهود الرائع ... وموضوعاتك ساعدتنى كتير فى عمل هذه المدونة
    http://khalik-ystyle.blogspot.com

    ردحذف
  8. والله العظيم انت برنس

    وكل اللى انا عايزه لقيته عندك

    ردحذف
  9. الله يعطيك العافيه وجزاك الله خير ^____^ ... استمرر اخوي افدتني كثير الله يسعدك يارب

    ردحذف
  10. الف شكر يا أستاذنا بارك الله فيك
    يشرفنى زيارتكم لمدونتى
    http://dar-osama.blogspot.com/

    ردحذف
  11. < img src="http://img119.imageshack.us/img119/8589/arrowupcx2.gif
    من فضلك انا اضفت الكود دة الى المدونة بتاعتى ودة بتاع الصعود لاعلى الصفحة ولكن المشكلة انها تظهر هكذا وليس على شكل سهم واردت الدخول الى الصفحة التى اضفت فيها الكود ولكنى لم اجدة حتى استطيع الغاءة فماذا افعل حتى الغية ؟
    شكرا

    ردحذف

يسعدنا تعليقك