🚀 أكواد لزيادة كفاءة مدونتك على Blogger وجعلها أسرع وأكثر احترافية!
📌 ما الذي سأضيفه الآن؟
✅ ⚡ تحسين سرعة تحميل المدونة 🚀
✅ 🔄 تحميل الصور فقط عند ظهورها على الشاشة (Lazy Loading) 🖼️
✅ 📊 ضغط الأكواد البرمجية لتسريع الأداء 📉
✅ 🌐 تفعيل التخزين المؤقت للمدونة (Cache Optimization) 🔄
✅ 📱 تحسين استجابة المدونة على الهواتف المحمولة 📲
✅ 🔍 تحسين ظهور المدونة في محركات البحث (SEO Boosting) 📈
✅ 🎭 تحسين عرض الخطوط والنصوص لتجربة قراءة أفضل 🖋️
1️⃣ 🚀 تحسين سرعة تحميل المدونة
<script>
window.onload = function() {
setTimeout(function() {
document.body.style.opacity = "1";
}, 300);
};
</script>
<style>
body {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
</style>
✅ يضيف تأثير تحميل سريع ويمنع تأخير عرض المحتوى.
2️⃣ 🖼️ تحميل الصور فقط عند ظهورها على الشاشة (Lazy Loading)
<script>
document.addEventListener("DOMContentLoaded", function() {
let lazyImages = document.querySelectorAll("img[data-src]");
lazyImages.forEach(img => {
img.src = img.getAttribute("data-src");
});
});
</script>
<img data-src="https://via.placeholder.com/400" width="400" height="300">
✅ يحسن سرعة تحميل الصفحة عن طريق تحميل الصور فقط عند الحاجة.
3️⃣ 📉 ضغط الأكواد البرمجية لتسريع الأداء
<script>
document.addEventListener("DOMContentLoaded", function() {
document.body.innerHTML = document.body.innerHTML.replace(/\s+/g, ' ').trim();
});
</script>
✅ يقلل من حجم النصوص البرمجية ويجعل الصفحة أسرع.
4️⃣ 🔄 تفعيل التخزين المؤقت للمدونة (Cache Optimization)
<meta http-equiv="Cache-Control" content="public, max-age=31536000">
<meta http-equiv="Expires" content="Mon, 1 Jan 2025 00:00:00 GMT">
✅ يمنع إعادة تحميل الصور والمحتوى الثابت في كل زيارة.
5️⃣ 📲 تحسين استجابة المدونة على الهواتف المحمولة
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
@media screen and (max-width: 600px) {
body { font-size: 16px; }
img { max-width: 100%; height: auto; }
}
</style>
✅ يجعل المدونة متجاوبة مع جميع الأجهزة المحمولة.
6️⃣ 📈 تحسين ظهور المدونة في محركات البحث (SEO Boosting)
<meta name="robots" content="index, follow">
<meta name="keywords" content="Blogger, SEO, مدونة, تحسين محركات البحث">
<meta name="author" content="اسمك هنا">
✅ يساعد في رفع ترتيب المدونة على محركات البحث مثل Google.
7️⃣ 🖋️ تحسين عرض الخطوط والنصوص لتجربة قراءة أفضل
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
text-align: justify;
}
</style>
✅ يجعل النصوص أكثر وضوحًا وأسهل في القراءة.
📌 كيفية إضافة هذه الأكواد في Blogger؟
✅ انتقل إلى “المظهر” (Theme) → “تعديل HTML”.
✅ ألصق الأكواد حيث تريد أن تظهر الميزات داخل <body>.
✅ لحفظ الأكواد الخاصة بالأداء، ضعها في <head> داخل القالب.