إضافة أزرار التنقل لصفحات بلوجر

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


قم بالبحث عن الكود التالي :

<div class='blog-pager' id='blog-pager'>
ثم قم بلصق هذا الكود بعده مباشرة :


 <span id='blog-pager-top-link'>
      <a class='blog-pager-top-link' href='#' title='إلى الأعلى'>إلى الأعلى</a>
      </span>
      <span id='blog-pager-bottom-link'>
      <a class='blog-pager-bottom-link' href='#bottom' title='إلى الأسفل'>إلى الأسفل</a>
      </span><font size="0"><a href="http://www.siege--auto.org"></a></font>


الآن إبحث عن الوسم :
</body>
ثم قم بلضق هذا الكود قبله :
<a name='bottom'/>
وأخيرا قم بالبحث عن الوسم :
]]></b:skin>
وضع الكود التالي قبله :

#blog-pager {
  position: fixed;
  bottom: 10px;
  right: 50px;
  width: 120px;
  height: 120px;
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ccc;
  -moz-box-shadow: 1px 1px 3px #666666;
  -webkit-box-shadow: 1px 1px 3px #666666;
  box-shadow: 1px 1px 3px #666666;
  border-radius: 60px;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  z-index: 9;
}
#blog-pager  a {
  display: block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  text-indent: -99999px;
  position: absolute;
  padding: 5px;
}
a.blog-pager-top-link {
  background: url(https://lh5.googleusercontent.com/-hSHWhg9kGg0/T2MugFnRreI/AAAAAAAAHw8/Htfa78EMsoQ/s30/arrow_up2.png) no-repeat center center;
  top: 0px;
  left: 40px;
}
a.blog-pager-bottom-link {
  background: url(https://lh6.googleusercontent.com/-YBE6uU6Hs9A/T2Muc7lPfII/AAAAAAAAHw8/MEwsNC6GORY/s30/arrow_down2.png) no-repeat center center;
  top: 80px;
  left: 40px;
}
a.blog-pager-newer-link {
  background: url(https://lh3.googleusercontent.com/-x2iM_Ehd97o/T2Muc2KIN9I/AAAAAAAAHw8/NsKA5zQvepo/s30/arrow_left2.png) no-repeat center center;
  top: 40px;
  left: 0px;
}
a.blog-pager-older-link {  
  background: url(https://lh4.googleusercontent.com/-yHMoNLjW5Eg/T2MudH-o1FI/AAAAAAAAHw8/kmXGiY_ztZI/s30/arrow_right2.png) no-repeat center center;
  top: 40px;
  left: 80px;
}
a.home-link {
  background: url(https://lh4.googleusercontent.com/-Ud-NZ0D_WgI/T2MvUcqLnXI/AAAAAAAAHw8/5aeH4DguMgc/s30/home.png) no-repeat center center;
  top: 40px;
  left: 40px;
}
.blog-mobile-link {
  display: none;
}
ثم قم بحفظ القالب


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

  1. ابو اياد اثبت انه افضل مصمم عربي

    ردحذف
  2. مبدع كما عودتا يا أبو إياد
    شكرا على الإضافة

    ردحذف
  3. ;)) وعليكم السلام ورحمة الله وبركته
    انا لم اجد الكود الاول

    مع العلم انا مركب القالبك
    http://faissail.blogspot.com/

    ردحذف
  4. @فيصل
    أخي الكريم لا تنسى قبل كل بحث عن أي كود أن تقوم بوضع علامة على المربع الصغير المسمى : توسيع قوالب عناصر واجهة المستخدم والموجود فوق تحرير HTML للقالب
    بالتوفيق

    ردحذف
  5. شكرا اخي ابو اياد على الاضافة لاكن واجهتني مشكلة الاضافة في مدونتي ليست تماما كما في مدونتك والفارق انها ليست دائرية بشكل صحيح كما في مدونتك ارجو المساعددة

    http://computer-w1.blogspot.com

    ردحذف
  6. يعنى مفيش حل يا ابو اياد انى اكلمك انتا كدا بتساعد المدونين ؟
    شكرا

    ردحذف
  7. @Alfrsan-Tv
    أخي لقد سبق وطلبت مني الإميل الخاص بي لتراسلني وأعطيته لك ،فما المشكلة !!!
    هذا Email: mohamed@abu-iyad.com

    ردحذف
  8. @boyos hacker
    أرجو أن تعيد تطبيق الإضافة مرة أخرى ،لربما قمت بلصق أحد الأكواد في مكان غير مكانه

    ردحذف
  9. @أبو إياد
    شكرا اخي ابو اياد لقد قمت بضبط الاضافة بما يناسب مدونتي ولاكن لدي استفسار اخر خارج عن الموضوع كيف اقوم بتسريع تصحف مدونتي بالعلم اني قمت بوضع تلك الاضافة من مدونة ذئيب لاكن حتى الان المدونة تعمل بشكل بطيئ
    www.computer-w1.blogspot.com

    ردحذف
  10. @أبو إياد

    وحضرتك قلتلى عشان اكلمك لازم اكون عامل نطاق للمدونه بتعتى وانا مش عامل ومش هعمل ازاى اكلمك بطريقه غير دى لازم توفر طرق عديده للتواصل معك
    ارجوك اتريك لى اميلك الياهو
    او ادينى اسمك على الفيس بوك واكلمك على الفيس بوك

    ردحذف
  11. عندى سؤال بعد اذنك اخى ابو اياد عندما انشر لينك موضوع من المدونه فى الفيسبوك لا تظهر صوره الموضوع بل تظهر صورة blogger فما هو حل هذه المشكله
    وهذه هى مدونتى
    http://computerzom.blogspot.com/

    ردحذف
  12. اسال الله ان يجزيك كل خير

    اخواني الاعزاء ارجوا من الجميع ممن استفاد من الدروس ان تدعوا لاخيكم ومحبكم ابو اياد بالخير والبركة لكل مايفعله لخدمة الاعضاء والزوار . والكلمة لكم ,,, وجزاكم الله خيرا

    ردحذف
  13. استاذنا العزيز ابو اياد

    لقد غبت عن مدونتي ثلاثة ايام وعندما اردت اليوم ان اضع موضوع جديد تفأجات بتحديث جديد من البلوجر بالنسبة للقوائم وقد حللت البعض منها ولم اجد الباقي مثل اختفاء اداة ازالة التنسيق , وحاولت توسيط الصورة وللاسف لم استطع ففي الاول كنت اختار توسيط للصورة والفيديو وتتوسط اما الان بعد التحديث للاسف .

    وهذه صورة توضح لك الاتي

    http://store.a7lashe.com/upfile/images/bbfc6088796.jpg

    ارجوا من سعادتكم التلطف والتكرم بمساعدتي بقدر استطاعتكم وماهو البديل لكي اقوم بتنسيق المشاركة الجديدة في المدونة .

    ولك حرية القرار من المساعدة او عدمها وشكرا مرة اخرى
    .

    اخوكم في الانتظار
    .

    ردحذف
  14. جزاك الله كل خير أبو أياد .. شكراً لك

    ردحذف
  15. شكرا أبو إياد على المجهود

    جربت الطريقة لكنها تظهر بدون أسهم شاهد الصورة


    image




    هذه مدونتي

    arab-soft.blogspot.com

    ردحذف
  16. @Admin


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

    ردحذف
  17. شكراعلى الموضوع الجميل اخي محمد من فضلك اريد اسمك ذالك القالب الخاص بمعلومات شخصية عن المدون

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

    ردحذف
  19. موضوع جيد وجميل انت دائما متااق بمدونتك ابو اياد


    بلوجر فيس|blogger face

    ردحذف
  20. اخي ابو ابو اياد انا كنت اود الاضافة التي في الفوتر التي مكتوب فيها فريق المدونة

    ارجو اخي انا عن خروجي عن الموضوع وشكرا لك ابو اياد
    وهذه مدونتي ارجو التقييم
    بلوجر فيس|blogger face

    ردحذف
  21. الف شكر ليك اخى ابو اياد على الااه الرائعه تلك
    واود استفسار انا كان عندى اداه ترقيم الصفحات واضفت عليها هذه الاداه ولكن لا تعمل معى فكيف احذف كود ترقيم الصفحات وهذه شكل الاداه فى مدونتى
    مدونة كمبيوتر زوم

    ردحذف
  22. شكرا لك على هده الاضافة الرائعة

    ردحذف
  23. رائع...تمت معى بنجاح...خلاف شبيهتها الموجودة فى المدونة الأحدث منها...
    شكراً "أبو إياد".

    ردحذف
  24. شكرا على الموضوع الجميل

    ردحذف
  25. اخي بحثت عن الكود الاول لاكن لم اجده ما الحل ارجو الرد بسرعه

    ردحذف
  26. اخي الطريقه لم تنجح معي

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية