كيفية انشاء جاري التحميل لمدونة بلوجر عند تحميل الصفحة بشكل جذاب

والسلام عليكم ورحمة الله وبركاته

كيفية إنشاء مدونة Blogger بالرسوم المتحركة عند تحميل الصفحة باستخدام CSS

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


اتبع الشرح بالخطوات التالية:

1. قم بتسجيل الدخول إلى حساب Blogger الخاص بك
2. انتقل إلى قالب مدونتك > انقر فوق “تحرير HTML” > حدد “توسيع القالب”.
3. ثم اضغط على ctrl+f وابحث عن الكود التالي:]]>
4. ثم ضع الكود التالي أعلاه ]]>

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding- أعلى: 20%;اللون:#000;العرض:لا شيء;}.loadball {خلفية اللون: شفاف؛ الحدود: 5 بكسل صلب rgb (240، 0، 0)؛ الحدود اليمنى: 5 بكسل صلب شفاف؛ الحدود على اليسار: 5 بكسل صلب شفاف؛ نصف قطر الحدود: 50 بكسل؛ ظل الصندوق: 0 0 35px rgb(255 , 0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite easy-in-out;-webkit-animation:spinPulse 1s خطي لا نهائي;}
.loadball-2 {خلفية اللون: شفاف؛ الحدود: 5 بكسل الصلبة rgb (240، 0، 0)؛ الحدود اليسرى: 5 بكسل شفافة صلبة؛ الحدود اليمنى: 5 بكسل شفافة صلبة؛ نصف قطر الحدود: 50 بكسل؛ ظل الصندوق: 0 0 15px rgb(255 , 0 , 0); العرض: 30px; الارتفاع: 30px; الهامش: 0 تلقائي; الموضع: نسبي; الأعلى:-50px;-moz-animation:spinoffPulse 1s خطي لا نهائي;-webkit-animation:spinoffPulse 1s خطي لا نهائي؛}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); العتامة:0؛ box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); العتامة: 1؛ }100% { -moz-transform:rotate(-320deg); العتامة:0؛ }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); العتامة:0؛ box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); العتامة:1;} 100% { -webkit-transform:rotate(-320deg); العتامة:0؛ }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

5. ثم ابحث عن الرمز
6. ثم قم بلصق الكود التالي أعلاه مباشر