كيفية إضافة أيقونات السوشيال ميديا الاحترافية إلى بلوجر باستخدام Font Awesome
 |
| كيفية إضافة أيقونات السوشيال ميديا الاحترافية إلى بلوجر باستخدام Font Awesome |
إذا كنت ترغب في جعل مدونتك على بلوجر تبدو أكثر احترافية وعصرية، فإن إضافة أيقونات وسائل التواصل الاجتماعي بطريقة حديثة تعتبر من أهم الخطوات التي تساعد على تحسين شكل الموقع وزيادة تفاعل الزوار مع صفحاتك على المنصات المختلفة. فالكثير من القوالب لا توفر تصميماً جذاباً لأزرار السوشيال ميديا، أو تكون الأيقونات قديمة وغير متناسقة مع التصميم الحديث للمواقع.
في هذا الشرح سوف تتعلم طريقة إضافة أيقونات سوشيال ميديا احترافية إلى مدونة بلوجر باستخدام مكتبة Font Awesome مع أكواد HTML وCSS بسيطة يمكنك تعديلها بسهولة حسب ألوان موقعك وروابط حساباتك. كما أن هذه الطريقة تمنحك تأثيرات Hover Animation جميلة تجعل الأزرار تبدو أكثر احترافية عند مرور الزائر فوقها.
كيفية إضافة أزرار مواقع التواصل الإجتماعي HTML/CSS عصرية لمدونة بلوجر
لإضافة أيقونات وسائل التواصل الاجتماعي الحديثة إلى موقعك على بلوجر، يمكنك استخدام مزيج من مكتبة Font Awesome الخاصة بالأيقونات مع أكواد HTML وCSS مخصصة داخل أداة (Gadget).
الخطوة 1: الاتصال بمكتبة الأيقونات
معظم الأيقونات الحديثة تعمل عبر مكتبات مثل Font Awesome.اذهب إلى:
لوحة تحكم بلوجر > المظهر > تعديل HTML
ابحث عن وسم <head> ثم ألصق هذا الرابط مباشرة أسفله لتفعيل الأيقونات:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"/>
الخطوة 2: إضافة أداة وسائل التواصل الاجتماعي
اذهب إلى:
لوحة تحكم بلوجر > التنسيق
اضغط على “إضافة أداة” (Add a Gadget) في الشريط الجانبي أو منطقة التذييل (Footer)، ثم اختر:
HTML/JavaScript
بعد ذلك، قم بلصق أكواد HTML وCSS التالية معًا داخل مربع “المحتوى” (Content):
<style>
/* حاوية الأيقونات */
.social-widget-box {
display: flex;
gap: 12px;
justify-content: center;
padding: 15px 0;
}
/* حماية وتنسيق الأزرار الدائرية */
.social-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
text-decoration: none !important;
transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out !important;
}
/* إجبار الرموز الداخلية على استخدام خط Font Awesome ومنع تشوهها */
.social-btn i {
font-family: "Font Awesome 6 Brands" !important;
font-size: 20px !important;
color: #ffffff !important;
line-height: 1 !important;
display: inline-block !important;
font-style: normal !important;
font-variant: normal !important;
text-rendering: auto !important;
-webkit-font-smoothing: antialiased !important;
}
/* تأثيرات التمرير */
.social-btn:hover {
transform: scale(1.1) !important;
filter: brightness(1.15) !important;
}
/* الألوان الرسمية للمنصات */
.btn-facebook { background-color: #1877F2 !important; }
.btn-twitter-x { background-color: #000000 !important; }
.btn-instagram { background-color: #E1306C !important; }
.btn-youtube { background-color: #FF0000 !important; }
</style>
<div class="social-widget-box">
<!-- فيسبوك -->
<a href="YOUR_FACEBOOK_URL" class="social-btn btn-facebook" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-facebook-f"></i>
</a>
<!-- إكس تويتر سابقاً -->
<a href="YOUR_TWITTER_URL" class="social-btn btn-twitter-x" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-x-twitter"></i>
</a>
<!-- انستغرام -->
<a href="YOUR_INSTAGRAM_URL" class="social-btn btn-instagram" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-instagram"></i>
</a>
<!-- يوتيوب -->
<a href="YOUR_YOUTUBE_URL" class="social-btn btn-youtube" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-youtube"></i>
</a>
</div>
نصائح للتخصيص
الروابط:
قم باستبدال YOUR_URL بروابط حساباتك الحقيقية على وسائل التواصل الاجتماعي.
تأثيرات التحويم (Hover Effects):
خصائص transition و transform الموجودة في أكواد CSS تضيف حركة انسيابية وعصرية عند مرور المستخدم فوق الأيقونات.
إضافة المزيد من الأيقونات:
لإضافة أيقونات أخرى (مثل LinkedIn أو Pinterest)، قم بنسخ أحد وسوم <a> ثم غيّر اسم الـ class وكود أيقونة Font Awesome (مثل: fa-linkedin أو fa-pinterest).
من أهم مميزات هذه الطريقة في كيفية إضافة أيقونات السوشيال ميديا الاحترافية إلى بلوجر أنها لا تحتاج إلى تعديل معقد داخل القالب، بل يمكنك إضافتها بسهولة عبر أداة HTML/JavaScript فقط. كما يمكنك التحكم الكامل في شكل الأيقونات، حجمها، ألوانها، وتأثيرات الحركة الخاصة بها.
إذا كنت تريد جعل التصميم أكثر احترافية، يمكنك أيضاً إضافة خلفيات متدرجة للأيقونات أو استخدام تأثيرات Glassmorphism الحديثة المنتشرة حالياً في تصميم المواقع. ويمكنك كذلك جعل الأيقونات تظهر بشكل دائري أو مربع حسب أسلوب تصميم مدونتك.
ولا تنسَ أن سرعة الموقع مهمة جداً، لذلك يُفضّل عدم المبالغة في استخدام المؤثرات أو الأكواد الثقيلة حتى تحافظ على تجربة استخدام جيدة للزوار وتحسين نتائج السيو في محركات البحث.
بهذه الطريقة أصبحت لديك أيقونات تواصل اجتماعي عصرية داخل مدونة بلوجر الخاصة بك بشكل احترافي ومتجاوب مع جميع الأجهزة. يمكنك الآن تخصيص الأكواد بالطريقة التي تناسب هوية موقعك وإضافة أي منصة تريدها بسهولة.
إذا واجهت أي مشكلة أثناء التركيب أو التعديل، يمكنك ترك تعليق وسأحاول مساعدتك في حلها بأسرع وقت ممكن.