في الوقت الحالي، لم تعد مدونات بلوجر تقتصر فقط على عرض المحتوى النصي السهل، بل أصبحت تجربة المستخدم (UX) عنصرًا أساسيًا في جذب الزائر والحفاظ عليه لأطول فترة ممكنة. ومن بين الإضافات البسيطة والمحببة التي تمنح مدونة Blogger لمسة تفاعلية جميلة، تأتي إضافة تأثير القلوب عند الضغط على زر الماوس، والتي تضيف حركة مرئية لطيفة مع كل نقرة يقوم بها الزائر داخل الموقع.
|
| معاينة: تأثير القلوب المتطايرة عند النقر داخل المدونة |
هذا التأثير ليس مجرد زينة، بل هو وسيلة لكسر جمود التصفح وجعل القارئ يشعر بالتفاعل مع كل ضغطة. في هذا المقال، سنشرح ماهية هذا الكود، مميزاته، وكيفية تركيبه في مدونتك في أقل من دقيقة.
ما هو تأثير القلوب عند النقر (Click Heart Effect)؟
تأثير القلوب هو عبارة عن سكربت برمجي (JavaScript) خفيف جداً، وظيفته إظهار حركة بصرية عند الضغط في أي مكان داخل صفحة المدونة. بمجرد النقر، ينبثق قلوب صغيره ملونه من موضع المؤشر ثم يتحرك للأعلى ويختفي بشكل تدريجي (Fade out). هذا التأثير يمنح الموقع طابعًا حيويًا ويجعل التفاعل مع الصفحات أكثر متعة وسلاسة.
مقارنة: المدونة التقليدية vs المدونة التفاعلية
قبل تركيب الكود، دعنا نرى الفرق الذي تحدثه هذه اللمسات البسيطة على تجربة الزائر:
| وجه المقارنة | مع تأثير القلوب | المدونة التقليدية |
|---|---|---|
| تفاعل الزائر | ممتع وحيوي | نصي بسيط |
| الجمالية | لمسة بصرية أنيقة | تصميم افتراضي |
| زمن البقاء | يشجع على البقاء (Interactivity) | عادي |
| سرعة الموقع | سريعة (كود نظيف) | سريعة |
مميزات إضافة تأثير القلوب في بلوجر
رغم بساطة الإضافة، إلا أنها تقدم مجموعة من المميزات المهمة لأصحاب المدونات التي تهتم بالتصميم (UI)، من أبرزها:
- تحسين تجربة المستخدم: يجعل التفاعل مع المدونة أكثر متعة ويمنح الزائر إحساسًا بالحيوية والديناميكية.
- لمسة جمالية جذابة: يضيف تأثيرًا بصريًا أنيقًا دون تشويش على المحتوى أو مبالغة في الألوان.
- زيادة تفاعل الزائر: الحركة اللطيفة تشجع المستخدم لاإرادياً على النقر والتفاعل مع عناصر الصفحة.
- كود خفيف وآمن: يعتمد على
Vanilla JSولا يؤثر إطلاقاً على سرعة تحميل الموقع أوCore Web Vitals. - لا يحتاج إضافات خارجية: يعمل بشكل مستقل بدون استدعاء مكتبات ثقيلة مثل
jQuery.
كود إضافة تأثير القلوب (جاهز للنسخ)
لتركيب الإضافة، لا تحتاج لخبرة برمجية. لقد جهزنا لك الكود مضغوطاً وجاهزاً للعمل مباشرة. فقط انسخ الكود التالي:
<script type="text/javascript">
//<![CDATA[
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";a.appendChild(t.createTextNode(e)),t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
//]]>
</script>خطوات تركيب الكود في القالب
يمكنك تفعيل التأثير بسهولة باتباع الخطوات التالية بدقة:
- لوحة التحكم: قم بالدخول إلى لوحة تحكم بلوجر.
- تحرير القالب: انتقل إلى "المظهر" (Theme) ثم اضغط على السهم بجانب "تخصيص" واختار تحرير HTML.
- مكان الكود: اضغط داخل كود القالب واستخدم البحث (
Ctrl+F) للبحث عن وسم الإغلاق</body>. - اللصق: ضع الكود الذي نسخته فوق وسم
</body>مباشرة. - الحفظ: اضغط على أيقونة الحفظ (Save)، ومبروك عليك التأثير الجديد!
نصيحة خبير:
دائماً يُفضل وضع أكواد الجافا سكريبت الجمالية (مثل هذا الكود) في نهاية القالب قبل وسم الإغلاق body، لضمان تحميل محتوى المقال الأساسي أولاً للزائر، مما يحافظ على سرعة الصفحة.
الأسئلة الشائعة حول سكربت القلوب
هل يؤثر كود القلوب على سرعة مدونتي؟
لا، الكود لا يؤثر نهائيًا. هو يعتمد على تقنيات Vanilla JavaScript الحديثة ويتم تنفيذه فقط عند النقر، واستهلاكه لموارد المتصفح شبه معدوم.
هل يمكنني تغيير ألوان القلوب؟
الكود الحالي مبرمج لتوليد ألوان عشوائية (RGB Random) لإعطاء بهجة أكبر. لتثبيت لون واحد، ستحتاج لتعديل دالة الألوان function s() داخل الكود.
هل يعمل التأثير على الهواتف؟
نعم، يعمل التأثير عند لمس الشاشة (Touch) في الهواتف والأجهزة اللوحية بنفس الكفاءة التي يعمل بها عند النقر بالماوس على الكمبيوتر.
الخلاصة
تُعد إضافة تأثير القلوب عند الضغط في مدونة بلوجر من الإضافات البسيطة ولكن المؤثرة، حيث تجمع بين الجمال، الخفة، وسهولة التركيب. إذا كنت ترغب في تحسين تجربة الزائر وإضافة لمسة تفاعلية أنيقة بدون التأثير على الأداء، فهذه الإضافة خيار مثالي لمدونتك.
