إضافة زر الصعود للأعلى و زر النزول للأسفل

                           

                                                  

إضافة زر الصعود للأعلى و زر النزول للأسفل

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

 الإضافة موجودة على اليمين في مدونتنا

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

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

من لوحة تحكم بلوجر ، قالب

HTMLتحرير      

ننقر بالزر الأيسر للفأرة داخل صفحة الأكواد،ثم

نضغط على ( CTRL + F) ليظهر مربع البحث .

- نبحث عن هذا الكود  :]]></b:skin>  

نضع فوقه الكود التالي:

• 
  

/* Up and Down Buttons with jQuery (http://azails1.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/AVvXsEintd8LnuJvyC_MnMtxYpvtnF2ECkJaG0YZ-x2UGB3Iag4o79RYrwC4KAEDvR5Lcl3yuYFIqVpbEweaWxfkLSa1AwTnZlP0fnBTpIu-gl-WCytX8ZvbirjAITCgXq6AZoPUuWU__AtqR2Y/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/AVvXsEhH7HPKO5UHJmhN27zoyqPd-WdFc7Ml6v6Ugg5moHj0PyvPzi2l3im7Cx7Jm4e2x6L9VzemgrpOcdXi0-am010GxCV8NdTNkMlxqDnSVBsiDIlA-fOdjlv4tZW0-BhlzjAfu-yxGajIf58/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);
}

 ملاحظة :  زري الصعود و النزول في هذا الكود يظهران علىاليمين ، فإذا أردت نقل أحدهما أو كلاهما إلى اليسار ما عليك إلا تغيير كلمة right المكتوبة بالأحمر بكلمة left  .

كما يمكنك تغيير رابط الصورة الملون بالأخضر برابط صرورة أخرى تناسب مدونتك
الرابط الأول لزر الصعود و الثاني لزر النزول.

  الخطوة الأخيرة نبحث عن الكود

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

في الأخير احفظ التغييرات ومبروك الإضافة

اكتب تعليقا أو استفسارا  و سنحاول مساعدتكم انشاء الله