إضافة زر Back top Button

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

 

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

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

أتركك مع الشرح فهو جد بسيط

 

توجه إلى لوحة التحكم / تخطيط / إضافة أداة / Html/JavaScript

 

  

بعد ذالك قم بنسخ الكود بالأسفل و ضعه في المربع المخصص للكود

<!--BACK2TOP-STARTS-->
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJjEW5Ow2jqqaqyintOMgW-i-WBJLqEQqAwA8b4UNQC8lKv1K6CSquPwsQxyEUNLtK1lYBf83qCkwarFIsOV-NzcMLhY2prJ-4H_zAGj9Skhy91bCsrpIn9mSfX_7lcTHxvlUNuCYrkeA/s1600/up+b.png" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXre9GoaigpfLUo6OulTA1WXAIhowxA8Tg61l6RNG0L4Hh2JodI4a1FITaTOd-eXriRcmpW9q56ziEoSM2p8YCM3HRCfTqS2Yxw34BCjZovSOKMREdr0l3y1_cPSAG92BYL4HkjoJwhMc/s1600/up+s.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXre9GoaigpfLUo6OulTA1WXAIhowxA8Tg61l6RNG0L4Hh2JodI4a1FITaTOd-eXriRcmpW9q56ziEoSM2p8YCM3HRCfTqS2Yxw34BCjZovSOKMREdr0l3y1_cPSAG92BYL4HkjoJwhMc/s1600/up+s.png'"/></a>
<!--BACK2TOP-STOPS—>

 

ثم قم بحفظ الأداة ستجد الإضافة على أسفل اليمين في المدونة.

 

يمكنك تغير الصورة بالصورة التي تريد ما عليك سوى تغير الرابط بالأحمر برابط الصورة الأكبر ثم تغير الرابطين باللون الأزرق بصورة الأصغر.

 

أتمنى أن تكون الإضافة نالت إعجابك.

مواضيع تفيدك أيضاَ :

اذا احببت هذه المقاله , رجاء منك انسخ الرابط وقم بنشره .

رابط هذه المشاركة :

http://te-7.blogspot.com/2011/07/back-top-button.html

كود HTML لهذه المشاركة:

<a href="http://te-7.blogspot.com/2011/07/back-top-button.html">إضافة زر Back top Button</a>