كود فوتر ينفع للمنتديات والمدونات

[العراقي الطائي]

سلام عليكم احببت اشارككم كود فوتر ينفع للمنتديات والمدونات. يُعدّ الفوتر (Footer) أو تذييل الصفحة جزءًا لا يتجزأ من أي موقع ويب ناجح وفعّال. فبينما يركز رأس الصفحة (Header) على التنقل الأساسي، يمثل الفوتر الفرصة الأخيرة والأكثر أهمية لتوجيه المستخدم، توفير معلومات أساسية، وبناء الثقة والمصداقية.

معاينة الكود​

الاول مكون من كود هتمل يوضع في اسفل الفوتر لمدونتك او منتداك
كود هتمل

<footer class="stylish-footer">
    <div class="footer-container">

        <div class="footer-section about">
            <h3>اسم مدونتك</h3>
            <p>نحن منصة متخصصة في تقديم محتوى عالي الجودة في مجال التكنولوجيا والتطوير المهني. هدفنا هو إثراء المحتوى العربي.</p>
        </div>

        <div class="footer-section links">
            <h3>روابط سريعة</h3>
            <ul>
                <li><a href="#">الرئيسية</a></li>
                <li><a href="#">أقسام المدونة</a></li>
                <li><a href="#">مقالات شائعة</a></li>
                <li><a href="#">الاشتراك في النشرة</a></li>
            </ul>
        </div>

        <div class="footer-section contact">
            <h3>تواصل معنا</h3>
            <p><i class="fas fa-envelope footer-icon"></i>اكتب اميلك هنا</p>
            <p><i class="fas fa-phone footer-icon"></i>اكتب رقم هاتفك هنا</p>
            <div class="social-links">
                <a href="#" target="_blank" title="فيسبوك"><i class="fab fa-facebook-f"></i></a>
                <a href="#" target="_blank" title="تويتر"><i class="fab fa-twitter"></i></a>
                <a href="#" target="_blank" title="انستجرام"><i class="fab fa-instagram"></i></a>
                <a href="#" target="_blank" title="لينكدإن"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>
    </div>

    <div class="footer-bottom-bar">
        © 2025 اسم مدونتك. جميع الحقوق محفوظة.
    </div>
</footer>

بعدها كود سي اس اس

/* الألوان المستخدمة:
  أزرق داكن للخلفية: #1c2e4a
  أصفر/ذهبي للمسات: #ffc72c
  أزرق فاتح للنص: #e0e6f1
*/

.stylish-footer {
    background-color: #1c2e4a; /* خلفية زرقاء داكنة أنيقة */
    color: #e0e6f1; /* لون النص الافتراضي الفاتح */
    font-family: 'Arial', sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    display: flex; /* لتنظيم الأقسام الثلاثة جنبًا إلى جنب */
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}

.footer-section {
    flex: 1; /* جعل الأقسام تأخذ مساحة متساوية */
    min-width: 250px; /* ضمان عدم ضغطها في الشاشات الصغيرة */
}

/* تنسيق عناوين الأقسام */
.footer-section h3 {
    color: #ffc72c; /* اللون الأصفر/الذهبي */
    font-size: 18px;
    border-bottom: 2px solid #ffc72c; /* خط أصفر تحت العنوان */
    padding-bottom: 8px;
    margin-bottom: 20px;
}

/* تنسيق الفقرات العامة */
.footer-section p {
    font-size: 14px;
    line-height: 1.6;
}

/* تنسيق قائمة الروابط السريعة */
.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section li {
    margin-bottom: 10px;
}

/* تنسيق الروابط العامة */
.footer-section a {
    color: #e0e6f1;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #ffc72c; /* تلوين الرابط بالأصفر عند التمرير */
}

/* تنسيق أيقونات قسم التواصل */
.footer-icon {
    color: #ffc72c; /* جعل الأيقونات صفراء */
    margin-left: 8px;
}

/* تنسيق أيقونات التواصل الاجتماعي */
.social-links a {
    display: inline-block;
    font-size: 20px;
    margin-inline-end: 15px; /* مسافة بين الأيقونات */
    border: 1px solid #e0e6f1;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%; /* لجعلها دائرية */
    transition: all 0.3s ease;
}

/* تأثير التمرير على أيقونات التواصل الاجتماعي */
.social-links a:hover {
    background-color: #ffc72c; /* خلفية صفراء عند التمرير */
    color: #1c2e4a; /* لون نص أزرق داكن عند التمرير */
    border-color: #ffc72c;
}

/* شريط حقوق النشر السفلي (اللمسة الصفراء التصميمية) */
.footer-bottom-bar {
    background-color: #162438; /* أزرق أغمق قليلاً */
    text-align: center;
    padding: 15px 20px;
    font-size: 13px;
    /* الشريط الأصفر العلوي كتفصيل تصميمي */
    border-top: 3px solid #ffc72c;
}

/* استجابة الفوتر (لشاشات الجوال) */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
 
    .footer-section {
        margin-bottom: 20px;
    }

    .footer-section h3 {
        /* لتوسيط الخط تحت العنوان في الجوال */
        display: inline-block;
    }
}

بعدا يجب تشغيل كود الصور اعلى الهيدر لجلب الصور للفوتر

<head>          
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
           
<head>

نتمنى لكم يوما سعيدا

 

[Admin]

:ود جميل
بارك الله فيك اخي
اسمحلي قمت بتعديل الموضوع باضافة مقدمة من اجل محركات البحث واضفت مثال للفوتر

 

[العراقي الطائي]

شكرا لك اخي الادمن لتوضيح صوره الكود
لانني لم استطع تصويره