ازرار وسائل التواصل الاجتماعية

شرح الكود وأهميته في المدونة

وصف الكود:

الكود الذي قدمته هو مجموعة من الأيقونات الاجتماعية (Social Icons) التي تُستخدم عادةً في المدونات أو المواقع الإلكترونية للربط بحسابات التواصل الاجتماعي الخاصة بالمدونة أو الموقع. كل أيقونة تمثل منصة تواصل اجتماعي معينة، مثل GitHub، YouTube، Twitter، Facebook، وغيرها.

HTML:

• الأيقونات: يتم تمثيل كل أيقونة باستخدام <div> مع كلاس محدد مثل social github، social youtube، إلخ.
• الروابط: كل أيقونة تحتوي على رابط (<a>) يشير إلى الحساب الخاص بالمنصة الاجتماعية. الرابط حاليًا مؤقت (#) ويمكن استبداله بروابط حقيقية.
• الأيقونات Font Awesome: يتم استخدام مكتبة Font Awesome لعرض الأيقونات. على سبيل المثال:
  • <i class="fa fa-github fa-2x"></i>: أيقونة GitHub بحجم 2x (ضعف الحجم الطبيعي).
  • <i class="fa fa-youtube fa-2x"></i>: أيقونة YouTube بحجم 2x.

CSS:

• تنسيق الأيقونات:
  • width: 30px; height: 30px;: تحديد حجم الأيقونات.
  • background: #fff;: لون خلفية الأيقونات (أبيض).
  • border: 1px solid #ccc;: إطار حول الأيقونات.
  • box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);: إضافة ظل خارجي وداخلي للأيقونات.
  • border-radius: 50px;: جعل الأيقونات دائرية.
  • margin: 0 10px 10px 0;: تحديد المسافات بين الأيقونات.
  • padding: 10px;: إضافة مساحة داخلية حول الأيقونات.
  • color: #000;: لون الأيقونات (أسود).
• تغيير الألوان عند التمرير (Hover):
  • عند تمرير الماوس فوق الأيقونة، يتغير لون الخلفية واللون الداخلي للأيقونة ليمثل لون المنصة الاجتماعية. على سبيل المثال:
    • .github a:hover {background: #191919; color: #fff;}: أيقونة GitHub تصبح سوداء مع نص أبيض عند التمرير.
    • .youtube a:hover {background: #c4302b; color: #fff;}: أيقونة YouTube تصبح حمراء مع نص أبيض عند التمرير.

أهمية الكود في المدونة:

تحسين تجربة المستخدم:

• سهولة الوصول إلى الحسابات الاجتماعية: تتيح الأيقونات الاجتماعية للمستخدمين الوصول بسهولة إلى حسابات المدونة على منصات التواصل الاجتماعي.
• تصميم جذاب: الأيقونات الدائرية مع تأثيرات التمرير (Hover) تجعل المدونة أكثر جاذبية واحترافية.

زيادة التفاعل والمتابعة:

• تشجيع المتابعة: تسمح الأيقونات الاجتماعية للزوار بمتابعة المدونة على منصات التواصل الاجتماعي بضغطة زر واحدة.
• زيادة التفاعل: يمكن للزوار مشاركة المحتوى بسهولة على منصات التواصل الاجتماعي، مما يزيد من تفاعل الجمهور.

تحسين SEO:

• زيادة حركة المرور: الروابط إلى الحسابات الاجتماعية يمكن أن تساعد في جذب المزيد من الزوار إلى المدونة.
• تحسين تصنيفات SEO: الروابط الاجتماعية تعتبر إشارة إيجابية لمحركات البحث، مما قد يساعد في تحسين تصنيفات المدونة.

كيفية استخدام الكود في المدونة:

إضافة الروابط الحقيقية:

استبدل الرابط المؤقت (#) في كل أيقونة بروابط الحسابات الاجتماعية الفعلية. على سبيل المثال:

<div class="social github">
    <a href="https://github.com/username" target="_blank"><i class="fa fa-github fa-2x"></i></a>
</div>
<div class="social youtube">
    <a href="https://youtube.com/username" target="_blank"><i class="fa fa-youtube fa-2x"></i></a>
</div>

تعديل التصميم:

يمكنك تعديل ألوان الخلفية، الأحجام، أو تأثيرات التمرير لتتناسب مع تصميم مدونتك.

إضافة الأيقونات إلى المدونة:

قم بنسخ الكود ولصقه في المكان المناسب في قالب المدونة، مثل التذييل (Footer) أو الشريط الجانبي (Sidebar).

مثال عملي:

<div class="social github">
    <a href="https://github.com/username" target="_blank"><i class="fa fa-github fa-2x"></i></a>
</div>
<div class="social youtube">
    <a href="https://youtube.com/username" target="_blank"><i class="fa fa-youtube fa-2x"></i></a>
</div>
<div class="social twitter">
    <a href="https://twitter.com/username" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
</div>
<div class="social instagram">
    <a href="https://instagram.com/username" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
</div>
<div class="social facebook">
    <a href="https://facebook.com/username" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>    
</div>

ازرار وسائل التواصل الاجتماعية

1. Html

   
   <div class="social github">
       <a href="#" target="_blank"><i class="fa fa-github fa-2x"></i></a>
   </div>
   <div class="social youtube">
       <a href="#" target="_blank"><i class="fa fa-youtube fa-2x"></i></a>
   </div>
   <div class="social google-pluse">
       <a href="#" target="_blank"><i class="fa fa-google-plus fa-2x"></i></a>
   </div>
   <div class="social twitter">
       <a href="#" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
   </div>
   <div class="social instagram">
       <a href="#" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
   </div>
   <div class="social facebook">
       <a href="#" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>    
   </div>
   <div class="social skype">
       <a href="#" target="_blank"><i class="fa fa-skype fa-2x"></i></a>
   </div>
   <div class="social vk">
       <a href="#" target="_blank"><i class="fa fa-vk fa-2x"></i></a>    
   </div>
   <div class="social odnoklassniki">
       <a href="#" target="_blank"><i class="fa fa-odnoklassniki fa-2x"></i></a>   
   </div>
   <div class="social pinterest">
       <a href="#" target="_blank"><i class="fa fa-pinterest fa-2x"></i></a>
   </div> 
   <div class="social linkedin">
       <a href="#" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
   </div>
   <div class="social telegram">
       <a href="#" target="_blank"><i class="fa fa-paper-plane fa-2x"></i></a>
   </div>
   <div class="social tumblr">
       <a href="#" target="_blank"><i class="fa fa-tumblr fa-2x"></i></a>
   </div>
   <div class="social windows">
       <a href="#" target="_blank"><i class="fa fa-windows fa-2x"></i></a>
   </div>
   <div class="social whatsapp">
       <a href="#" target="_blank"><i class="fa fa-whatsapp fa-2x"></i></a>
   </div>
   <div class="social weibo">
       <a href="#" target="_blank"><i class="fa fa-weibo fa-2x"></i></a>
   </div>
   <div class="social dropbox">
       <a href="#" target="_blank"><i class="fa fa-dropbox fa-2x"></i></a>
   </div>
       

2. Css

   
   @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
   .social a {
       text-align: center;
       width: 48px;
       height: 48px;
       float: left;
       background: #fff;
       border: 1px solid #ccc;
       box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
       border-radius: 24px;
       margin: 0 10px 10px 0;
       padding: 6px;
       color: #000;
   }
   .github a:hover {background: #191919; color: #fff;}
   .youtube a:hover {background: #c4302b; color: #fff;}
   .google-pluse a:hover {background: #DD4B39; color: #fff;}
   .twitter a:hover {background: #00acee; color: #fff;}
   .instagram a:hover {background: #3f729b; color: #fff;}
   .facebook a:hover {background: #3b5998; color: #fff;}
   .skype a:hover {background: #00aff0; color: #fff;}
   .vk a:hover {background: #5d84ae; color: #fff;}
   .odnoklassniki a:hover {background: #f93; color: #fff;}
   .pinterest a:hover {background: #c8232c; color: #fff;}
   .linkedin a:hover {background: #0e76a8; color: #fff;}
   .telegram a:hover {background: #249bd7; color: #fff;}
   .tumblr a:hover {background: #34526f; color: #fff;}
   .windows a:hover {background: #125acd; color: #fff;}
   .whatsapp a:hover {background: #50b154; color: #fff;}
   .weibo a:hover {background: #d52b2b; color: #fff;}
   .dropbox a:hover {background: #1087dd; color: #fff;}
       

معـايـنة

ازرار وسائل التواصل الاجتماعية مربعة

أيضًا، إذا كنت لا تحب الأزرار الدائرية، فسأقترح مجموعة متنوعة من الأزرار المربعة:
لاستخدام الأزرار المربعة، تحتاج إلى استبدل القيمة في css وبدلاً من:

border-radius: 24px;

تغيير إلى:

border-radius: 10px;

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

الخلاصة:

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