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

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

بسم الله والصلاة والسلام على اشرف خلق الله 

سيدنا محمد صلى الله عليه وسلم

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

توجد العديد من الطرق لإضافة مثل هذه الأداة إعتمادا على تقنيات مختلفة ، فمنها من يعتمد على تقنية Css وإضافات أخرى تعتمد على JavaScript أو تقنية JQuery وفى هذه التدوينة سأعرض الطريقتين والفرق بينهما لتختار من بينهم ما يناسب موقعك 

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

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

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

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

2 - تحرير Html 

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

]]></b:skin>

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

  /* Up and Down Buttons with jQuery by th3ddv.blogspot.com
    ----------------------------------------------- */
    .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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWKzBfumusFdOCpynsknfbTrkIGQkxkMhbrnz6KQy5Uy5SgxfjUN3TJa80mmqJzKZSe0d3MI3M36FvF-To1ub7-b93n-YgJnJqiTqlQ5ZyEhkH4bDscDuYxZ4umk1JUv38vF3tNJ_Bj8E/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqWDgbg-Bs9wvOgEr0X6KNK574HQCI1SFod5AjxyBHdNBxReL2Zt2G-tOmP_CPaf7vQQ851DdXvsQFIe5a0p3BPu_Ek4BAQXo4g_3IUM00sNSRusCIfqTc12YxjlUY6w-i_SitbpAWeKc/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);
    }

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

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

ثم قم بمعاينة القالب وحفظه 

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

بالرغم أن إستخدام تقنية jQuery من حيث التنسيق تكون أفضل ولكنى شخصيا أفضل إستخدام تقنية Css لهذه الأسباب :

1 - أحيانا يوجد تعارض بين مكتبات JQuery عند وجود أدوات أخرى تستخدم نفس التقنية مما يؤدى إلى تعطل أحد هذه الأدوات 

2 - إستخدام العديد من الأدوات التى تعتمد على JavaScript و JQuery يؤدى إلى بطء تحميل صفحات الموقع 

لذلك أفضل التخلى عن التأثيرات الجميلة الموجودة بإضافة JQuery وإستبدالها بإضافة بسيطة تعتمد على Html , Css 

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

1 - إذهب إلى لوحة التحكم >>> تخطيط

2 - أضف أداة Html , JavaScript 

3 - إنسخ الكود التالى وألصقه بالأداة 

/* Up and Down Buttons with Css By http://www.th3ddv.blogspot.com/
    ----------------------------------------------- */
<span style="background-color: #cc0000; bottom: 45px; position: fixed; right: 10px;border-top-left-radius: 5px;
border-top-right-radius: 5px;"><a href="#"><img border="0" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaN-g5ZUIt9fks3ou6c-PKkF4kSNzjuxeWX_XYmZ-S2QxmjSQe6UPkgdImSgSWfPrF3xHxRcaKOUFRvYQOrkBYdVch2Vb5QRYRX-i-FgsWMqx79NNLw4AxYxkrunYtTqTOoCxVIsb4lJm_/s200/up.png" width="25" /></a></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>

<span style="background-color: #cc0000; bottom: 20px; position: fixed; right: 10px;border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;"><a href="#footer"><img border="0" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlsjg2vYWj7uvROKWrn3XcDmqRad02rTQfBjOJtNzmbSs41iPyFEPp4OpUkjeA6uumCefsMZEx7iI7P3-odWRlDptJEg1xWVIgcTEqDwFSIJXKIoK5XHVkEPDSwYPV6nu1pIrXn-Gs_zBE/s200/down.png" width="25" /></a></span></div>
<br /></div>

-- يمكنك تغيير لون الإضافة بما يناسب موقعك بتغيير أكواد الألوان الملونة باللون الأصفر 

-- أحيانا فى بعض القوالب يسمى الفوتر "Footer" وقوالب أخرى يسمى "Footer-1" لذلك يمكن إستبدال الجزء الملون باللون 

الأخضر بالتسمية الموجودة بقالب مدونتك 

-- إذا كنت ترغب أن يقفز الزر إلى التعليقات قم بإستبدال الجزء الملون بالأخضر بكلمة Comments

إذا واجهت مشكلة فى تركيب الإضافة يمكنك طرحها فى تعليق وشكرا