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

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

لــن أطوّل عليــكـ ونتوجّه مبـاشرة الى شرح التطبيق ,

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

<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://rifed-blog.blogspot.com/"></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;
}
ثم قم بحفظ القالب .
ومبروك عليــكـ إلى تدويـنة أخرى في مدونة رفاد إن شـاء الله .

تعليقات

المشاركات الشائعة من هذه المدونة

كود المساحات الاعلانيه الرائع

طرق جلب الزوار الجزء الثاني

أكواد HTML مهمة لكل مدون بلوجر