إضافة ازرار التواصل الإجتماعي بتأثيرات Css3 و jQuery

عدد مشاهدات الموضوع:

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

شرح تثبيت الأداة من الألف الى الياء



كيف تستخدم الأضافة

لتستطيع اضافة هذة الاضافة الجديدة عليك اضافة اداة HTML/Javascript داخل التخطيط Layout لمدونتك, ومن ثم تبدأ في أضافة الأكواد الخاصة بالأضافة وكما ذكرت فأن الأضافة تعمل بلغتي Css3 و jQuery لذا فالكود سيقسم إلي ثلاثة اقسام وهي HTML - CSS - Javascript كما موضع برابط الإضافة الرسمى على موقع codepen

لنبدأ في تقسيم الكود

سنقوم بتقسيم الكود بهذا الشكل (وسنقوم بتسميته بناء الكود الأساسى)

<div id='social'>
</div>
<style>
</style>
<script>
</script>



الأن سنقوم بأضافة الكود الخاصة بلغة css بين <style> و </style> بالكود الأساسي

/* SocialHover buttons by Mohamed Abo El-Ghranek */
/* font awesome icons */
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
/* open sans font */
@import url("//fonts.googleapis.com/css?family=Open+Sans");
* {
  margin:0;
  padding:0;
  outline:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#social {
  text-align: center;
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  color: #FFF;
  font-size: 14px;
  line-height: 20px;
  letter-space: .05px;
}
#social a {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    display: inline-block;
    position: relative;
    border-radius: 5px;
    background-color: #555;
}
#social a .fa {
    color: #FFF;
}
#social a:hover {
  -webkit-transform:scale(1.2);
  -moz-transform:scale(1.2);
  -o-transform:scale(1.2);
  transition:all .2s ease;
  -webkit-transition:all .2s ease;
  -moz-transition:all .2s ease;
  -o-transition:all .2s ease;
  z-index: 5;
}
#social a span {
  position: absolute;
  left: 50%;
  color: #FFF;
  display: none;
  border-bottom: 2px solid #38c;
  padding-bottom: 8px;
  background-color: #555;
  top: -30px;
  height: 20px;
  line-height: 20px;
  border-radius: 5px;
  font-size: 80%;
  white-space: nowrap;
}
#social .facebook:hover {
    background-color: #3b5998;
}
#social .twitter:hover {
    background-color: #55acee;
}
#social .gplus:hover {
    background-color: #dd4b39;
}
#social .skype:hover {
    background-color: #00aff0;
}
#social .github:hover {
    background-color: #666;
}

الان سنقوم بأضافة كود Jquery بين <script> و </script> بالكود الأساسي

/* SocialHover buttons by Mohamed Abo El-Ghranek */
$(document).ready(function() {
  $( "#social a" ).each(function() {
    var tipt = $(this).attr('title');
    $(this).attr('title','');
    $(this).append('<span>');
    $(this).children('span').text(tipt);
    var spanWidth = $(this).children('span').width() + 20;
    var spanMarg = 0 - spanWidth/2;
    $(this).children('span').css('width',spanWidth);
    $(this).children('span').css('margin-left',spanMarg);
    $(this).hover (
      function() {
        $(this).children('span').fadeIn();
        $('#social a').css('opacity','.1');
        $(this).css('opacity','1');
      }, function() {
        $(this).children('span').fadeOut();
        $('#social a').css('opacity','1');
      }
    );
  });                  
});

ملحوظة مهم يجب عليك التأكد اولا ان قالبك به مكتبة ال jquery أذا لم تجده في قالبك قم بأضافة الكود التالي أسفل <head> مباشرة

<script src='//code.jquery.com/jquery.min.js' type='text/javascript'></script>

الأن الكود جاهز لأضافة الأيقونات بلغة HTML، فأسفل  <div id='social'> مباشرة قم بأضافة الاكواد الخاصة بالأيقونات بالكود الأساسي
<a class='facebook' title='facebook' href='#'>
    <i class="fa fa-facebook"></i>
  </a>
  <a class='twitter' title='twitter' href='#'>
    <i class="fa fa-twitter"></i>
  </a>
  <a class='gplus' title='Google plus' href='#'>
    <i class="fa fa-google-plus"></i>
  </a>
  <a class='skype' title='skype' href='#'>
    <i class="fa fa-skype"></i>
  </a>

في هذة الأيقونات ستجد أربعة أيقونات هي الأكثر شيوعا للأستخدام في جميع المواقع العربية فهي جاهزة الأن للأستخدام فقط أستبدل # داخل href بالرابط الخاص بك وقم بحفظ الاادة. الأن لست بحاجة لمزيد من الأكواد.

ماذا لو أردت أضافة أيقونات أخري غير هذه الأيقونات التى قمنا باضافتها فى أخر خطوة؟

لو أردات إضافة المزيد من الأيقونات عليك فهم بنية الكود أولاً, فكود الأيقونة داخل div المسمي social هو عبارة عن تاج a الخاص بالروابط وهو يكون علي الشكل التالي

  <a class='facebook' title='facebook' href='#'>
    <i class="fa fa-facebook"></i>
  </a>

داخل تاج a يوجد ثلاثة مدخلات attr يمكنك تعديلهم وهم class و title و href وكل منهم له وظيفة

الأول هو class وتعطيه الأسم الذي تريده وتقوم باستخدام نفس الاسم في أكواد css لتعطي الأيقونة اللون الذي تريده عند الوقوف عليها ويكون الكود الخاص ب css لأظهار اللون بالشكل التالي

#social .facebook:hover {
    background-color: #3b5998;
}

كما تلاحظ استخدام اسم class بأسم facebook ويستخدم الكود الخاص باللون 3b5998، وللحصول علي ألوان جميع الأيقونات الخاصة بال brand العالمية من خلال هذا الموقع brandcolors.net

الثاني هو title وهو الخاص باظهار عنوان للأيقونة عند مرور الماوس عليها، والثالث هو href وهو الخاص بالرابط كما ذكرنا من قبل الذى يمكننا التوجيه له عند الضغط على الأيقونة.

الأن كيف تغير الأيقونة نفسها؟ كما تري انني بعد تاج a وقبل نهايته وضعنا الكود التالي

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

 هذا الكود خاص بالأيقونة ويمكنك الحصول علي أكواد الأيقونات الأخري من خلال هذا الرابط Font Awesome Brand. فقط أضغط علي الأيقونة واحصل علي الكود المشابه لهذا الكود وضعه بنفس الشكل كما هو موجود في المثال.

الكود النهائي

<div id='social'>
  <a class='facebook' title='facebook' href='#'>
    <i class="fa fa-facebook"></i>
  </a>
  <a class='twitter' title='twitter' href='#'>
    <i class="fa fa-twitter"></i>
  </a>
  <a class='gplus' title='Google plus' href='#'>
    <i class="fa fa-google-plus"></i>
  </a>
  <a class='skype' title='skype' href='#'>
    <i class="fa fa-skype"></i>
  </a>
</div>
<style>
/* SocialHover buttons by Mohamed Abo El-Ghranek */
/* font awesome icons */
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
/* open sans font */
@import url("//fonts.googleapis.com/css?family=Open+Sans");
* {
  margin:0;
  padding:0;
  outline:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#social {
  text-align: center;
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  color: #FFF;
  font-size: 14px;
  line-height: 20px;
  letter-space: .05px;
}
#social a {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    display: inline-block;
    position: relative;
    border-radius: 5px;
    background-color: #555;
}
#social a .fa {
    color: #FFF;
}
#social a:hover {
  -webkit-transform:scale(1.2);
  -moz-transform:scale(1.2);
  -o-transform:scale(1.2);
  transition:all .2s ease;
  -webkit-transition:all .2s ease;
  -moz-transition:all .2s ease;
  -o-transition:all .2s ease;
  z-index: 5;
}
#social a span {
  position: absolute;
  left: 50%;
  color: #FFF;
  display: none;
  border-bottom: 2px solid #38c;
  padding-bottom: 8px;
  background-color: #555;
  top: -30px;
  height: 20px;
  line-height: 20px;
  border-radius: 5px;
  font-size: 80%;
  white-space: nowrap;
}
#social .facebook:hover {
    background-color: #3b5998;
}
#social .twitter:hover {
    background-color: #55acee;
}
#social .gplus:hover {
    background-color: #dd4b39;
}
#social .skype:hover {
    background-color: #00aff0;
}
#social .github:hover {
    background-color: #666;
}
</style>
<script>
/* SocialHover buttons by Mohamed Abo El-Ghranek */
$(document).ready(function() {
  $( "#social a" ).each(function() {
    var tipt = $(this).attr('title');
    $(this).attr('title','');
    $(this).append('<span>');
    $(this).children('span').text(tipt);
    var spanWidth = $(this).children('span').width() + 20;
    var spanMarg = 0 - spanWidth/2;
    $(this).children('span').css('width',spanWidth);
    $(this).children('span').css('margin-left',spanMarg);
    $(this).hover (
      function() {
        $(this).children('span').fadeIn();
        $('#social a').css('opacity','.1');
        $(this).css('opacity','1');
      }, function() {
        $(this).children('span').fadeOut();
        $('#social a').css('opacity','1');
      }
    );
  });                  
});
</script> 

لا تنسي مشاركة الموضوع مع أصدقائك :)

هناك 6 تعليقات:

  1. شكراً على الاضافة الرائعة ^_^
    وشكراً على هذا الفيديو + الشرح الاكثر من رائع احبك فى الله ^_^

    ردحذف
  2. السلام عليكم و رحمة الله و بركاته
    الدرس رائع و بسيط (مفهوم)
    شكراً جزيلاً لكم
    عندي ملاحظة: هل هناك إمكانية بأن يفتح الصفحة في تبويب جديد و ليس في نفس التبويب.
    مثلاً: إذا ضغطتُ على رابط التويتر فستفتح صفحة التويتر في تويب جديد و يبقى تبويب المدونة كما هو.
    بانتظار ردّكم
    و السلام عليكم و رحمة الله و بركاته

    ردحذف
    الردود
    1. استخدم target='_blank" داخل تاج a للايقونة

      حذف
    2. أزال المؤلف هذا التعليق.

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

      حذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية