كيفية إضافة زر العودة إلى الأعلى في بلوجر (Back To Top)
(Lazy Load – Dark Mode – فهرس – أزرار المشاركة)
السلام عليكم ورحمة الله وبركاته، في هذا المقال سنتعرف على إضافة مهمة من إضافات بلوجر وهي زر العودة إلى الأعلى، هذه الإضافة تساعد الزائر على الرجوع بسرعة إلى أعلى الصفحة خاصة في المقالات الطويلة، مما يحسن تجربة المستخدم ويعطي احترافية للمدونة.
ما هي إضافة زر العودة إلى الأعلى؟
هي إضافة بسيطة تظهر على شكل زر عائم في أسفل الصفحة، وعند الضغط عليه يتم نقل الزائر مباشرة إلى أعلى المقال بدون الحاجة إلى التمرير اليدوي.
فوائد إضافة زر العودة إلى الأعلى
- تحسين تجربة المستخدم داخل المدونة
- تسهيل التنقل بين محتوى الصفحة
- مناسبة للمقالات الطويلة
- خفيفة ولا تؤثر على سرعة الموقع
- تعطي مظهراً احترافياً للمدونة
كود إضافة زر العودة إلى الأعلى
قم بنسخ الكود التالي كما هو:
<!-- Back To Top Button -->
<style>
#backToTop {
position: fixed;
bottom: 20px;
right: 20px;
background: #007bff;
color: #fff;
padding: 10px 14px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
display: none;
z-index: 9999;
}
#backToTop:hover {
background: #0056b3;
}
</style>
<div id="backToTop">↑</div>
<script>
var btn = document.getElementById("backToTop");
window.onscroll = function () {
if (document.documentElement.scrollTop > 300) {
btn.style.display = "block";
} else {
btn.style.display = "none";
}
};
btn.onclick = function () {
window.scrollTo({ top: 0, behavior: "smooth" });
};
</script>
<!-- End Back To Top Button -->
طريقة تركيب الإضافة في بلوجر
- ادخل إلى لوحة تحكم بلوجر
- توجه إلى المظهر
- اضغط على تعديل HTML
- الصق الكود قبل وسم
</body> - احفظ القالب
ملاحظات مهمة
- يمكنك تغيير لون الزر من الكود بسهولة
- يمكنك تغيير مكان الزر (يمين أو يسار)
- الإضافة تعمل على الهاتف والكمبيوتر
خاتمة
إضافة زر العودة إلى الأعلى من الإضافات الضرورية لأي مدونة بلوجر تهتم بتجربة الزائر، ننصحك بتجربتها وستلاحظ الفرق مباشرة في سهولة التصفح داخل مدونتك.
عن الكاتب
قاسي للمعلومات، صانع محتوى عربي مهتم بشرح تقنيات بلوجر وتحسين المواقع، أشاركك شروحات عملية وأكواد جاهزة تساعدك على تطوير مدونتك بشكل احترافي وبأسلوب بسيط وسلس.
شكرا لمرورك الجميل سنرد عليك بأحسن تعليق