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

إعلان أدسنس

آخر المواضيع

breaking/قوالب بلوجر/9
مقالات

الأحد، 30 أكتوبر، 2016

4:39 ص

تكبير النص تصغير النص أعادة للحجم الطبيعي
 اضافة زر العودة الى الاعلى بشكل صاروخي و احترافي
السلام عليكم احبائي متابعي فيصل للمعلوميات

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

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

إرسال تعليق

مقالات