كيفية اضافة زر الصعود لاعلى والنزول لاسفل لمدونات بلوجر

مقدمة عن الموضوع :

السلام عليكم ورحمة الله ...
اليوم فى موضوع جديد واضافة جد مفيدة عبارة عن زر للصعود لأعلى والنزول لاسفل لمدونات بلوجر حتى تسهل على الزائر تصفح مدونتك .. والاسهم تظهر بشكل انسيابى .

مثال مباشر

شرح التركيب :

أولا : توجه الى القالب ثم تحرير html :

واضغط بداخل القالب على ctrl+f لكى تبحث عن الوسم التالى التالى :

]]></b:skin>

بعد ان تجده الصق قبله (فوقه) الكود التالى :

/* ------http://hi-tech-eg.blogspot.com------- */
.button_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmYFMJGOgfAM_kgFuzZY-lu2jKBmmQ8h1hFTNsBe0CHVX4LWaOvn4V9c-HlOZLFjmYa0bttSYlBobXb2XVhMaldTAcbvl7qOpIpiQtt3miYFDZ0vjg_bmXFzvs1AJ56OJ0pKmOB0Txjw/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:280px;
right:5px;
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
}
.button_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaPqudTK9WfRied67bwBSWKiausb48BjWjiIBT5YkQUy0rqV7d5LaNv1gtjHvXA0KrKWxo4h0dbKTK4ZsbEKr6FqKXWlAy8Sr18wvOSo_5j1c75YHaaw0J6VlXhQPGj-KyufJJKQVkrg/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:242px;
right:5px;
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
}
/* ------http://hi-tech-eg.blogspot.com------- */

يمكنك التحكم فى وضع الاسهم من خلال الكود السابق .

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

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

ثم احفظ القالب وجرب بنفسك :)

الى هنا ينتهى الموضوع والسلام عليكم ورحمة الله