الجمعة، 30 يونيو، 2017

اضافة زر الأنتقال الى اعلى الصفحة اسفل مدونة بلوجر Back to Top

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

هذه الأضافة لا تحتوى على اى صور فهى مجرد كتابة ولكنها منسقة بخاصية الــ 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 اعجبتكم وانتظرونى قريبا سأضع لكم اهم الاضافات فى قسم دروس بلوجر فى القريب العاجل ان شاء الله واى استفسار او مشكلة اترك تعليق .


ليست هناك تعليقات :

إرسال تعليق

قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )

الموافقة على نشر التعليقات

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