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

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

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

لإضافة زر الصعود لأعلى الصفحة أنقل من لوحة تحكم المدونة إلى => المظهر => تعديل HTML

أبحث عن الرمز </body> ستجده اسفل دائمًا ثم اضف الكود التالي فوقه مباشرةُ:

<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

مجلة نانو الترفيهية

القائمة الرئيسية

الصفحات

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

أخر المواضيع من قسم : SEO

تعليقات

إرسال تعليق