إضافة الصعود للأعلى بشكل صاروخ

إضافة الصعود للأعلى بشكل صاروخ

يوجد الآن مشاهدة التعليقات : 2

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

توجد العديد من الإضافات والطرق الجميلة لتصميم مثالي ورائع وهكذا الحال مع إضافة زر الصعود للأعلى، فالمدون دائماً ما يحب رؤية موقعه أو مدونته بشكل جيد وكذلك يتيح لمتابعيه حركة سلسلة في مواضيع وجنبات الموقع وإضافة إصعد إلى الأعلى من الإضافات التي توفر لك الأمرين والأكثر من هذا لأنها سهلة التطبيق وتناسب جميع القوالب لا من حيث اللون والشكل وهذا مغاير لإضافتنا اليوم فالزر عبارة عن 🚀 بتأثير واقعي
الشكل الأول : إضافة زر الصعود للأعلى
شرح طريقة التركيب
1 . توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن ]]></b:skin> ضع الكود التالي فوقه
#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(//ar1web-com.googlecode.com/svn/trunk/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(//ar1web-com.googlecode.com/svn/trunk/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}
3. إبحث عن </body> وضع الكود التالي فوقه
<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a>
<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script>
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك تعليقان (2):

  1. جميل أضافة حلوة و روعة شكرا :)

    ردحذف
  2. لا تظهر عندي ما الحل ؟

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم