هذا الكود هو كود خاص بإظهار أزرار مواقع التواصل الإجتماعي , تحقق من أن موقعك مضاف إليه كود مشابه لهذا أو لا فإن لم يكن مضافا , فأضف هذا الكود فوق وسم </head> مباشرة في إعدادات html قالب الموقع .

و الأن إليك الكود التالي الخاص بالـ html للأزرار :

<div class='socia-lmedia'> <!-- created by superstech --> <a href="#" class='fab fa-youtube' title='يوتيوب' target='_blank' rel='nofollow'></a> <a href="#" class='fab fa-facebook' title='فيسبوك' target='_blank' rel='nofollow'></a> هنا أضف المزيد من أكواد مواقع التواصل الإجتماعي </div>

في مكان " هنا أضف المزيد من أكواد مواقع التواصل الإجتماعي " أضف المزيد من أكواد مواقع التواصل الإجتماعي التالية مع تعديل طفيف :
مثلا :

<a href="#" class='fab fa-youtube' title='يوتيوب' target='_blank' rel='nofollow'></a>

قم بنسخ هذا الكود و التعديل عليه كالتالي :
في مكان youtube استبدلها بأي إسم لأي موقع تواصل إجتماعي و اكتبه بشكل صحيح لكي يظهر .
في مكان يوتيوب إستبدلها بإسم موقع التواصل الإجتماعي بالعربية .

و الأن نأتي إلى كود الـ css المرفق مع كود الـ html .
إليك كود الـ الخاص بأزرار موقع التواصل الإجتماعي :

<div class='socia-lmedia'> <!-- created by superstech --> <style> .socia-lmedia a { font-size: 45px; color: white; margin: 3px; padding: 10px; border-radius: 5px; } .socia-lmedia a:hover { border-radius: 10px; background-color: #464040d4; } .socia-lmedia a.fab.fa-youtube { background-color: #bb0000; } .socia-lmedia a.fab.fa-facebook { background-color: #3B5998; } هنا أضف المزيد من أكواد مواقع التواصل الإجتماعي </style> </div>

في مكان " هنا أضف المزيد من أكواد مواقع التواصل الإجتماعي " قم بنسخ الكود التالي مع تعديل بسيط عليه :

.socia-lmedia a.fab.fa-youtube {

    background-color: #bb0000;

}

في مكان youtube أضف إسم موقع التواصل الإجتماعي المرد و إكتبه بشكل صحيح ليظهر تأثير الـ css على الزر .
في مكان #bb0000 أضف كود لون زر موقع التواصل الإجتماعي المراد إضافته .

إليك مجموعة من الأكواد الجاهزة لعدة مواقع تواصل إجتماعي دفعة واحدة

<div class='socia-lmedia'> <div class='socia-lmedia'> <!-- created by superstech --> <a href="#" class='fab fa-youtube' title='يوتيوب' target='_blank' rel='nofollow'></a> <a href="#" class='fab fa-facebook' title='فيسبوك' target='_blank' rel='nofollow'></a> <a href="#" class='fab fa-twitter' title='تويتر' target='_blank' rel='nofollow'></a> <a href="#" class='fab fa-instagram' title='أنستغرام' target='_blank' rel='nofollow'></a> <a href="#" class='fab fa-snapchat-ghost' title='سنابشات' target='_blank' rel='nofollow'></a> <a href="#" class='fab fa-mix' title='ميكس' target='_blank' rel='nofollow'></a> <a href="#" class='fab fa-linkedin' title='لينكيدين' target='_blank' rel='nofollow'></a> <a href="#" class='fab fa-reddit' title='ريديث' target='_blank' rel='nofollow'></a> <a href="#" class='fab fa-pinterest' title='بينتريست' target='_blank' rel='nofollow'></a> <a href="#" class='fab fa-tumblr' title='تومبلر' target='_blank' rel='nofollow'></a> </div> <style> .socia-lmedia a.fab.fa-youtube { background-color: #bb0000; } .socia-lmedia a.fab.fa-facebook { background-color: #3B5998; } .socia-lmedia a.fab.fa-instagram { background-color: #125688; } .socia-lmedia a.fab.fa-twitter { background-color: #55ACEE; } .socia-lmedia a.fab.fa-snapchat-ghost { background-color: #fffc00; } .socia-lmedia a.fab.fa-mix { background-color: #eb4924 } .socia-lmedia a.fab.fa-linkedin { background-color: #007bb5 } .socia-lmedia a.fab.fa-reddit { background-color: #ff5700 } .socia-lmedia a.fab.fa-pinterest { background-color: #cb2027 } .socia-lmedia a.fab.fa-tumblr { background-color: #2c4762 } .socia-lmedia a { font-size: 45px; color: white; margin: 3px; padding: 10px; border-radius: 5px; } .socia-lmedia a:hover { border-radius: 10px; background-color: #464040d4; } </style> </div>

شكرا على حسن المتابعة