كيفية إضافة تأثير القلب الملون على بلوجر

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

أضفنا تأثير القلب الملون في هذه التدوينة. عند النقر في أي مكان على المقال، ستظهر قلوب ملونة رائعة. دعونا نتعرف على خطوات إضافة هذا التأثير.

ملاحظات مهمة

قبل البدء، يجب عليك دائمًا عمل نسخة احتياطية من قالب مدونتك لتجنب أي مشاكل. يمكن استعادة النسخة الاحتياطية بسهولة إذا واجهت أي خطأ.

خطوات إضافة تأثير القلب الملون

الخطوة 1: تسجيل الدخول إلى لوحة التحكم

قم بتسجيل الدخول إلى حسابك في بلوجر.

الخطوة 2: الذهاب إلى قسم الموضوع

انقر على قسم "الموضوع" في القائمة الجانبية.

الخطوة 3: تحرير HTML

اختر "تحرير HTML" لفتح محرر الشيفرة.

الخطوة 4: العثور على علامة </body>

• ابحث عن العلامة </body> في الشيفرة.
• الخطوة 5: إضافة كود JavaScript
• قم بنسخ الكود أدناه والصقه قبل علامة </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>

الخطوة 6: حفظ التغييرات

بعد لصق الكود، انقر على "حفظ الموضوع".

الخاتمة

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

لا تنسَ مشاركة هذه المقالة مع أصدقائك والاشتراك في المدونة لمزيد من النصائح والحيل المفيدة!

حقوق النشر: جميع منشوراتنا محمية بموجب قانون حقوق التأليف والنشر الرقمي. يُحظر نسخ أو إعادة إنتاج أي جزء من المحتوى دون إذن.

انضم إلى قناتنا على تيليجرام لتبقى على اطلاع بأحدث المقالات والأدوات المفيدة.