أكيد مرّ عليك موقع ولاحظت إن مؤشر الماوس فيه مو بالشكل المعتاد، يمكن يكون سهم مختلف أو شكل مميز. هالتفصيلة الصغيرة تعطي انطباع إن الموقع مرتب ومهتم بالتفاصيل. الغريب إن هواي ناس يعتقدون إن هالشي صعب أو يحتاج برمجة معقدة، بينما بالحقيقة هو تعديل بسيط جدًا باستخدام CSS فقط.
بهذا الشرح راح تتعلم خطوة بخطوة شلون تغيّر شكل الماوس في موقعك أو مدونتك على بلوجر بسهولة، وبدون أي تعقيد.
شنو المقصود بتغيير شكل الماوس؟
تغيير شكل الماوس يعني إنك تستبدل المؤشر الافتراضي بصورة ثانية من اختيارك. التغيير ممكن يكون على كامل الموقع أو بس عند المرور على الروابط والأزرار. هذا التعديل شكلي فقط، وما يأثر على عمل الموقع أو محتواه.
طريقة تغيير شكل الماوس في بلوجر
حتى تطبّق التغيير، كل اللي تحتاجه هو إضافة كود CSS داخل قالب بلوجر.
خطوات التطبيق
- ادخل على لوحة تحكم بلوجر
- روح إلى المظهر
- اضغط على تعديل HTML
- ابحث داخل القالب عن الوسم:
]]></b:skin>
- أضف الكود التالي فوقه مباشرة
كود تغيير شكل الماوس
body {
cursor: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoC9XfoTleCKBC80_geE7dx7EFG4rM0AcUoRV-UwUEymOGY2IdOBk6jaHFgMQtB4eIvnVLU59VhYFizpii8SLJyO9XQTbAQaUWFSXveO-F_yO1NUlZWeuT53SvmnYy2yu6ImTi2Hk99amONDid8hk-9DjotX51eepCNZJexJ6FBzkZUGT3RgELX6nm-Kpe/s1600/cur116.png'), auto;
}
a, button {
cursor: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9UAPEvrKeAfUTtm-INJgGSwonrr_yvZ6j1PqoSzflzEk-F0k2OWMRNNUyHEHo-iyhcwV4Xs_A2fId-8w6Oab2muqTZYD89BX85uG8M2IwpSCWR_OmtPiukox-dGp53f3Q1Sd4DiW4eAEHpKjaPFTmzKDrrrWy46HAoH2i6jEjJNiPo1HYcaPaxQDg0Ke4/s1600/cur117.png'), pointer;
}شرح الكود بشكل مبسّط
- الرابط الأول: صورة الماوس الأساسية اللي تظهر في الصفحة
- الرابط الثاني: صورة الماوس عند المرور على الروابط أو الأزرار
- تگدر تغيّر الروابط بأي صور ماوس ثانية تعجبك
شلون تغيّر شكل الماوس بصورة ثانية؟
الطريقة الصحيحة هي:
- تختار صورة ماوس مناسبة
- تحفظها على جهازك
- ترفعها على بلوجر كصورة عادية
- تنسخ رابط الصورة وتحطه مكان الرابط الموجود بالكود
يفضّل تكون الصورة بحجم صغير مثل 32×32 أو 64×64 حتى تشتغل بدون مشاكل.
من أين تحصل على أشكال ماوس جاهزة؟
إذا ما تحب تصمّم شكل الماوس بنفسك، تگدر تحصل على مئات الأشكال الجاهزة من مواقع متخصصة، وتستخدمها مباشرة بموقعك.
من أفضل المواقع بهالمجال هو موقع Cursor Library، يحتوي مجموعة كبيرة من أشكال الماوس الجاهزة بمختلف التصاميم.
🔗 رابط الموقع:
https://www.cursor.cc
طريقة الاستخدام سهلة:
- تدخل للموقع
- تختار شكل الماوس اللي يعجبك
- تحمّله على جهازك
- ترفعه على بلوجر
- تستخدم رابط الصورة داخل كود الـ CSS
يفضّل دائمًا اختيار مؤشرات بحجم صغير حتى تشتغل بسلاسة على جميع المتصفحات.
تعطيل شكل الماوس على الهواتف (خطوة مهمة)
بما إن الهواتف ما تستخدم مؤشر ماوس، من الأفضل تعطّل هالميزة على الشاشات الصغيرة:
@media (max-width:768px) {
body {
cursor: auto;
}
}نصائح قبل ما تستخدم التغيير
- لا تختار شكل كبير أو مزعج
- خلي التغيير بسيط وواضح
- تجنّب هالميزة بالمواقع التعليمية أو الإخبارية
- جرّب الموقع على أكثر من متصفح
هل تغيير شكل الماوس يأثر على السيو؟
لا، تغيير شكل الماوس ما يأثر على السيو نهائيًا، طالما ما يسبب إزعاج للزائر أو يبطّئ الموقع. الأهم عند جوجل هو تجربة المستخدم.
الخلاصة
تغيير شكل الماوس خطوة بسيطة لكنها تضيف لمسة حلوة واحترافية للموقع إذا استخدمتها بشكل صحيح. بكود CSS صغير تگدر تميّز موقعك بدون ما تحتاج خبرة برمجية كبيرة.
