تحميل Ninja Arashi 2 للأندرويد والآيفون 2026 | مراجعة وأسلوب اللعب

الحلاوي ميديا

الرئيسية› أدوات بلوجر› زر الصعود السريع

🛠️ أدوات بلوجر

زر الصعود السريع لأعلى الصفحة في بلوجر — كود جاهز مع تخصيص كامل

أضف زر الصعود السريع لمدونتك على بلوجر — خصّصه بالشكل واللون والموضع الذي يناسبك من الأداة التفاعلية، ثم انسخ الكود الجاهز وثبّته في دقيقة واحدة.

✍️ حيدر الحلاوي 📅 ٧ يونيو 2026 🏷️ أدوات بلوجر ⏱️ ٥ دقائق قراءة

لاحظت ذلك الزر الصغير الثابت في زاوية الصفحة الذي يُعيدك لأعلاها بنقرة واحدة دون الحاجة للتمرير الطويل؟ إنه زر الصعود السريع، أو Scroll To Top Button، وهو من أكثر الأدوات التي يقدّرها زوار المقالات الطويلة. الصفحة التي تقرأها الآن تستخدمه — تمرّل للأسفل وستظهر الزر الأزرق في الزاوية اليسرى.

💡 لاحظ: يظهر الزر الأزرق في الزاوية اليسرى أسفل هذه الصفحة فور تمريرك 300 بكسل للأسفل — هذا بالضبط ما ستضيفه لمدونتك.

⬆️ ما هو زر الصعود السريع؟

زر الصعود السريع هو عنصر ثابت (Fixed Element) يظهر في زاوية الشاشة عندما يتمرر الزائر مسافة معينة للأسفل، ويختفي في بداية الصفحة حيث لا حاجة له. عند النقر عليه ينزلق المستخدم سلاسةً نحو أعلى الصفحة دون الحاجة للتمرير اليدوي الطويل.

يعتمد على ثلاثة عناصر: HTML للزر، وCSS لتحديد شكله وموضعه وحركة ظهوره واختفائه، وJavaScript للكشف عن موضع التمرير والتحكم في سلوك النقر.

✅ لماذا يستحق الإضافة لمدونتك؟

🚀

راحة الملاحة

يُريح زوار المقالات الطويلة من التمرير العكسي

⏱️

توفير الوقت

نقرة واحدة بدل ثوانٍ من التمرير للأعلى

📱

مريح على الجوال

على شاشات اللمس التمرير للأعلى مرهق دون الزر

💼

مظهر احترافي

موجود في كل المواقع الاحترافية الكبرى

⚡

خفيف للغاية

لا يثقّل الصفحة — كود نظيف وبسيط

🎨

قابل للتخصيص

شكل ولون وحجم وموضع حسب مدونتك

🎛️ أداة التخصيص التفاعلية

اختر خيارات الزر من الأدوات أدناه، ثم مرّر داخل منطقة المعاينة لترى الزر يظهر ويعمل، وانسخ الكود المُولَّد جاهزًا.

🖌️ خصّص زر الصعود الآن

الموضع

الشكل

اللون

الحجم

الأيقونة / النص

منطقة المعاينة — مرّر للأسفل داخلها

📄 هذا مثال على محتوى مدونتك. مرّر للأسفل داخل هذا الإطار لترى زر الصعود يظهر تلقائيًا.

في المقالات الطويلة يُعدّ زر الصعود من أكثر العناصر التي يقدّرها الزوار. يمنحهم سهولة الرجوع لأعلى الصفحة دون الحاجة للتمرير اليدوي الطويل والمرهق.

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

تعمل هذه الأداة على جميع المدونات المبنية على منصة بلوجر، وتتوافق مع جميع القوالب الحديثة والكلاسيكية على حدٍّ سواء.

⬇️ واصل التمرير للأسفل...

الزر يظهر عندما تتجاوز عتبة التمرير المحددة (افتراضيًا 80 بكسل داخل هذا الإطار)، ويختفي عند العودة للأعلى تلقائيًا دون تدخّل.

انقر على الزر الذي ظهر لك لترى حركة الصعود السلسة.

👆 الزر يظهر تلقائيًا عند التمرير للأسفل وينقلك لأعلى بنقرة واحدة

الكود المُولَّد — جاهز للنسخ والتركيب

💻 أكواد جاهزة بمستويات مختلفة

١ — النسخة البسيطة

أقل كود ممكن لزر يعمل بكفاءة — مثالي لمن يريد التثبيت السريع دون تعقيد.

النسخة البسيطة

<!-- زر الصعود السريع - النسخة البسيطة -->
<button id="stt" onclick="window.scrollTo({top:0,behavior:'smooth'})" aria-label="العودة لأعلى">↑</button>
<style>
#stt {
  position: fixed;
  bottom: 28px;
  right: 24px;         /* غيّر إلى left: 24px للجانب الأيسر */
  width: 46px;
  height: 46px;
  background: #2563eb; /* اللون — عدّله */
  color: #fff;
  border: none;
  border-radius: 50%;  /* دائرة — غيّر إلى 8px لمربع ناعم */
  cursor: pointer;
  font-size: 20px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.2s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
#stt.show { opacity: 1; visibility: visible; }
#stt:hover { transform: scale(1.1); }
</style>
<script>
(function(){
  var b = document.getElementById('stt');
  window.addEventListener('scroll', function(){
    b.classList.toggle('show', window.scrollY > 300);
  }, { passive: true });
})();
</script>

٢ — النسخة المتقدمة مع تأثيرات

نسخة أكثر ثراءً تدعم متغيرات قابلة للتعديل، وتأثير ظهور انزلاقي أنيق، وتلميح tooltip.

النسخة المتقدمة

<!-- زر الصعود السريع - النسخة المتقدمة -->
<button id="stt2" aria-label="العودة لأعلى الصفحة" title="الصعود لأعلى">↑</button>
<style>
/* ====== إعدادات الزر — عدّل هنا فقط ====== */
:root {
  --stt-color:  #2563eb;  /* اللون الرئيسي   */
  --stt-size:   46px;     /* حجم الزر        */
  --stt-pos:    right;    /* right أو left   */
  --stt-bottom: 28px;     /* المسافة للأسفل  */
  --stt-side:   24px;     /* المسافة للجانب  */
  --stt-icon:   "↑";      /* رمز الزر        */
  --stt-show:   300px;    /* عتبة الظهور     */
}
/* ========================================= */

#stt2 {
  position: fixed;
  bottom: var(--stt-bottom);
  right: var(--stt-side);
  width: var(--stt-size);
  height: var(--stt-size);
  background: var(--stt-color);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: calc(var(--stt-size) * 0.42);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s, visibility 0.35s, transform 0.35s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  font-family: inherit;
}
#stt2::after {
  content: "أعلى الصفحة";
  position: absolute;
  bottom: 110%;
  right: 50%;
  transform: translateX(50%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
#stt2:hover::after { opacity: 1; }
#stt2.show { opacity: 1; visibility: visible; transform: translateY(0); }
#stt2:hover { filter: brightness(1.12); transform: translateY(-2px); }
</style>
<script>
(function(){
  var b = document.getElementById('stt2');
  window.addEventListener('scroll', function(){
    b.classList.toggle('show', window.scrollY > 300);
  }, { passive: true });
  b.addEventListener('click', function(){
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
})();
</script>

٣ — النسخة المتقدمة مع دائرة تقدم

الزر مدمج مع مؤشر دائري يُظهر نسبة التمرير — يجمع بين وظيفتين في أداة واحدة أنيقة.

زر + مؤشر تقدم دائري

<!-- زر الصعود مع مؤشر تقدم دائري -->
<div id="stt3-wrap" aria-label="الصعود لأعلى">
  <svg viewBox="0 0 36 36" id="stt3-ring">
    <circle cx="18" cy="18" r="16" fill="none" stroke="#e2e8f0" stroke-width="2.5"/>
    <circle id="stt3-arc" cx="18" cy="18" r="16" fill="none"
      stroke="#2563eb" stroke-width="2.5"
      stroke-dasharray="100.53" stroke-dashoffset="100.53"
      stroke-linecap="round" transform="rotate(-90 18 18)"/>
  </svg>
  <button id="stt3-btn" onclick="window.scrollTo({top:0,behavior:'smooth'})">↑</button>
</div>
<style>
#stt3-wrap {
  position: fixed;
  bottom: 28px;
  right: 24px;
  width: 50px; height: 50px;
  z-index: 9999;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
#stt3-wrap.show { opacity: 1; visibility: visible; }
#stt3-ring { position: absolute; top:0; left:0; width:100%; height:100%; }
#stt3-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 36px; height: 36px;
  background: #2563eb; /* اللون */
  color: #fff; border: none; border-radius: 50%;
  cursor: pointer; font-size: 16px;
  transition: transform 0.2s;
}
#stt3-btn:hover { transform: translate(-50%,-50%) scale(1.1); }
</style>
<script>
(function(){
  var wrap = document.getElementById('stt3-wrap');
  var arc  = document.getElementById('stt3-arc');
  var circ = 2 * Math.PI * 16; /* 100.53 */
  function update(){
    var st  = window.scrollY || document.documentElement.scrollTop;
    var dh  = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var pct = dh > 0 ? Math.min(st / dh, 1) : 0;
    arc.style.strokeDashoffset = circ * (1 - pct);
    wrap.classList.toggle('show', st > 300);
  }
  window.addEventListener('scroll', update, { passive: true });
  update();
})();
</script>

🧩 كود أداة بلوجر HTML — للتركيب الفوري

انسخ هذا الكود كاملًا والصقه في Layout ← أداة HTML/JavaScript ليعمل على كامل موقعك فورًا. عدّل القيم في القسم المُشار إليه فقط.

أداة بلوجر HTML ← الصق هذا مباشرةً

<!-- ====== زر الصعود السريع | أداة بلوجر HTML ====== -->
<!-- المصدر: منصة الحلاوي ميديا — bib-iq.net        -->

<button id="btt" onclick="window.scrollTo({top:0,behavior:'smooth'})" aria-label="العودة لأعلى الصفحة">↑</button>

<style>
/* ===== عدّل هذه القيم فقط ===== */
#btt {
  --color:  #2563eb;   /* اللون              */
  --size:   46px;      /* الحجم              */
  /* الأشكال: 50%=دائرة | 8px=ناعم | 0=مربع */
  border-radius: 50%;
/* ================================ */
  position: fixed;
  bottom: 28px;
  right: 24px;         /* يسار: استبدل right بـ left */
  width:  var(--size);
  height: var(--size);
  background: var(--color);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 20px;
  font-family: inherit;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s, visibility .3s, transform .3s;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  will-change: opacity, transform;
}
#btt.btt-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#btt:hover { filter: brightness(1.1); transform: translateY(-2px); }
</style>

<script>
(function(){
  var b=document.getElementById('btt');
  if(!b) return;
  window.addEventListener('scroll',function(){
    b.classList.toggle('btt-on', (window.scrollY||document.documentElement.scrollTop) > 300);
  },{passive:true});
})();
</script>
<!-- ====== نهاية زر الصعود السريع ====== -->

📲 طريقة التثبيت على مدونة بلوجر

1. ١
   افتح لوحة التحكم ← التصميم (Layout)

   سجّل الدخول على blogger.com واختر مدونتك ثم انتقل لقسم التصميم.
2. ٢
   أضف أداة HTML/JavaScript جديدة

   انقر إضافة أداة في أي منطقة (يُفضَّل الفوتر أو الشريط الجانبي) ← اختر HTML/JavaScript.
3. ٣
   الصق كود الأداة كاملًا

   انسخ كود أداة بلوجر HTML من الأعلى والصقه في حقل المحتوى. العنوان اختياري.
4. ٤
   عدّل اللون والشكل (اختياري)

   ابحث عن القسم المُشار إليه بالتعليق وعدّل --color و--size وborder-radius حسب رغبتك.
5. ٥
   احفظ وجرّب

   انقر حفظ، افتح مدونتك في نافذة جديدة، تمرّل للأسفل وستظهر الزر. انقره للصعود السريع.

⚠️ تنبيه: إذا كانت مدونتك تستخدم بالفعل زر صعود من قالبها الأصلي، تأكد من إيقافه أولًا لتجنّب ظهور زرّين في الوقت ذاته.

🎨 جدول خيارات التخصيص

الخاصية	الوصف	الافتراضي	بدائل
--color: #2563eb	لون الزر	أزرق	أي كود HEX أو RGB
--size: 46px	حجم الزر	46px	36px صغير / 56px كبير
border-radius: 50%	شكل الزر	دائرة	8px ناعم / 0 مربع
right: 24px	موضع جانبي	يمين	استبدل بـ left: 24px لليسار
bottom: 28px	موضع سفلي	28px	أي قيمة تناسب قالبك
window.scrollY > 300	عتبة الظهور	300	200 أبكر / 500 لاحقًا
نص الزر ↑	رمز / نص الزر	↑	▲ أو ⬆ أو TOP أو أعلى

✅ الكود آمن تمامًا مع Google AdSense وبلوجر. يستخدم aria-label لإمكانية الوصول، ومُغلّف داخل IIFE لمنع التعارض مع أكواد القالب.

🏁 خلاصة القول

زر الصعود السريع أداة خفيفة ومفيدة تُحسّن تجربة التصفح بشكل ملحوظ، خاصةً في المدونات التي تحتوي على مقالات مطوّلة. اختر النسخة التي تناسبك: البسيطة للسرعة، المتقدمة للتخصيص، أو المدمجة مع مؤشر التقدم للإبهار.

ثبّته عبر أداة HTML/JavaScript في بلوجر ليعمل على كامل موقعك بخطوات بسيطة، أو خصّصه من الأداة التفاعلية أعلاه وانسخ كودك في ثوانٍ. شارك في التعليقات أي نسخة اخترت!

ح

حيدر الحلاوي

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

📌 مقالات ذات صلة

🛠️ أدوات بلوجر

شريط تقدم القراءة لمدونة بلوجر — كود جاهز للنسخ

🛠️ أدوات بلوجر

مؤشر ماوس مخصص لبلوجر — أشكال وألوان متعددة

🛠️ أدوات بلوجر

أفضل أدوات بلوجر لتحسين تجربة الزائر في 2026

الرئيسية سياسة الخصوصية إخلاء المسؤولية تواصل معنا

© 2026 منصة الحلاوي ميديا — جميع الحقوق محفوظة