ايضا هناك من يملك في قالبه احد السكريبتات التي تحدثنا عليه لاضافة class لعرض الصورة الاولى مع التحكم في الستايل كما تريد ، لكن هناك من يريد التخلص من السكريبت مع اضافة الكود الاصلي ضمن برمجيات بلوجر و هي يتم اضافة الكود ليظهر الصورة الاولى من المشاركة مع الوصف او المقصود به snippet .
سنتعرف في هذا الموضوع على الطريقتين او ثلاث اولها بالسكريبت و ثانيا التخلص من السكريبت و اخرها التخلص من السكريبت لاضهار الصورة و العنوان فقط من غير وصف او ايهما الافضل ؟
الملخصات والصور المصغرة السهلة لمدونات Blogger لا يلزم استخدام JavaScript
تعد القدرة على عرض ملخصات المنشورات والصور المصغرة التلقائية واحدة من أكثر التخصيصات المطلوبة في Blogger يتيح لنا استخدام هذه الميزة إنشاء تخطيط متماسك على الصفحات غير المتعلقة بالعنصر مع المنشور الكامل وصورة بالحجم الكامل على صفحات العنصر.
تتيح لنا التغييرات الأخيرة التي تم إجراؤها على وظائف Blogger الآن تحقيق ذلك باستخدام رمز Blogger فقط ، دون الحاجة إلى JavaScript أو تخصيصات CSS المرهقة أو قيود على طول أو تنسيق منشوراتنا.
سكريبت حل مشكلة الصور في الصفحة الرئيسية لمدونة بلوجر
الكود البديل الذي يمكن اضافته في قالب بلوجر في حالة وجدت الصفحة الرئيسية ملخبطة بين الصور فهذا الكود سيتعرف على كل وسم img و يضيف عليه Class thumb كما موضح في السكريبت و يمكن اضافتة فوق وسم الغلق head .
من خلال بعض التغييرات الصغيرة على قالب Blogger الخاص بنا ، يمكننا عرض ملخصات المنشورات والصور المصغرة باستخدام هذه الخدعة سهلة الإدارة.
كيفية إضافة الصور المصغرة والملخصات إلى منشورات Blogger في 3 خطوات سهلة
إليك الدليل المفصل خطوة بخطوة حول أبسط الحلول لملخصات المنشورات والصور المصغرة باستخدام Blogger :
الخطوة 1 : عمل نسخة احتياطية من القالب الخاص بك
فمن المهم عمل نسخة احتياطية من نموذج Blogger الخاص بك قبل إجراء أي تعديلات هذا يضمن أنه يمكننا استعادة قالب الوظيفة بسهولة إذا حدث خطأ ما.
لعمل نسخة احتياطية من قالب Blogger ، انتقل إلى التصميم> تحرير HTML في لوحة معلومات Blogger وانقر على رابط تنزيل النموذج الكامل بالقرب من أعلى الصفحة.
سيطلب منك حفظ ملف XML على محرك الأقراص الثابتة بجهاز الكمبيوتر الخاص بك و يشتمل ملف XML هذا على جميع قوالب HTML وعناصر واجهة المستخدم التي تحتاجها لعرض تخطيط Blogger الحالي الخاص بك تأكد من حفظ هذا في مكان يسهل تذكره وقم بتدوين اسم الملف في حالة احتياجك لاستعادة قالب العمل الخاص بك لاحقا.
الخطوة 2 : أضف الكود ادناه لعرض الملخصات والصور المصغرة على الصفحات التي لا تحتوي على عناصر
المقصود انه لا يتعرف بلوجر على class و نحن سنجعله يتعرف على img مع class و السكريبت دون الحاجة اليه بل بطريقة اخرى وهي كود html فقط .
تتمثل المرحلة التالية في إضافة رمز Blogger الذي سيعرض ملخصا وصورة مصغرة لمشاركاتنا انتقل إلى التصميم> تحرير HTML وحدد مربع توسيع قوالب عناصر واجهة المستخدم وابحث عن السطر التالي من التعليمات البرمجية :
سنجد ربما في بعض القوالب اكثر من وسم يمكن ان تجد ثلاثة فانت جرب على الثاني و اذا لم تنجح ارجع القالب الى وضعه العادي و جرب على الاول او الثالث كل مرة و ستنجح معك الطريقة في احدهم .
اذن استبدله بهذا بالكود التالي:
قمنا بالتجربة بالسكريب و نجحت
قمنا بالتجربة ايضا ب html و نجحت ايضا .
ستعدل على الصورة ب class و img حسب ما تريد الصورة في مظهرها الذي يعجبك ، ستتحكم في الابعاد و الى اخره .
قم بمعاينة التغيير في القالب الخاص بك وسترى أن مشاركاتك ستظهر بتنسيق مشابه لهذا :
كما هو موضح في لقطة الشاشة أعلاه ، تظهر الصورة المصغرة بشكل أكثر تناسقا إلى يسار أو يمين الملخص عن طريق إضافة CSS إلى القالب الخاص بنا ففي هذه المرحلة ، يمكنك اختيار حفظ التعديل على القالب الخاص بك أو إضافة CSS ومعاينة التأثير النهائي قبل إجراء التغييرات على موقعك.
الخطوة 3: أضف CSS لمحاذاة الصورة المصغرة
ضروري كود css و الذي يمكنك معرفة class اثناء الضغط على الصورة من يمين الفأرة ثم inspect سيظهر كود html الذي اضفناه بالكود css ادناه ، بينما السكريب ستبدأ ي img ثم نقطة ثم thumb لكي تنجح العملية
Img.thumb
أثناء وجودك في قسم التصميم> تحرير HTML باللوحة الخاصة بك ، ابحث عن السطر التالي:
قبل هذا السطر مباشرة ، الصق إعلان CSS التالي :
سيؤدي هذا إلى محاذاة الصورة المصغرة إلى يسار ملخص المنشور والسماح ببعض المسافة بين الصورة المصغرة والنص مثل هذا :
قم بمعاينة القالب الخاص بك لترى كيف يؤدي ذلك إلى ظهور منشوراتك على الصفحة الرئيسية. عندما تكون سعيدا بالتخطيط ، احفظ القالب الخاص بك واستمتع بالصور المصغرة الآلية.
ازالة الوصف من المشاركات و اظهار الصورة و العنوان فقط
في الصورة اعلاه الملون بالاخضر هو ما نقصده …
هناك بعض اصحاب المواقع يريدون عرض العنوان و الصورة فقط و لذلك بدلا من الكود اعلاه ستستخدم هذا الكود :
كيف يعرض هذا التخصيص الملخصات والصور المصغرة
في حين أنه من السهل الإضافة إلى قالب Blogger الخاص بن حتى تعمل الميزة ، إلا أن هناك الكثير من التعليمات البرمجية الشرطية المعقدة قيد الاستخدام لضمان عرض الملخصات كما ينبغي.
أولا ، يتحقق الكود مما إذا كانت الصفحة التي يتم عرضها هي صفحة مقالة أم لا إذا لم تكن الصفحة صفحة عنصر ، فسيتم تفعيل رمز الملخص الصورة المصغرة.
يكتشف الفحص الثاني ما إذا كان مقتطف المنشور متاحا (أي إذا كان المنشور يحتوي على بعض النص) إذا كان هناك مقتطف و ما نتحدث عنه هو كود snippet في الكود ، فإن الكود يتحقق مما إذا كانت الصورة المصغرة متاحة ويعرض الصورة المصغرة مع العنوان مع الوصف او الكلمات اول الموضوع .
💬تعليقات
إرسال تعليق