اضافة زر العودة الى الاعلى بشكل صاروخي و احترافي

السلام عليكم احبائي متابعي المنفد للمعلوميات

اليوم اتيتكم بموضع اضافة زر العودة الى الاعلى على شكل صاروخ , كما يمكنك تغيير صورة الصاروخ الى اي شكل يروق لك
ان مميزات اضافة زر العودة الى الاعلى انها تخول لكل متصفح لمدونتك من الارتياح خصوصا عندما تكون الموضوعات طويلة مما يتتطلب استعمال هده الاداة دون الحاجة الى عجلة الفارة ان صح التعبير , وهذا يجعل الزائر يمكت طويلا في مدونتك نظرا لسهولة تصفحها .
لاضافة زر العودة الى الاعلى بشكل صاروخي المرجو تتبع الخطوات التالية :
1.لوحة التحكم
2.إضغط على قالب
3. ثم تحريرhtml
4.إبحث بالضغط على CTRL+F عن الكود التالي : ]]></b:skin> او </style>
5.ثم ضع قبله الكود التالي مباشرةً :

/* Back to Top Roket meluncur */

#scrolltop{display:none}

#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/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(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/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)}

يمكنك تغيير صورة الصروخ الى اي صورة تروق لك

http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png

6. ابحت عن </body> تم ضع قبله هذا الكود

//<![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>

قم بحفظ القالب و مبروك عليك الاضافة

ان اعجبكم الموضوع لا تنسى مشاركته مع اصدقائك لتعم الفائدة .