كيفية صناعة البوم صور داخل مواضيع وصفحات بلوجر

 هناك اضافات لا تعد لصنع البومات صور لكن أغلبها يحتاج اضافات جافاسكريبت ومكتبات كبيرة وصعب تطبيقها على بلوجر بسهولة

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

لذلك قمت بإعداد كود بسيط لإستغلال تلك الميزة في شكل البوم صور والإستخدام سيكون فقط لـ 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 عليه

معاينة

تعديل