إضافة الرسوم المتحركة إلى Blogger - أداة التحميل المسبق

إضافة الرسوم المتحركة إلى Blogger - أداة التحميل المسبق

مرحبًا سنشرح لك اليوم في هذه المقالة كيفية عرض صورة تحميل / تأثير متحرك على موقع أو مدونة بلوجر الخاص بكسيساعدك هذا البرنامج التعليمي على تعلم استخدام أي رسوم متحركة gif كتأثير تحميل للرسوم المتحركة. سيؤدي استخدام هذه الميزة إلى تحسين موقع الويب الخاص بك أو تجربة تحميل المدونة. نحتاج أولاً إلى إنشاء أو العثور على محتوى مطابق أو صورة gif تحميل جميلة لقالب blogger. إذا كنت مصمم رسومات ، فيمكنك بسهولة إنشاء صورة gif للرسوم المتحركة لتحميل الصفحة ، ولكن إذا لم تكن مرتبطًا بالرسومات ، فأنت لا تفعل ذلك. لا داعي للقلق ، فهناك العديد من مواقع الويب المتاحة عبر الإنترنت في أيامنا هذه حيث يمكننا بسهولة الحصول على صورة متحركة يتم تحميلها ويمكنك تخصيصها وفقًا لقالب Blogger
 الخاص بك
بعض مواقع الويب لإنشاء صورة تحميل صفحة gif أدناه ، تحقق منها. أداة التحميل المسبق عبارة عن رسوم متحركة أو رسالة حالة تعرض تقدم تحميل الصفحة في الخلفية. عادة ، عندما تزور أحد المواقع ، يبدأ متصفحك في تنزيل أجزاء مختلفة من موقع الويب. يتم تحميل بعض الأجزاء بشكل أسرع ، مثل النص والرمز بدلاً من ذلك ، يجب أن تركز على تحسين سرعة موقع الويب وأدائه . من ناحية أخرى ، إذا كان معظم المحتوى الخاص بك عبارة عن صور ومقاطع فيديو مضمنة ، فسيحتاج المستخدمون إلى الانتظار بعض الوقت قبل أن يتمكنوا من رؤية المحتوى الخاص بك. أثناء هذه التنزيلات الجزئية ، قد يشعر موقع الويب الخاص بك 
في بعض الأحيان قد يعتقد المستخدمون أن موقعك معطل. سوف يملأ أداة التحميل cfoucht المسبق الفجوة ويظهر للمستخدم مؤشر تقدم أثناء تحميل الصفحة icons8 يمكنك مشاهدة مثال حي لأداة التحميل المسبق بالنقر فوق الزر "معاينة أثناء كتابة منشور مدونة فيBlogger معاينة مباشرة لمنشور مدونتك في نافذة جديدة. سيعرض أداة cssportal التحميل المسبق قبل إظهار المعاينة المباشرة. التحميل المسبق أو الرسوم المتحركة لتحميل الصفحة. يأتي المكون الإضافي مع ستة رسوم متحركة مدمجة للاختيار من بينها. ما عليك سوى تحديد الرسم المتحرك من القائمة المنسدلة loading يمكنك أيضًا تحميل HTML و CSS المخصصين لإنشاء أداة تحميل مسبقة tobiasahlin مخصصة HTML و CSS كيفية تثبيت أداة التحميل المسبق في Blogger
خطوات وضع  الرسوم المتحركة لتحميل الصفحة في Blogger والانتقال إلى Blogger والانتقال إلى التخطيط. وانقر فوق إضافة أداة. وحدد HTML / JavaScript. والصق الكود  في المحتوى ثم حفظ> حفظ الترتيب.
التالي وإدخال قالب HTML بحث رمز ]]></b:skin>
#loader {
background-color: #fff;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju0u8DFn9PzqURSXnDrlc_yBKLlGFQCC4CDr8RAxBAkEfNyeiLrrBHGv_J8d2dYcLvSB2GwByHQtPSSxpq1drpBywKI65bYLIUxkFq8hlcDA9y0BWXhRuXcLHCdlbTeullOdYapM3MFxg/s1600/preloader.gif);
background-position: center center;
background-repeat: no-repeat;
background-size: 70px 70px;
bottom: 0px;
left: 0px;
position: fixed;
right: 0px;
top: 0px;
z-index: 9999;
}
نبحث الآن عن </body> لصق الشفرة قبله
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='loader'/>
  </b:if>
إذا كنت تريد أن تعمل هذه الأداة على جميع الصفحات ،وليس فقط على الصفحة الرئيسية ، تنسخ الرمز المميز باللون البرتقالي نبحث الآن عن </body>
<script type='text/javascript'>//<![CDATA[
// Loader
$(window).bind("load",function(){$("#loader").fadeOut(1e3)});
//]]>
</script>
القسم المميز من الكود هو رابط لصورة متحركة. يمكنك تغييره إلى الخيارات التالية
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK3ShLpejmNb5Pqz4Qeh0ZXNr-jc5YYzAnsvgEfKd4JPGvqe0pS3tBe6ln8lPFtFu6YFTAdfxxeU5A8F0QYdpvw5FISzn-6HzKyEE9tcmKTCZD6IjJ-w_tb8lYyMjg9BtFinDadQh0ZNM/s1600/Preloader_10+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCYOnIuM6Xlb8e6dSB_N1XSHW85Sq6NM0WVlwsoHDpmpJ1oAa7KVc_5XvnzBIbw4-HB75-rhYx2zZy9RCUNQrAmYL2oi_P2tfYo-VcP-0jv8rapXYgCmUEZPD_kK23o9AYEIN3i9oBi-Y/s1600/Preloader_8+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeMB4oQzI33Ljwl3EKcrphvIXtHtFlgbvoX9FGM8hMNt4zgmxAusLEIYqkJNt5iZrlaqcYhLUKEpbYWbEX03urVf1R9scM4K1IuGsW0Pm2jKpRgGiPxvp-IKy8EuYrHODRPdN_KjyNmw4/s1600/preloader+%25282%2529+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0SZlWdEm_Qvtlmn1vaN4A0oquAle4ULhKyo8pOeHSKxZ-1qzuKJbjHMLFvUoOAx7pqdUboC-wrEWxzvrh14MLq2JE3MuF-1JxmbIc9cm0UOmAd8XVCG3UwX2Ya9w01nZ9y_XH0lWzXaw/s1600/preloader+%25281%2529.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy19e6O9be91OINOef-bPMPRr1GTjR84YkrpL61TWxJDbgAq7RblUqUpxrGMkjdUUix0w2AsEOL0Ze1vC9pWE8kZ9todQ3VncAnVusI36ux2TqMvTPWCb-lpfTe3LGhc61XVKKLb1ivnQ/s1600/logo_dark_nobg+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6xlzAvFVrHPUVj_Bo8mtVDEAiLAvpfqL2JROVim8qfoQYy-P9wnU6D-gKFRN3rSqyyEvduBmXpwRe9AJ2IX5KoWVicqL9Q469jpItmSSxxE15HzCnncKrLiP70PNXXWNkHZPCueplPE/s1600/loading+%25283%2529+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvm5251bZ0DYTQ9Qx8It328TIAHGBUMOnTh8vHmq80n-tyBnNWDwFrzvUmy9RhyumLknGreiJ_TtRd-3-PeOO3OKzkX7UPxNU7o_7exyX_nrj3IFn-NWOWVjPzG35OYrJqVJf3pVck9HM/s1600/loading+%25282%2529+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqnXUmNWfWrndczlWAlfNjeVHBt3_rTgByFOaKhKxH6_0SbWuLijJlve4ITTksN6SLMEOUTkSkoGFXcMBofrxirjFwGnO08MpiQLT_uRI0vphbIWRTfMUInUonqmh52SX-v-ljqFTn72Q/s1600/loading+%25281%2529+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtN-MTbhBY69V_ie2uue51b_qML7h4rVMepub211jaKXBlPhroE_R0TRQNQh_wChtJOsMfm6nfipdYQ23NKWjqkztfIgz_QF-fal2lG8kFwXmBqTlwjYzidGFm2IikiOt9dOdsB-uk5C4/s1600/gear.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizw3WrE_tqZXoGsbzoGrjUBxOeWAjNQ2ewKZyjEUyio4bs8UKrkmYP1f6ugM_7yTo2BhQOE_zgO8870MM5Zlvact0jEW_nLaSEU8ad-tklErzJmTUth-VKPiOp-2PdqnKwSCmHaNHKvpw/s1600/free-preloaders1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvj-90ab2jZEcMYWhD7Nz-K0Hzmug0O3k4ewnfM7BPGNPQgmoeB85XFDawtMt4OjFtxmOeGwrVoXEMKBkCpiCYzMxAYR7GcPXmchSg3dQgzubDwqGuOhoFW2CRsuSwJPrywhxzoIYrBU4/s1600/e95a921638100a6e21b3143002d05a0f+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdgTBzC9dKAehKmBeNJ0RUa7bZTHczgh4iKlXXXPv6sYyAOem5hOVzJjzsQHJRqvZJQH5q7425UQlvPduE4KQ8X2dkw5Y86znt6ep0rAnqa0RLfZ8Hz48oJ0dBVKaBkeis0y4Y67ey2bI/s1600/9080607321ab98fa3e70dd24b2513a20+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNLsdbCJc23aokCwpWMokR-QN-NwHuVFy6BZ-jxHpUp3juIXSZkrSEhBQHoS8o3xv9lFPjl6HeACDD0ceWWL_ilFq2CL_LwdXZtAaTW2a3cxx6cz_Fvd1XuVg-efFqltMYYPsQRSFvKDY/s1600/1338614bf6bda949333801c917d9e988.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA539Y_HGEk2iGOy3FixA4O5qQowOWLzRZvb8imBFI5Z217ZHj9kuzwOGM4y0ZPgy_A1GGPcVniuQ_ZBSLCb5Eicp0-mRfQLRKpWvVacYhqXlmyOblSKHGmATOzMTtLVUaJ-JxFmjauV8/s1600/042413_square_loader+%252%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjzmfLSmhPG9DcgegObREPAEiO6f31NgfJ55IWbP8BJxqnukgr4dq_dlgtTmo17DUg3ZCRktCbhGiV4wedGSPfbxqM6hQXarQBnYASjg9poEk5YoCEfOxULJ6G4uiILAz0IaF5ckfiWCI/s1600/54f4ca1edced7ed62ba934b4_infinite-gif-preloader.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCVUYuanzDV6dRhY_SDgvtp_1LRsuCDxPFMTfm83BPsd7H6jk9bA3IKug-5W360tsF-QmB61g8DcHbSl_wDjMQDcP5wU8zfERQL37B1YXi2-rtfo8t116hlmemFhJFJld7izJPN3vf9bE/s1600/preloader+%25285%2529.gif
 

إرسال تعليق

0 تعليقات