ايجى جراند: شرح اضافة ازرار التنقل لصفحات المدونة

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

أولا : نأخذ نسخه احتياطية من القالب

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

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

الآن إبحث عن الوسم :

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

}