حل مشكلة عدم ظهور الصور في بلوجر
الدليل الشامل مع حلول عملية وأكواد جاهزة للتنفيذ
الأسباب الشائعة وطرق العلاج
1. مشكلة في رفع الصور
- تأكد من اكتمال عملية رفع الصور
- تحقق من حجم الصور (يفضل أقل من 2048 بكسل)
- جرب إعادة رفع الصورة مرة أخرى
نصيحة: استخدم صيغة JPG للصور الفوتوغرافية و PNG للصور ذات الخلفية الشفافة.
2. مشكلة في روابط الصور
- تأكد أن الرابط يبدأ بـ
https:// - تحقق من عدم وجود مسافات في اسم الملف
- افحص الصورة في نافذة المتصفح الخاصة
// مثال لرابط صورة صحيح:
https://1.bp.blogspot.com/.../image.jpg
3. مشكلة في إعدادات القالب
أضف هذا الكود في قالب بلوجر:
<b:if cond='data:blog.pageType == "item"'>
<style>
.post-body img {
max-width: 100%;
height: auto;
display: block;
}
</style>
</b:if>
تحذير: احفظ نسخة احتياطية من القالب قبل إجراء أي تعديلات.
حلول متقدمة
إصلاح تلقائي للصور التالفة
أضف هذا الكود قبل </body>:
<script>
// إصلاح الصور التالفة تلقائياً
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.post-body img').forEach(img => {
img.onerror = function() {
this.src = this.dataset.fallback || 'https://via.placeholder.com/800x400?text=Image+Not+Found';
};
if(!img.src.includes('blogspot.com')) {
img.src = img.dataset.original || img.src;
}
});
});
</script>
تحميل متطور للصور
كود لتحسين أداء تحميل الصور:
<style>
.lazy-img {
opacity: 0;
transition: opacity 0.5s ease;
}
.lazy-img.loaded {
opacity: 1;
}
</style>
<script>
function lazyLoad() {
const images = document.querySelectorAll('.lazy-img');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.add('loaded');
observer.unobserve(img);
}
});
});
images.forEach(img => observer.observe(img));
}
window.addEventListener('load', lazyLoad);
</script>
نصائح وقائية
- استخدم TinyPNG لضغط الصور قبل رفعها
- احتفظ بنسخة احتياطية من جميع الصور
- استخدم أسماء ملفات واضحة (بدون أحرف خاصة)
- تحقق من الصور بشكل دوري باستخدام Search Console
الدعم الفني
إذا لم تحل المشكلة بعد تطبيق جميع الحلول السابقة، يمكنك:
- مراجعة مركز مساعدة بلوجر
- طرح سؤالك في منتدى مجتمع بلوجر