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

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


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

<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;
}
ثم قم بحفظ القالب


Pin It
أعلن هنا

بقلم mohammed glal

مهندس مصري ومتابع جيد للأخبار والمستجدات التقنية والاعلام الاجتماعى ومهتم بالاعلان عن الشركات الناشئة عبر مدونته الشخصية (مدونة راصد تقني), كاتب سابق على مدونة عالم الإبداع ومشرف سابق فى موقع نقطة التطوير ومنتدى الديوان -تم اغلاقه-. أحب القراءة والترجمة للمستجدات التقنية والتكنولوجية. المالك الحالي لمدونة أبو إياد.

روابط هذه التدوينة قابلة للنسخ واللصق
URL
HTML
BBCode
تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
www.monte-escalier-prix.org