هذه الأضافة لا تحتوى على اى صور فهى مجرد كتابة ولكنها منسقة بخاصية الــ Css وبشكل بسيط ومن وجهة نظرى افضل من الاضافة الذى تحتوى على صورة ولمن يريد هذه الأضافة الذى تحتوى على شكل صور علية الأنتقال الى هذا الدرس الذى يوجد بها اضافة زر سهم الأنتقال الى اعلى الصفحة بمدونات بلوجر .
تعرفنا الأن على فائدة اضافة زر الانتقال الى الاعلى اسفل المدونة لا يتبقى سوى ان تعرف طريقة التركيب تابع معى .
اضافة زر العودة الى الاعلى اسفل مدونة بلوجر
بالبداية اذهب الى لوحة تحكم المدونة ومنها اختار المظهر ومن بعدها اضغط على تحرير HTML ثم اضغط على CTRL + F من لوحة المفاتيح الكيبورد لظهور خانة البحث .
الان عليك بالبحث عن هذا الكود :
]]></b:skin>
ضع فى اعلاه مباشرة هذا الكود :
.back-to-top {display:none;position: fixed;bottom: 2em;right: 0px;text-decoration:none;color: #000000;background-color: rgba(121, 235, 229, 0.8);font-size: 12px;padding: 1em;}.back-to-top:hover {background-color: rgb(63, 191, 191);text-decoration:none;color:#ffffff;}
ثم قم بالبحث عن هذا الكود :
</body>
ضع فى اسفلة مباشرة هذا الكود :
<a href="#" class="back-to-top">الى الأعلى</a><script>jQuery(document).ready(function() {var offset = 220;var duration = 500;jQuery(window).scroll(function() {if (jQuery(this).scrollTop() > offset) {jQuery('.back-to-top').fadeIn(duration);} else {jQuery('.back-to-top').fadeOut(duration);}});jQuery('.back-to-top').click(function(event) {event.preventDefault();jQuery('html, body').animate({scrollTop: 0}, duration);return false;})});</script>
بالأخير اضغط على حفظ متغيرات القالب
الأن اذا ذهبت الى اى صفحة بالمدونة ستجد الاضافة بأسم ( الى الأعلى )
اذا كنت تريد ان تغير الكلمة الى كلمة اخرى قم بتغير كلمة الى الاعلى المحددة فى الكود باللون الاحمر ولكن من الأفضل ان تتركها كما هى اعتقد الحجم والكلمة مناسبة ولكن الأختيار لك .
بالاخير اتمنى بأن اضافة زر الأنتقال الى اعلى الصفحة اسفل مدونة بلوجر Back to Top اعجبتكم وانتظرونى قريبا سأضع لكم اهم الاضافات فى قسم دروس بلوجر فى القريب العاجل ان شاء الله واى استفسار او مشكلة اترك تعليق .
ليست هناك تعليقات:
إرسال تعليق
قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )