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

إعلان أدسنس

آخر المواضيع

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

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

أكتوبر 30, 2016

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

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

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

إرسال تعليق

مقالات