شاشة الإنتظار

لغة القالب

زر الصعود لأعلى لمدونات بلوجر

كن مدون
الخميس, فبراير 24, 2022

 كنت تحدثت من قبل على أن إضافات بلوجر لم تعد أمر جيد ومناسب للقوالب الحديثة في هذا الموضوع 

لكن في نفس الوقت استثنيت الإضافات التي يتم وضعها في آداة HTML/JavaScript والتي لا تضاف للقالب وذلك لسهولة التعامل معها وقلة تأثيرها على الاكواد وسهولة حذفها

هناك اضافات كثيرة قديمة مهمة لبلوجر لكن ما يزال يجب توزيع أكوادها داخل القالب

لذلك سأكون حريص على اعادة تكويد او تعديل تلك الأدوات لتكون مناسبة للإضافة في آداة بحيث يسهل حذفها والتعامل معها

ومن ضمن تلك الإضافات والتي طلبت مني هي آداة زر الصعود لأعلى

زر الصعود لأعلى لمدونات بلوجر

عدلت الإضافة وهي الآن جاهزة مباشرة للتركيب على آداة HTML/JavaScript

يفضل أن تكون الآداة موضوعه في نهاية القالب الخاص بك أو أسفل منطقة المواضيع

ويمكنك معاينتها في الموضوع الزر موجود على اليمين ملحوظة وجود تأخير بسيط في المعاينة هذا سببه ان الكود مضاف هنا في الموضوع لكن لن تجده عند تركيب الآداة بشكل عادي

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js' type='text/javascript'></script>    

<style>

#CNMUp{display: none;position:fixed;right:30px;bottom:35px;background-color:#000;width:40px;height:40px;z-index:9;cursor:pointer;border-radius:4px;opacity:.5;transition:all .4s ease}

#CNMUp::before{content:"";border-style:solid;border-width:10px;border-color:transparent transparent #fff;position:absolute;right:calc(50% - 10px);top:calc(50% - 16px)}

#CNMUp:hover{opacity:1}

</style>

<div id="CNMUp"></div>

<script type="text/javascript">

 jQuery(document).ready(function(){var offset=220;var duration=500;jQuery(window).scroll(function(){if(jQuery(this).scrollTop()>offset){jQuery("#CNMUp").fadeIn(duration)}else{jQuery("#CNMUp").fadeOut(duration)}});jQuery("#CNMUp").click(function(event){event.preventDefault();jQuery("html, body").animate({scrollTop:0},duration);return false})});

</script>

السطر الأول المعلم بالأزرق قم بإزالته ان كانت لديك مكتبة Jquery وان لم تكن تعرف هل لديك المكتبة أم لا جرب الكود بدونه ان عمل جيداً معناه انها موجوده لم يعمل أضفه حينها

كود اللون المعلم بالأحمر #000 هو لون الزر يمكنك تغييره بأى لون مناسب

الرقم 4px عدله الى 100% ان اردت الزر مستدير

عدل كلمة right بـ left ان اردتها على اليسار والرقم 30 بجانبها هو درجة بعدها من اليمين

أما الرقم 35 هو درجة بعدها من الأسفل

الإضافة لا تحتوي لا صور ولا أيقونات فهي تعتبر خفيفه جداً

زر الصعود لأعلى لمدونات بلوجر كن مدون : موقع متخصص في تطوير منصة بلوجر

تعليقك يساهم في تطوير المحتوى ويزيد من الفائدة بمشاركتنا بأفكارك واقتراحاتك , رأيك يهمنا فساهم بتعليقاتك معنا
يرجى عدم وضع روابط خارجية في التعليقات لضمان نشرها

  1. والله رائع - جزاك الله خيرا
    هذا ماكنا ننتظر ♥

    ردحذف
    الردود
    1. جزاك الله بالمثل اخي الغالي منير
      يسرني ان الإضافة أعجبتك يا طيب

      حذف
  2. جزاك الله خيرا
    اضافة رائعة جدا
    بارك الله لك في مالك وعلمك وأهلك وصحتك

    ردحذف
    الردود
    1. تسلم أخي الكريم
      شكراً لك واللهم آمين واياكم
      سررت بمرورك كثيراً

      حذف
  3. شكرا على اللأضافه بارك الله لك فى علمك وصحتك

    ردحذف
    الردود
    1. أشكرك اخي الحبيب أحمد على دعمك الدائم للموقع

      حذف

عدد المواضيع