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

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

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

معاينة الذهاب الي الموقع

 <div id='downfooter'/>
<a href='#' id='slidetop'><i class='fa fa-chevron-up' title='Slide up'/></a><a href='#' id='slidebottom'><i class='fa fa-chevron-down' title='Slide down'/></a>
<script type='text/javascript'>
//<![CDATA[
!function(o){o(window).scroll(function(){o(this).scrollTop()>75?(o("#slidetop").removeAttr("href"),o("#slidetop").fadeIn()):o("#slidetop").fadeOut()}),o(function(){o("#slidetop").click(function(){return o("html, body").animate({scrollTop:0},"slow"),!1})})}(jQuery),function(o){o(window).scroll(function(){o(this).scrollTop()<0?(o("#slidebottom").removeAttr("href"),o("#slidebottom").fadeOut()):o("#slidebottom").fadeIn()}),o(function(){o("#slidebottom").click(function(){return o("html, body").animate({scrollTop:$("#downfooter").offset().top},"slow"),!1})})}(jQuery);
//]]>
</script>

الخطوة الأخيرة اضف الكود التالي فوق الرمز</head> 

 

 <style type='text/css'>
#slidetop,#slidebottom{background:#e74c3c
;margin:0;padding:5px 15px 0;border-radius:0;position:fixed;color:#fff;bottom:0;cursor:pointer;display:none;line-height:2;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:all .3s}#slidetop:hover,#slidebottom:hover{background:#333}#slidetop{left:46px;border-radius:5px 0 0 0}#slidebottom{background:#c0392b;left:0}
@media only screen and (max-width:768px){#slidetop{left:44px}}
<style>

انقر على حفظ المظهر لتغيير لون الاداة.

غير رمز اللون المعلمة في كود CSS ملاحظة إذا لم تظهر ايقونات الإضافة بشكل صحيح فأنت بحاجة لخط font-awesome

 

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا