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

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

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

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

<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.monte-escalier-prix.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;}

بقلم المهندس كمال خضر

مبرمج متخصص

• 
• 
• 
• 
• شارك مع اصدقاءك