كيفية إضافة زر الصعود للأعلى بطريقة احترافية ( على شكل صاروخ 🚀 )

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

شرح طريقة التركيب
1. توجه القالب ثم تحرير Html
2. ابحث بإستعمال CTRL+F عن ]]></b:skin> 
3. ضع الكود التالي فوقه:

#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-transf
4. إبحث عن </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>