كيفية اضافة زر الصعود للاعلى لبلوجر

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

كيفية اضافة زر الصعود للاعلى لبلوجر

شاهد ايضا

• كيفية معرفة توافق موقعك مع جميع الاجهزة
• كيفية اخفاء مفتاح بلوجر

كما ترون امامكم هذا هو سيكون شكل الزر فى مدونتك بعد تركيبه ولكن دعونى اشرح لكم القليل عن هذه الاضافة
 1- زر الصعود للاعلى يتكون من كودين ستضعهما داخل مدونتك الكود الاول سيضاف فوق  ]]></b:skin> مباشرة وهذا هو الاستايل الخاص بالزر والذى بامكانك التحكم فى شكل الزر من خلاله وايضا نقله الى اليمين والى اليسار من خلاله ايضا والتكحم فيه بشكل كامل
2- الكود الثانى هو كود html وهذا الكود الذى سيضاف فى <bady/>  لان هذه فى اخر المدونه وايضا لعدم التسبب فى بطأ مدونتك عند التحميل لان <bady/>   فى اخر اكواد داخل المدونه بحيث يتم تحميل الزر بعد تحميل جميع صفحات المدونة لكى لايتسبب فى عرقلة الصفحات الاخرى ويتم تشتيت تحميل مدونتك

 كيفية تكيب زر الصعود للاعلى ؟

ان الطريقه سهله جدا تابع معى

1- التوجه الى الصفحة الرئيسية لمدونتك 

2- اضغط على كلمة قالب من القائمه الجانيه

2- تحرير html

4- بعد الدخول لقالب مدونتك اضغط فى اى مكان داخل القالب 

5- اضغط على مفتاح ctrl + f  سيظهر لك مربع البحث ضع فيه الكود التالى واضغط enter

]]></b:skin>

بعد الضغط على Enter سيظهر لك الوسم
اضف فوقه مباشرة الكود التالى

/* 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)}

والان نضيف اخر كود
نبحث عن الوسم التالى

<bady/>

ونضيف فوقه مباشرة الكود التالى

<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>

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

اضافات بلوجر شروحات بلوجر نصائح المدون

hisham mustafa

انا هشام اسمي هشام عايش هشام نايم هشام باكل هشام بشرب هشام