الموقع الشامل في تحميل التطبيقات والبرامج والالعاب الموقع الشامل في تحميل التطبيقات والبرامج والالعاب
random

آخر الأخبار

random
random
جاري التحميل ...

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

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



السلام عليكم احبائي متابعي ضياء الاحتراف
اليوم اتيتكم بموضع اضافة زر العودة الى الاعلى على شكل صاروخ , كما يمكنك تغيير صورة الصاروخ الى اي شكل يروق لك
ان مميزات اضافة زر العودة الى الاعلى انها تخول لكل متصفح لمدونتك من الارتياح خصوصا عندما تكون الموضوعات طويلة مما يتتطلب استعمال هده الاداة دون الحاجة الى عجلة الفارة ان صح التعبير , وهذا يجعل الزائر يمكت طويلا في مدونتك نظرا لسهولة تصفحها .
لاضافة
زر العودة الى الاعلى بشكل صاروخي المرجو تتبع الخطوات التالية :
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> تم ضع قبله هذا الكود

<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>
قم بحفظ القالب و مبروك عليك الاضافة

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

عن الكاتب

مدونة الشامل

التعليقات

مساحة اعلانية
مساحة اعلانية

اتصل بنا

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

جميع الحقوق محفوظة

الموقع الشامل في تحميل التطبيقات والبرامج والالعاب