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

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

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

شرح تركيب :

أولاً : نتوجة إلى القالب ثم تحرير Html :

ثم نضغط داخل القالب Ctrl+F ونبحث عن الوسم :

]]></b:skin>

بعد أن نجده نلصق قبله هذا الكود :

 /* ------http://www.tooky.info------- */
.button_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaOhLQJNLlkrop9BXt4nQ6gm6AhEZDnZdi7RWSdAvtLEAJGPz42PiW2QEtB3NAWrrHZHRWUwaAWr_5YZsma0DevyptAYUKF3lnCMgUimPQZI_d8Tvg3bAAnfNI-bTmVfyOqn1RNx5q6bQ/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/AVvXsEhdwJFmx-zhgS4vWvNAyz-4ANTa1xOUFSEc5vVY5qVQFFnPuDeRr4M4GDmYBJBioC6u7oZyZM9SPcrQbMtaTksxjoUOuGmbkLCUeNs2CiHgSZHzgirIE7ydzlNkglBvJA0-cmK0HmGTq_Q/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://www.tooky.info------- */

  

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

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

ثم احفظ القالب وادخل موقعك وجرب ذلك .

  

Tweet

إقرأ أيضا

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

4/ 5

Oleh Nasher

في 8:01 م