نعرض الفهرس كبطاقات بتصميم أنيق، مع:

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

✅ أيقونة أمام اسم التصنيف (أو داخل دائرة ملونة).

✅ اسم التصنيف.

✅ زر “عرض القسم”.

✅ تصميم أنيق بشبكة بطاقات.

✅ أيقونة دائرية ملونة لكل تصنيف.

✅ لا تكرار في الصور.

✅ لا تحتاج صور على الإطلاق.

✅ خفيف وسريع على الجوال.

function previewTemplate() {
window.open(“https://shms4m.blogspot.com/p/blog-page.html”, “PreviewWindow”, “width=1000,height=700,resizable=yes”);
}

✅ النسخة المطورة مع أيقونات مخصصة حسب التصنيف:

لكل تصنيف أيقونة خاصة حسب الاسم.

ألوان متنوعة للأيقونات (دوائر).

.modal-bg {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 9999;
}
.modal-box {
background: #fff; padding: 0; border-radius: 10px; width: 90%; height: 90%;
box-shadow: 0 0 20px rgba(0,0,0,0.3); position: relative;
}
.modal-box iframe {
width: 100%; height: 100%; border: none;
border-radius: 10px;
}
.modal-close {
position: absolute; top: 10px; right: 10px;
background: #f44336; color: #fff; border: none; border-radius: 50%;
width: 30px; height: 30px; font-size: 20px; cursor: pointer;
}

function openModal() {
document.getElementById(“previewModal”).style.display = “flex”;
}
function closeModal() {
document.getElementById(“previewModal”).style.display = “none”;
}

إن لم يُعرف التصنيف، يتم استخدام أيقونة افتراضية fa-tags.