المعاينات والمرفقات
هناك اضافات لا تعد لصنع البومات صور لكن أغلبها يحتاج اضافات جافاسكريبت ومكتبات كبيرة وصعب تطبيقها على بلوجر بسهولة
لكن في بلوجر ميزة موجوده بالفعل لعرض الصور في صندوق ضوئي وهي ميزة مدمجة في المنصة نفسها فلا تكلفنا اى شئ إضافي ولن تسبب أى نوع من الثقل على الموقع ولا تحتاج اى مجهود لتثبيتها
لذلك قمت بإعداد كود بسيط لإستغلال تلك الميزة في شكل البوم صور والإستخدام سيكون فقط لـ HTML -CSS
لا يوجد أى نوع من الأكواد الخارجية
تنويه الصندوق الضوئي لعرض الصور في بلوجر في العادة يكون مفعل في كل المدونات تلقائياً
لكن ان لم يكن مفعل لديك يمكنك مراجعة الإعدادات ثم ابحث عن العرض المبسط للصور وتأكد أنه مفعل
بعض القوالب يقوم مصمميها بتعطيل تلك الخاصية لتسريع قوالبهم ان كانت معطلة في قالبك عن طريق المصمم هنا لا أستطيع افادتك في الأمر
التعامل مع الصورة
الصور التي تستخدم في العرض المبسط يجب أن تكون مرفوعة على بلوجر لا ينفع استخدام صور من روابط خارجية
فيمكنك أن ترفع الصور في صفحة ثابته وتجعل تلك الصفحة مرجع لرفع الصور وليس شرط أن تنشرها يمكنك أن تبقيها كمسودة
يجب عندما ترفع الصورة أيضاً أن تختار لها الحجم الأصلي
بعد رفع الصورة سنحتاج أن نقوم بتغيير على رابطها
مثال هذا رابط صورة الموضوع
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYQbj4BmXInLYS4ZNN8J3OSbmVFDK6wU0rKwzvnyBuxgMuPWqbolBLB_wreSnMorxrCQPTch3PUmhEDfDXjMJJvJH_Hk2AeEn047x3bwed8kK4V1WD0i9F-2uMFZhkm1yxmfux28CFhIkuISswxrzQzugWPfjKGaftIpNkmeEaQto-VZzJjft3B0yvSQ/s16000/PhotoAlbum.jpg
سنستخدمه كما هو مرة ومرة أخرى سنستخدمه مع تغيير الرقم s16000 الى s200-c
ليس شرط أن يكون الرقم s16000 قد تجده s1600 أو s وبجانبه أى رقم طالما اخترت الحجم الأصلي
السبب في استخدامه مرتين مرة ستكون الصورة بحجمها الأصلي وهذه ستعمل فقط عند الضغط عليها
ومرة ستكون بشكل مصغرات وهذه التي ستكون معروضة شكل المصغرات تكون الصور خفيفه وبالتالي سيكون تحميل الموضوع سريع فلن يحمل الزائر الصورة كاملة بحجمها الكبيرة إلا عندما يضغط عليها
والرقم 200 يعني جودة الصور المصغرة يمكنك زيادته لزيادة جودتها وتقليله لتقليلها كلما زادت الجودة أصبح أثقل كلما انخفضت أصبح الأمر أسرع
كود الألبوم
<style>.cnmualbum {display: grid;gap: 10px;grid-template-columns: repeat(auto-fill,minmax(128px,1fr));}.cnmualbum a {display: block!important;text-decoration: none!important;margin: 0!important;padding: 3px!important;overflow: hidden; background-color: #fff; border: 1px solid #000;}.cnmualbum img{display:block;width:100%!important;height:auto!important;max-width:100%!important;transition:all .4s ease;}.cnmualbum img:hover{transform:scale(1.1);}</style><div class="cnmualbum"><!--كود صورة--><a href="#"><img src="*"/></a><!--كود صورة--><!--كود صورة--><a href="#"><img src="*"/></a><!--كود صورة--></div>
الرقم 128 الموجود في البداية لتعديل عدد الصور في الصف الواحد كلما قل كلما زاد عدد الصور وكلما زاد كلما قل العدد
الكودين الأحمر والأزرق هم تكرارات للصور يعني هذا كود لصورتين يمكنك تكرار الكود
للحصول على صورة جديدة
كل كود به رمز # هذا الرمز تستبدله
برابط الصورة الأصلي كمال هو
وكذلك في كل كود ستجد رمز * هذا نستبدله
برابط الصورة بعد وضع s200-c عليه
معاينة
الاشتراك في:
تعليقات الرسالة (Atom)
من بين أفضل مواضيعك أستاذنا الرائع دوما ♥ شكرا لك من القلب ♥
ردحذفهل يُمكن إضافتها في الصفحة الرئيسية للمدونة ؟
الله يعزك أخي منير , شكراً لذوقك يا طيب
حذفبالنسبة لسؤالك لن تعمل جيداً في الرئيسية فعرض الصور في بلوجر مخصص للمواضيع
شكرا جدا على الأضافة
ردحذفشكراً أخي أحمد سرني مرورك
حذفجزاك الله خيراً أتعلم منكم وأستفيد من مدونتكم منذ أزيد من 6 سنوات وأكثر
ردحذفوجزاك الله بالمثل اخي الكريم , سرني مرورك , وشكراً كونك صديق للمدونة 🌹
حذف