في عالم الويب الحديث، أصبح من المهم أكثر من أي وقت مضى أن تتواصل مع جمهورك وتتفاعل معه. يعد إنشاء محتوى عالي الجودة أمرًا أساسيًا، ولكن هناك أيضًا طرقًا أخرى لجعل مدونة أكثر جاذبية وتفاعلًا.
إحدى الطرق الشائعة للقيام بذلك هي إضافة تأثيرات بصرية جذابة. يمكن أن تساعد هذه التأثيرات في جذب انتباه القراء وجعلهم أكثر انخراطًا.
في هذه المقالة، سنوضح لك كيفية إضافة تأثير القلوب المتطايرة إلى مدونة بلوجر الخاصة بك. هذه طريقة بسيطة ولكنها فعالة لجعل مدونة أكثر مرحًا وجاذبية.
فوائد تأثير القلوب عند الضغط على زر الماوس
هناك العديد من الفوائد المحتملة لإضافة تأثير القلوب عند الضغط على زر الماوس إلى مدونة بلوجر الخاصة بك، بما في ذلك:
- إضافة لمسة من المرح: يمكن أن يساعد تأثير القلوب في جعل موقعك أكثر جاذبية وتفاعلية.
- جذب انتباه المستخدم: يمكن أن يساعد تأثير القلوب في جذب انتباه المستخدمين وجعلهم أكثر عرضة للتفاعل مع موقعك.
- زيادة معدلات التفاعل: وجدت بعض الدراسات أن إضافة تأثيرات بصرية جذابة إلى موقع الويب يمكن أن يؤدي إلى زيادة معدلات التفاعل.
شرح كيفية إضافة تأثير القلوب عن الضغط على زر الماوس إلى مدونة بلوجر
لإضافة تأثير ظهور قلب عند الضغط على زر الأيسر للماوس على مدونتك في بلوجر تتبع الخطوات التالية:
- توجه إلى قسم المظهر، ثم تعديل HTML
- تنزل إلى أسفل كل الأكواد قبل وسم </body>
- تقوم بلصق الكود التالي:
<script type="text/javascript">
//<![CDATA[
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-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";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=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||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
//]]>
</script>
من ثم حفظ. ومبروك عليك.
هذا الكود يقوم بإظهار قلب صغير قرب مؤشر الفأرة في نفس المكان الذي تم الضغط فيه. يظهر القلب لثوان ثم يختفي. تظهر الكثير من القلوب بمختلف الألوان لإضافة لمسة من المتعة والمرح لمدونتك. كما انه كود خفيف جدا ولايشكل مشكل بالنسبة لسرعة تحميل المدونة.
تأثير القلوب عند الضغط على زر الماوس طريقة بسيطة ولكنها فعالة لإضافة لمسة من المرح إلى مدونة بلوجر الخاصة بك. إذا كنت تبحث عن طريقة لجعل موقعك أكثر جاذبية وتفاعلية، ففكر في إضافة هذه الميزة.
