مساحة اعلانية

موضوع عشوائي

آخر المواضيع

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

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

طريقة تركيب الأداة :

  1. تخطيط
  2. اضافة اداة
  3. HTML/JavaScript 
  4. انسخ الكود التالي
  5. اضغط حفظ
  6. <style type='text/css'>/* 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:"";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:"";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:""; 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:"";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:"";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:"";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><script type='text/javascript'>$(function() { $(window).scroll(function() { if($(this).scrollTop()>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><div id='GoToDown'></div>
    

الكــاتــب

    • مشاركة

هناك تعليق واحد:

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

    ردحذف

جميع الحقوق محفوظة لــ فلاما للمعلوميات 2019 ©