إضافة متابعة على المواقع الإجتماعية تجمع كل المواقع

 لاحظت أن بعض الموقع تعتمد على كثير من الخدمات الإجتماعية , يعني لديها صفحة ربما على كل المنصات , لكن لا أرى اضافة كل المنصات في القوائم أو في جزء معين في الموقع تكون دائماً شكلها جيد بالعكس أحيانا تكون سيئة وربما تؤثر على التجاوب

لذلك رأيت أن أصنع لكم هذه الإضافة لتخدم من يواجهون تلك المشكلة

كود الإضافة يمكنك أن تضعه في آداة أو في صفحة

تعتمد الإضافة على خط الأيقونات Fontawesome فيجب أن يكون مضاف في قالبك

<style>

#follow-cnmu{background-color:#2d4c67;padding:20px;text-align:center;color:#fff;border-radius:4px;margin-bottom:20px;}

#follow-cnmu > strong{font-size:120%;text-shadow:1px 1px #000;margin-bottom:20px;display:block;}

.follow-icons{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));}

.follow-icons a{color:#fff;display:flex;align-items:center;justify-content:center;gap:5px;flex-direction:column;background-color:rgba(255,255,255,.1);padding:10px!important;border-radius:2px;transition:background-color .4s;}

.follow-icons a:hover{background-color:rgba(0,0,0,.3);}

.follow-icons a i{order:-1;font-size:24px;}

.follow-icons a span {white-space: nowrap;}

/*الوان الأزرار*/

.follow-icons a:nth-child(1):hover {background-color: #3A589B;}

</style>

<div id="follow-cnmu">

<strong>تابعنا على المواقع الإجتماعية</strong>

<div class='follow-icons'>

<!--بداية رابط-->

<a href="#" target="_blank" rel="noopener noreferrer">

<i class="fa-brands fa-facebook-f"></i>

<span>Facebook</span>

</a>

<!--نهاية رابط-->

</div>

</div>

كرر كود الرابط من البداية للنهاية لتحصل على أيقونة جديدة

استبدل رمز # برابط الموقع الإجتماعي

استبدل الكود الأحمر بكود الأيقونة من الخط

استبدل الكلمة الخضراء بإسم الأيقونة

الكود المعلم باللون الوردي هو لون الأيقونة عند تمرير الماوس

كرره مع كل أيقونة تكررها عدل كود اللون فيه وعدل الرقم 1 الى رقم 2 الخ بحسبب عدد الأيقونات لديك أو ازله لتعتمد على لون موحد عند التمرير

معاينة للإضافة