بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته زوار ومتابعى المدونة تحية طيبة وبعد ....توجد العديد من الإضافات والطرق الجميلة لتصميم مثالي ورائع وهكذا الحال مع إضافة زر الصعود للأعلى، فالمدون دائماً ما يحب رؤية موقعه أو مدونته بشكل جيد وكذلك يتيح لمتابعيه حركة سلسلة في مواضيع وجنبات الموقع وإضافة إصعد إلى الأعلى من الإضافات التي توفر لك الأمرين والأكثر من هذاأنها سهلة التطبيق والإضافة وبأشكال تناسب جميع القوالب لا من حيث اللون والشكل وهذا مغاير لإضافتنا اليوم فالزر عبارة عن صاروخ بتأثير واقعي
طريقة التركيب:
- توجه إلى قالب >> تحرير
- ثم انقر على تحرير
HTML - ابحث عن الوسم
]]></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)}
<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>
- يحق لك نسخ الموضوع بشرط ذكر المصدر
يسعدنا تفاعلكم بالتعليق، لكن يرجى عدم وضع أي روابط خارجية أو إشهارية حتى ينشر التعليق