إضافة أيقونات السوشيال ميديا Social Media للهيدر للزين فورو

شرح إضافة أيقونات السوشيال ميديا Social Media للهيدر للزين فورو

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

السلام عليكم ورحمة الله وبركاته

أخوتى وأحبتى فى الله
مرحبا بكم فى مجتمع تقنى
درس اليوم وهو إضافة أيقونات الشوشيال ميديا للهيدر لتضف لمنتداك لمسة جمالية

مثال بعد تطبيق الدرس

tqny2.gif



الطريقة كالتالى
لوحة تحكم المنتدى - تاب المظهر - البحث عن القوالب

هنبحث عن قالب بإسم extra.less
وهنضيف الكود ده فى أى مكان بالقالب
CSS:
.social-network {
    font-size: 0;
    line-height: 0;
    letter-spacing: -4px;
    padding: 10px 0;
    text-align: center;

    li {
        display: inline-block;
        vertical-align: text-top;
        font-size: 15px;
        line-height: 28px;
        letter-spacing: 0;
        padding: 0 4px;
        text-transform: uppercase;
        font-weight: 600;
        a {
            display: block;
            width: 30px;
            height: 30px;
            color: #FFF;
            background:#58819F;
            border-radius: 4px;
            &:after {
                content: " ";
                display: block;
                clear: both;
                box-sizing: inherit;
            transition: transform 0.4s linear 0s,
            border-top-left-radius 0.1s linear 0s,
            border-top-right-radius 0.1s linear 0.1s,
            border-bottom-right-radius 0.1s linear 0.2s,
            border-bottom-left-radius 0.1s linear 0.3s;
            }
        }
        a.youtube:hover   {
      background-color: #bb0000;
      transform: rotate(360deg);
      border-radius: 50%;
            }
        a.facebook:hover {
            background-color: #3b5998;
            transform: rotate(360deg);
            border-radius: 50%;
        }
        a.twitter:hover   {
      background-color: #00aced;
      transform: rotate(360deg);
      border-radius: 50%;
        }
        a.instagram:hover   {
      background-color: #bc2a8d;
      transform: rotate(360deg);
      border-radius: 50%;
        }
    }
    &:after {
        content: " ";
        display: block;
        clear: both;
        box-sizing: inherit;
    }
}
}

ثم ستتوجة لتاب الإعداد- ثم الإعلانات - إضافة إعلان
هتختار مكان الإعلان ( الموقع ) حاوى الهيد حتى يظهر معك فى كل الصفحات
وهتضيف الكود ده

HTML:
<ul class="social-network">
    <li><a class="youtube" href="https://www.youtube.com/channel/#" target="_blank"><i class="fab fa-youtube"></i></a></li>
    <li><a class="facebook" href="https://www.facebook.com/#" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
    <li><a class="twitter" href="https://twitter.com/#" target="_blank"><i class="fab fa-twitter"></i></a></li>
     <li><a class="instagram" href="https://www.instagram.com/#" target="_blank"><i class="fab fa-instagram"></i></a></li>
</ul>

أتمنى أن تكون قد أعجبتكم الفكرة وقد أستطعت شرحها بشكل جيد
وإلى اللقاء أحبتى فى درس قادم إن شاء الله

لطلب الدعم والمساعدة لا تتردد
الكاتب
Eng.Salah
المشاهدات
143
الإصدار الأول
آخر تحديث
تقييم
0.00 نجوم 0 تقييمات

منتجات أخرى من Eng.Salah