اضافة فوتر لمدونات بلوجر بثلاث اقسام footer

بسم الله الرحمن الرحيم

مرحباً بكم في بلوجر فيومي! في مقال اليوم، هنتعرف على كيفية إضافة فوتر مميز لموقعك يحتوي على ثلاث سكشنات متجاوبة. الفوتر ده هيتيح لك إضافة أدوات مختلفة لكل قسم من أقسامه من خلال لوحة التحكم في بلوجر، ويعطي لموقعك مظهراً احترافياً مع لمسة ثلاثية الأبعاد تعزز تجربة المستخدم.

هنشرح بالتفصيل كيفية إعداد الفوتر باستخدام وسوم <b:section>, وإضافة تأثيرات CSS تجعل الفوتر يبدو أكثر تميزاً وجاذبية. هنتناول خطوات إنشاء الفوتر، تصميمه باستخدام CSS، وإضافة الأدوات من التخطيط في بلوجر. تابعونا للحصول على تصميم فوتر يعكس احترافية موقعك ويجذب انتباه زوارك!

الخطوات:

1. إنشاء هيكل الفوتر:

استخدم الكود التالي لإنشاء فوتر يتكون من ثلاث سكشنات باستخدام <b:section>:

<footer>
    <b:section class='footer-section' id='footer-section1' name='القسم الأول' showaddelement='yes'>
        <b:widget id='FooterWidget1' title='أداة القسم الأول' type='Text' />
    </b:section>
    <b:section class='footer-section' id='footer-section2' name='القسم الثاني' showaddelement='yes'>
        <b:widget id='FooterWidget2' title='أداة القسم الثاني' type='Text' />
    </b:section>
    <b:section class='footer-section' id='footer-section3' name='القسم الثالث' showaddelement='yes'>
        <b:widget id='FooterWidget3' title='أداة القسم الثالث' type='Text' />
    </b:section>
</footer>
    

2. إضافة CSS لتصميم الفوتر بتأثير ثلاثي الأبعاد:

استخدم الكود التالي في وسم <b:skin> لتحسين تصميم الفوتر وإضافة تأثيرات ثلاثية الأبعاد:

/* CSS للفوتر */
footer {
    background: #333;
    color: #fff;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.5);
}

.footer-section {
    flex: 1 1 30%;
    margin: 10px;
    background: #444;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}

.footer-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
}

.footer-section h4 {
    margin-bottom: 10px;
    font-size: 18px;
}

.footer-widgets {
    /* يمكنك إضافة المزيد من التنسيقات هنا */
}

@media (max-width: 768px) {
    .footer-section {
        flex: 1 1 100%;
    }
}
    

3. إضافة أدوات الفوتر من التخطيط:

بعد إضافة الهيكل الأساسي والفئات الخاصة بالفوتر، يمكنك الآن الذهاب إلى قسم التخطيط في لوحة تحكم بلوجر وإضافة أدوات مختلفة لكل قسم من أقسام الفوتر. يمكن إضافة أدوات مثل الروابط، النصوص، أو أي أدوات أخرى تدعمها بلوجر.

باتباع الخطوات دي، هتقدر تضيف فوتر مميز يتكون من ثلاث سكشنات متجاوبة مع تأثيرات ثلاثية الأبعاد، ويتيح لك إضافة أدوات متنوعة من التخطيط في بلوجر. ده هيساعدك في تحسين تنظيم الموقع وتوفير تجربة مستخدم أفضل.