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