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

بسم الله الرحمان الرحيم 

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

إن أهم ما في هذه الإضافة أنها تظهر دائما أسفل الصفحة وتختفي في كل مرة يصعد الزائر ويقارب سطح المدونة - إن صح التعبير - وكذلك عند على الزر للصعود ترتفع الصفحة بسلاسة كأنك تستمل المصعد، إنها حقا جديرة بالإضافة !
إذا اقتنعت بإضافتها بعد هذا العرض المفصل والكلمات المغرية ( رائعة، جميلة، مهمة، جيدة...) فاتبع الخطوات الآتية

تركيب الإضافة

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>

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

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

بقلم عبد ربه تحتح

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