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

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

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

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

<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;
}

وأخيرا قم بحفظ القالب ،أتمنى أن تنال هذه الإضافة إعجابكم.

روابط هذه التدوينة قابلة للنسخ واللصق
URL
HTML
BBCode