الخميس، 22 فبراير 2018

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

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

طريقة تركيب الزر 

  1. ادخل علي لوحة تحكم المدونة
  2. انتقل الي تبويب المظهر
  3. انقر علي تحرير HTML
ابحث عن الوسم ]]></b:skin> واضف الكود التالي فوقه 
/* 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)}

الخطوة الثانية ابحث عن الوسم </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>

الان قم بحفظ القالب و مبروك عليك الإضافة اي سؤال او استفسار لا تترد بوضع في تعليق

لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق

اضف تعليقك