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

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

الرئيسية› أدوات بلوجر› مؤشر ماوس مخصص

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

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

أضف لمسة إبداعية لمدونتك بمؤشر ماوس مخصص يعكس شخصيتها — اختر الشكل واللون والحجم من الأداة التفاعلية أدناه وانسخ الكود جاهزًا في ثوانٍ.

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

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

🎯 ميزة هذا المقال: لا تحتاج لتعديل الكود يدويًا — استخدم الأداة التفاعلية في القسم الثالث لتخصيص مؤشرك وتوليد الكود الجاهز فورًا.

🖱️ ما هو مؤشر الماوس المخصص؟

مؤشر الماوس المخصص هو عنصر برمجي يُخفي المؤشر الافتراضي للنظام ويستبدله بشكل مصمم خصيصًا باستخدام CSS وJavaScript. يتتبع هذا العنصر حركة الماوس في الوقت الفعلي بدقة عالية، ويمكن تشكيله على هيئة دائرة، نجمة، ماسة، مثلث، أو أي شكل هندسي آخر. ويمكن تلوينه بأي لون أو تدرج لوني، وضبط حجمه بدقة، أو إضافة تأثيرات بصرية كالتوهج أو الذيل المتحرك.

تقنيًا يعمل الكود عبر ثلاث آليات: إخفاء المؤشر الأصلي بـ CSS، ثم إنشاء عنصر HTML يمثل المؤشر الجديد، ثم تتبع الحدث mousemove لتحديث موضعه في الوقت الفعلي.

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

🎨

هوية بصرية مميزة

يُعبّر عن شخصية مدونتك ويجعلها لا تُنسى

😍

تجربة زيارة ممتعة

يُضيف طابعًا تفاعليًا مبهجًا لكل صفحة

🏆

تمييز عن المنافسين

معظم المدونات تستخدم المؤشر الافتراضي الممل

⚡

خفيف جدًا

لا يؤثر على سرعة الموقع أو أداء الصفحة

🔧

سهل التخصيص

غيّر اللون والحجم والشكل بكلمة واحدة

📱

لا يؤثر على الموبايل

يُفعَّل تلقائيًا على الأجهزة التي تدعم الماوس فقط

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

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

🖌️ خصّص مؤشرك الآن

الشكل

اللون

الحجم

النمط

منطقة المعاينة — مرّر الماوس هنا

⬆️ مرّر الماوس هنا لرؤية المؤشر المخصص

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

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

إلى جانب الأداة التفاعلية أعلاه، نقدم ثلاثة أكواد جاهزة تتدرج من البسيط للمتقدم.

١ — الدائرة الكلاسيكية (أبسط نسخة)

مؤشر دائري ملوّن بسيط، مثالي لمن يريد تأثيرًا أنيقًا بأقل كود ممكن.

الدائرة الكلاسيكية

<!-- مؤشر ماوس مخصص - الدائرة الكلاسيكية -->
<div id="cc"></div>
<style>
* { cursor: none !important; }
#cc {
  width: 20px;
  height: 20px;
  background: #2563eb;           /* اللون — عدّله */
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease;
}
@media (hover: none) { * { cursor: auto !important; } #cc { display: none; } }
</style>
<script>
(function(){
  var c = document.getElementById('cc');
  document.addEventListener('mousemove', function(e){
    c.style.left = e.clientX + 'px';
    c.style.top  = e.clientY + 'px';
  }, { passive: true });
})();
</script>

٢ — نسخة الأشكال والتأثيرات

نسخة أكثر ثراءً تدعم الأشكال المتعددة والتوهج مع متغيرات قابلة للتعديل في الأعلى فقط.

نسخة الأشكال والتأثيرات

<!-- مؤشر ماوس مخصص - أشكال وتأثيرات -->
<div id="cc2"></div>
<style>
/* ====== إعدادات المؤشر — عدّل هنا فقط ====== */
:root {
  --cc-color:  #7c3aed;   /* اللون الرئيسي        */
  --cc-size:   28px;      /* الحجم                */
  --cc-shape:  star;      /* circle/star/diamond/triangle/cross */
  --cc-style:  glow;      /* solid/outline/glow/semi */
}
/* ============================================= */

* { cursor: none !important; }
#cc2 {
  width:  var(--cc-size);
  height: var(--cc-size);
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width .2s, height .2s;
}

/* الأشكال */
.sh-circle   { border-radius: 50%; }
.sh-star     { clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.sh-diamond  { clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%); }
.sh-triangle { clip-path: polygon(50% 0%,0% 100%,100% 100%); }
.sh-cross    { clip-path: polygon(35% 0%,65% 0%,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0% 65%,0% 35%,35% 35%); }

/* الأنماط */
.st-solid   { background: var(--cc-color); }
.st-outline { background: transparent; border: 3px solid var(--cc-color); }
.st-glow    { background: var(--cc-color); box-shadow: 0 0 10px var(--cc-color), 0 0 22px var(--cc-color); }
.st-semi    { background: var(--cc-color); opacity: 0.6; }

@media (hover: none) { * { cursor: auto !important; } #cc2 { display: none; } }
</style>
<script>
(function(){
  var el = document.getElementById('cc2');
  var s  = getComputedStyle(document.documentElement);
  var shape = s.getPropertyValue('--cc-shape').trim();
  var style = s.getPropertyValue('--cc-style').trim();
  el.className = 'sh-' + shape + ' st-' + style;
  document.addEventListener('mousemove', function(e){
    el.style.left = e.clientX + 'px';
    el.style.top  = e.clientY + 'px';
  }, { passive: true });
})();
</script>

٣ — النسخة المتقدمة مع ذيل متحرك

تأثير بصري احترافي يُنشئ ذيلًا من النقاط المتلاشية خلف المؤشر — مثالي للمدونات الإبداعية.

النسخة المتقدمة مع ذيل

<!-- مؤشر ماوس مع ذيل متحرك -->
<div id="cc3"></div>
<style>
* { cursor: none !important; }
#cc3 {
  width: 14px; height: 14px;
  background: #ec4899;
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 99999;
  transform: translate(-50%, -50%);
}
.cc3-trail {
  width: 8px; height: 8px;
  background: #ec4899;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
@media (hover: none) { * { cursor: auto !important; } #cc3,.cc3-trail { display: none; } }
</style>
<script>
(function(){
  var head = document.getElementById('cc3');
  var TRAIL = 8; /* عدد نقاط الذيل — عدّله */
  var dots = [], pos = [];

  for (var i = 0; i < TRAIL; i++) {
    var d = document.createElement('div');
    d.className = 'cc3-trail';
    d.style.width  = (12 - i) + 'px';
    d.style.height = (12 - i) + 'px';
    d.style.opacity = (1 - i / TRAIL) * 0.7;
    document.body.appendChild(d);
    dots.push(d);
    pos.push({ x: 0, y: 0 });
  }

  var mx = 0, my = 0;
  document.addEventListener('mousemove', function(e){
    mx = e.clientX; my = e.clientY;
    head.style.left = mx + 'px';
    head.style.top  = my + 'px';
  }, { passive: true });

  (function animate() {
    var px = mx, py = my;
    for (var i = 0; i < TRAIL; i++) {
      pos[i].x += (px - pos[i].x) * (0.3 - i * 0.02);
      pos[i].y += (py - pos[i].y) * (0.3 - i * 0.02);
      dots[i].style.left = pos[i].x + 'px';
      dots[i].style.top  = pos[i].y + 'px';
      px = pos[i].x; py = pos[i].y;
    }
    requestAnimationFrame(animate);
  })();
})();
</script>

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

هذا الكود مُعدّ خصيصًا لأداة HTML/JavaScript في بلوجر (Layout Gadget). الصقه كما هو دون أي تعديل في الهيكل ليعمل على كامل موقعك. عدّل فقط المتغيرات في القسم المُشار إليه.

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

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

<div id="blogger-cursor"></div>

<style>
/* ====== عدّل هذه القيم فقط ====== */
#blogger-cursor {
  --size:  24px;                                    /* الحجم */
  --color: #2563eb;                                 /* اللون */
  /* الأشكال المتاحة: انسخ القيمة في clip-path     */
  /* دائرة  : border-radius: 50%                   */
  /* نجمة   : clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%) */
  /* ماسة   : clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%) */
  /* مثلث   : clip-path: polygon(50% 0%,0% 100%,100% 100%)        */
  border-radius: 50%;                               /* الشكل الحالي: دائرة */
/* ====================================== */
  width:  var(--size);
  height: var(--size);
  background: var(--color);
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width .15s, height .15s;
  will-change: left, top;
}
* { cursor: none !important; }
@media (hover: none) {
  * { cursor: auto !important; }
  #blogger-cursor { display: none !important; }
}
</style>

<script>
(function () {
  var cur = document.getElementById('blogger-cursor');
  if (!cur) return;
  var raf, nx = 0, ny = 0;
  document.addEventListener('mousemove', function (e) {
    nx = e.clientX; ny = e.clientY;
    if (!raf) raf = requestAnimationFrame(function () {
      cur.style.left = nx + 'px';
      cur.style.top  = ny + 'px';
      raf = null;
    });
  }, { passive: true });
  document.addEventListener('mouseleave', function () {
    cur.style.opacity = '0';
  });
  document.addEventListener('mouseenter', function () {
    cur.style.opacity = '1';
  });
})();
</script>
<!-- ====== نهاية مؤشر الماوس المخصص ====== -->

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

الطريقة الأولى — أداة HTML/JavaScript (الأسهل والأنسب)

تُفعّل المؤشر على كامل الموقع عبر أداة منفصلة لا تلمس القالب. هذه هي الطريقة الموصى بها.

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

   سجّل الدخول على blogger.com وانتقل لقسم التصميم من القائمة الجانبية.
2. ٢
   أضف أداة جديدة

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

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

   انقر حفظ، ثم افتح مدونتك في نافذة جديدة وحرّك الماوس لترى المؤشر الجديد.

الطريقة الثانية — قالب المدونة (للمتقدمين)

ادخل إلى القالب ← تعديل HTML، وابحث عن </body>، ثم الصق الكود قبله مباشرةً.

⚠️ تنبيه مهم: لا تُضمّن أكثر من كود مؤشر واحد في الوقت ذاته — فالكودان سيتعارضان. إذا أردت تغيير المؤشر لاحقًا، احذف الأداة القديمة أولًا قبل إضافة الجديدة.

🎨 جدول خيارات التخصيص السريعة

الخاصية	الوصف	القيمة الافتراضية	بدائل مقترحة
--size: 24px	حجم المؤشر	24px	16px صغير / 40px كبير
--color: #2563eb	لون المؤشر	أزرق	أي كود لون HEX أو RGB
border-radius: 50%	الشكل الدائري	دائرة	انظر تعليقات الكود للأشكال الأخرى
transition: .15s	سرعة الاستجابة	0.15s	0s فوري / 0.4s ناعم
z-index: 99999	طبقة العرض	99999	زد القيمة إن اختفى خلف عنصر

✅ الكود آمن تمامًا مع Google AdSense وبلوجر. يحتوي على @media (hover: none) الذي يُعيد المؤشر الأصلي تلقائيًا على أجهزة اللمس والهواتف، فلا يؤثر على تجربة مستخدمي الجوال.

🏁 خلاصة القول

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

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

ح

حيدر الحلاوي

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

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

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

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

📈 SEO

كيف تحسّن سرعة مدونة بلوجر وتحصل على درجة أعلى في PageSpeed

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

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

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

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