نقطة تحول | مدونة الربح من الإنترنت وشروحات بلوجر 2025

🔝 طريقة إضافة زر الصعود إلى أعلى الصفحة في مدونة بلوجر بسهولة واحترافية (الشرح الكامل بالطريقتين)

هل لاحظت أثناء تصفحك لبعض المدونات وجود زر صغير في أسفل الشاشة يُعيدك للأعلى بمجرد ضغطة واحدة؟ 🔝
هذا هو زر الصعود إلى الأعلى (Back to Top Button)، من أكثر الإضافات البسيطة التي تمنح موقعك مظهرًا احترافيًا وتجعل تجربة الزائر أكثر سلاسة وسهولة.

في هذا المقال من مدونة نقطة تحول سنتعرف على:

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

---

🚀 أهمية زر الصعود إلى الأعلى:

وجود هذا الزر في مدونتك مش مجرد شكل جمالي، لكنه ضروري لتجربة المستخدم UX وتحسين بقاء الزائر في موقعك.

• ⚡ راحة الزائر: يمكنه الرجوع لأعلى الصفحة بسهولة بضغطة واحدة.
• 💻 مظهر احترافي: أغلب المواقع الكبيرة تستخدمه مثل Blogger وWordPress.
• 📱 تحسين تجربة التصفح على الهاتف: مفيد جدًا للشاشات الصغيرة.
• ⏫ تقليل معدل الارتداد: لأن الزائر يتنقل بسهولة داخل الصفحة.

---

🧩 الطريقة الأولى: إضافة الزر من خلال "التخطيط" في بلوجر

الطريقة الأسهل والمناسبة للجميع 👇

1. افتح لوحة تحكم بلوجر.
2. من القائمة الجانبية اختر التخطيط (Layout).
3. اضغط إضافة أداة (Add a Gadget) في المكان المناسب (يفضل أسفل المدونة).
4. اختر نوع الأداة HTML/JavaScript.
5. الصق الكود التالي واضغط حفظ ✅

<!-- زر الصعود إلى الأعلى - نقطة تحول -->
<style>
#scrollToTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, #0d6efd, #007bff);
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: all 0.4s ease;
  z-index: 9999;
  display: none;
}
#scrollToTopBtn:hover {
  transform: scale(1.1);
  background: linear-gradient(135deg, #0056b3, #0a58ca);
}
@keyframes slideUp {
  0% {transform: translateY(100px); opacity: 0;}
  100% {transform: translateY(0); opacity: 1;}
}
</style>

<button onclick="scrollToTop()" id="scrollToTopBtn" title="الرجوع للأعلى">⬆️</button>

<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  let btn = document.getElementById("scrollToTopBtn");
  if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
    btn.style.display = "block";
    btn.style.animation = "slideUp 0.6s ease";
  } else {
    btn.style.display = "none";
  }
}
function scrollToTop() {
  window.scrollTo({top: 0, behavior: 'smooth'});
}
</script>

🔵 الزر ده متحرك بتأثير انزلاق خفيف، وبيظهر فقط لما المستخدم ينزل لتحت — شكله أنيق جدًا ومتناسق مع ألوان مدونة نقطة تحول (الأزرق والأبيض).

---

💻 الطريقة الثانية: الإضافة من خلال كود القالب

لو حبيت تدمج الزر داخل تصميم القالب مباشرة 👇

1. من لوحة بلوجر، اختر المظهر → تعديل HTML.
2. انزل لآخر الكود وابحث عن الوسم:

   </body>

3. الصق نفس الكود السابق قبل وسم الإغلاق مباشرة.
4. اضغط حفظ المظهر (Save Theme).
5. جرب فتح مدونتك ومرّر للأسفل — هيظهر الزر تلقائيًا في الركن السفلي الأيمن.

---

🎨 مميزات كود “نقطة تحول”:

• ✅ تصميم أنيق ومتحرك بلون أزرق متدرج
• ✅ متجاوب تمامًا مع الموبايل والكمبيوتر
• ✅ خفيف وسريع ولا يؤثر على تحميل الصفحة
• ✅ قابل للتعديل بسهولة من الكود (يمكن تغيير اللون، الحجم، أو الأيقونة)

---

🧠 نصيحة من مدونة "نقطة تحول":

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

📌 جرّب إضافة الزر الآن وشاركنا رأيك في التعليقات!

---

✍️ شريف صقر

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