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

يعد زر الصعود والهبوط في مدونات بلوجر خصوصا والمدونات عموما بمثابة الآداة المسرعة لصعود الزائر لبداية الصفحة وهبوطه بعد ذلك، لذلك، يحبها زائر المدونة لسهولة تصفحه المدونة حتى يجد ما يريد، أدرجنا لكم كود خاص بمدونة بلوجر لادراج زر الصعود وأيضا الهبوط لوضعه في مدونتك:

زر الصعود والهبوط لمدونات بلوجر

طريقة تركيب كود زر الصعود لأعلى وأسفل

• في القالب ابحث عن الكود التالي: 

]]></b:skin>

• وأضف تحته هذا الكود 

<style>
/* CSS Top Down Hm */
#BounceToTop {background:#fff;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:30px;height:20px;padding:5px;display:none;border-radius:2px;}
#BounceToTop:before {content:&quot;&quot;;position:absolute;bottom:5px;right:5px;width:0; height:0;border-style:solid;border-width:0 15px 20px 15px;border-color:transparent transparent #00acd6 transparent;line-height:0;transition:all 0.3s ease-out;}
#BounceToTop:hover:before {content:&quot;&quot;;position:absolute;bottom:5px;right:5px; width:0;height:0;border-style:solid;border-width:0 15px 20px 15px;border-color:transparent transparent #00c0ef transparent;line-height:0}
#BounceToTop:after {content:&quot;&quot;; position:absolute;bottom:5px;right:11px;width:0; height:0;border-style:solid;border-width:0 9px 12px 9px;border-color:transparent transparent #fff transparent;line-height:0;}
#GoToDown {background:#fff;text-align:center;position:fixed;bottom:10px;right:60px;z-index:999;cursor:pointer;width:30px;height:20px;padding:5px;border-radius:2px;}
#GoToDown:before {content:&quot;&quot;;position:absolute; bottom:5px;right:5px; width:0;height:0;border-style:solid;border-width:20px 15px 0 15px;border-color:#E74C3C transparent transparent transparent;line-height:0;transition:all 0.3s ease-out;}
#GoToDown:hover:before {content:&quot;&quot;;position:absolute; bottom:5px; right:5px;width:0;height:0;border-style:solid;border-width:20px 15px 0 15px;border-color:#C0392B transparent transparent transparent;line-height:0}
#GoToDown:after {content:&quot;&quot;;position:absolute;top:5px;right:11px;width:0; height:0;border-style:solid;border-width:12px 9px 0 9px;border-color:#fff transparent transparent transparent;line-height:0;}
</style>

ثم ابحث عن:

</body>

• وأضف فوقه الكود التالي:

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); var $elem = $('body');
$('#GoToDown').click(function () {
$('html, body').animate({scrollTop: $elem.height()}, 4000);
$('#GoToDown').fadeOut()
});
$('#BounceToTop').click(function () {
$('#GoToDown').fadeIn()
});
});
</script>
<div id='BounceToTop'/>
<div id='GoToDown'/>

واستمتعوا بعد ذلك