كيفية اظافة أزرار الإتجاه أعلى أو أسفل الصفحة إلى بلوجر

كيفية اظافة أزرار الإتجاه أعلى أو أسفل الصفحة إلى بلوجر

كيفية اظافة أزرار الإتجاه أعلى أو أسفل الصفحة إلى بلوجر

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين سيدنا محمد وعلى آله وصحبه أجمعين.

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

توجد العديد من الطرق لإضافة مثل هذه الأداة إعتمادًا على تقنيات مختلفة ، فمنها من يعتمد على تقنية Cssوإضافات أخرى تعتمد    Javascript  أوتقنية JQurey وفى هذا الموضوع سأعرض الطريقة الاولى وفي التدوينة المقبلة ان شاء الله  سوف نتطرق للطريقة الثانية والفرق بينهما لتختار من بينهم ما يناسب موقعك.

زر العودة إلى أعلى أو الذهاب لأسفل الصفحة بإستخدام تقنية jQuery

ما يميز هذه الأداة هو سهولة الإستخدام مع وجود تأثير التلاشى Fade effect أثناء الصعود لأعلى الصفحة أو الهبوط إلى الأسفل.

تركيب الإضافة لمدونات بلوجر

1. إذهب إلى لوحة تحكم مدونتك ثم إختر قالب ( لاتنس الإحتفاظ بنسخة إحتياطية من القالب)

2. تحرير Html

3. قم بالبحث عن الكود التالى بإستخدام لوحة المفاتيح Ctrl+F

]]></b:skin> </div>

4. ثم قم بلصق الكود التالى فوقه مباشرة.

/* Up and Down Buttons with jQuery ----------------------------------------------- */ .button_up{ padding:7px; /* Distance between the border and the icon */ background-color:white; border:1px solid #CCC; /* Border Color */ position:fixed; background: white url(http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png) no-repeat top left; background-position:50% 50%; width:20px; /* Button's width */ height:20px; /* Button's height */ bottom:280px; /* Distance from the bottom */ right:5px; /* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } .button_down{ padding:7px; /* Distance between the border and the icon */ background-color:white; border:1px solid #CCC; /* Border Color */ position:fixed; background: white url(http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png) no-repeat top left; background-position:50% 50%; width:20px; /* Button's width */ height:20px; /* Button's height */ bottom:242px; /* Distance from the bottom */ right:5px; /* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }

5. بعد ذلك قم بالبحث عن الكود التالى

</body>

ثم قم بلصق الكود التالى فوقه مباشرة
** إذا كان السطر الملون باللون الأحمر موجود فى القالب فلا داعى إلى إضافته مرة أخرى


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <div class='button_up' id='button_up' style='display:none;'/> <div class='button_down' id='button_down' style='display:none;'/> <script> //<![CDATA[ (function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})(); $(function() { var $elem = $('body'); $('#button_up').fadeIn('slow'); $('#button_down').fadeIn('slow'); $(window).bind('scrollstart', function(){ $('#button_up,#button_down').stop().animate({'opacity':'0.2'}); }); $(window).bind('scrollstop', function(){ $('#button_up,#button_down').stop().animate({'opacity':'1'}); }); $('#button_down').click( function (e) { $('html, body').animate({scrollTop: $elem.height()}, 800); } ); $('#button_up').click( function (e) { $('html, body').animate({scrollTop: '0px'}, 800); } );}); //]]> </script>

دمتم في رعاية الله عز وجل

ادا اعجبك الموظوع قم بمشاركته مع اصدقائك