اضافة زر الصعود لاعلى والرجوع لاسفل لبولجر

تقنية حضرموت 12:28:00 م

السلام عليكم ورحمة الله وبركاته

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

 

ناتي لطريقة تركيب الاضافه: 

اولا: توجه لقالب المدونه واضغط تحرير ثم قم بالبحث عن الكود التالي  ]]></b:skin>والصق الكود التالي فوقه:

/* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPq5fheFGEkgZtTqMvH8WwpywDTBHlVD6_IpmNHSjDAB5j8z_eUnlJe25bZpACaHI_lvbmZVJlDefF3qOW1Gbu-ljbPzbNwdn1s9-hAmHj6yUHtEFwB-nJ-8f0RR2crvImNrURas1LlQk/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/AVvXsEiha2LMX_NBcfMmgAEH8lfmsBTa_xRdMyhDXGMaP__5vyt0Znfn-ndt3UNsRcBbZrPVECFQH9j7XR8gDwNEvfBw8zs7orF7TxkqhU-QNa8BGvr8_VkIL8NyVknxD-OvapYS2a0GVai9XJM/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

مكان ضهور الاداه 

باللون

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiha2LMX_NBcfMmgAEH8lfmsBTa_xRdMyhDXGMaP__5vyt0Znfn-ndt3UNsRcBbZrPVECFQH9j7XR8gDwNEvfBw8zs7orF7TxkqhU-QNa8BGvr8_VkIL8NyVknxD-OvapYS2a0GVai9XJM/s16/arrow_down.png

لون صور الاداه بامكانك تعديلهم.

ثانيا: قم بالبحث عن </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>

 اخيرا احفض القالب