ما هي طريقة إضافة زر العودة الى فوق بشكل جديد ؟

[raheel]

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

أول شيء سنفعله افتحو بلوجر و تابعو الشرح بالترتيب :​

1 = أدخلو على لوحة التحكم ​

2 = إضغطو على تبويب القالب ​

3 = إضغطو تحرير HTML​

4 = إبحث عن الوسم ]]> </ b: skin> و أضف الكوف التالي فوقه .​

​

/ * Back to Top Rocket slide * /
#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: .6s visibility 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: .6s visibility 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 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: i hover {background-position: 50% 100%; - webkit-animation: flaming .7s infinite; -moz-animation: flaming .7s infinite; animation: flaming .7s rocketmeluncur.showrocket infinite} # {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)} ​

5 = إبحث عن الوسم </ 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 * lr: 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>​

6 = قم بحفض القالب و ألق نضرة على المدونة لتجريب الإضافة الجديدة .
إنتهى ^_^