اضافه مواقع التواصل الاجتماعى بطريقة احترافية

عدد مشاهدات الموضوع:
عزيزى القارئ. لقد اتيت لكم اليوم بأضافة احترافية من تصميم وتكويد مدونه العبقرى للمعلوميات الا وهى اضافة مواقع التواصل الاجتماعى بطريقة احترافية دعونا نرى معاينة!
بعدما رأينا المعاينة نذهب الى التركيب:
اذهب الى > التخطيط > اضافة اداة > html > ونضيف هذا الكود
<div id='social_networks'>
<ul><!--Social Icons Started Started-->
<li class='sorting-01 facebook'><a href='#'><i class='fa fa-facebook fa-2x'/><span class='inv'>Facebook</span></a></li>
<!--Replase With Facebook URL-->
<li class='sorting-02 twitter'><a href='#'><i class='fa fa-twitter fa-2x'/><span class='inv'>twitter</span></a></li>
<!--Replase With Twitter URL-->
<li class='sorting-03 googleplus'><a href='#'><i class='fa fa-google-plus fa-2x'/><span class='inv'>googleplus</span></a></li>
<!--Replase With Google Plus URL-->
<li class='sorting-06 linkedin'><a href='#'><i class='fa fa-linkedin fa-2x'/><span class='inv'>linkedin</span></a></li>
<!--Replase With Linked In URL-->
<li class='sorting-04 youtube'><a href='#'><i class='fa fa-youtube fa-2x'/><span class='inv'>youtube</span></a></li>
<!--Replase With Youtube URL-->
</ul><!--Social Icons Started End-->
</div>
<Style>
#social_networks{width:100%;display:block;margin:0 auto;text-align:center;}
#social_networks ul {list-style:none;}
#social_networks{text-align:center;display:block;margin:0 auto;padding-bottom:15px;margin-bottom:15px;}
#social_networks ul {display:block;height:36px;margin:0 auto;list-style:none;color:#fff;transition:All 0.2s ease;}
#social_networks li{text-align:center;display:inline-block;margin:0 auto;margin-right:2px;margin-left:2px;width:48px;height:48px;opacity:0.9;transition:All 0.2s ease;}
#social_networks li:hover{opacity:0.9;}
#social_networks li a{display:inline-block;width:48px;height:48px;line-height:48px;padding-top:5px;padding-bottom:5px;color:#fff;}
#social_networks li a:hover{background:transparent;color:#f35d5c;box-shadow:none;}
#social_networks li a span{display:none;visibility:hidden;}
#social_networks li.facebook,#social_networks li.twitter,#social_networks li.youtube,#social_networks li.googleplus,#social_networks li.linkedin{text-align:center;background:#f35d5c;color:#fff;}
#social_networks li.facebook:hover,#social_networks li.twitter:hover,#social_networks li.youtube:hover,#social_networks li.googleplus:hover,#social_networks li.linkedin:hover{background:#4b3f57;color:#fff;}
#social_networks li.facebook .fa.fa-facebook,#social_networks li.twitter .fa.fa-twitter,#social_networks li.youtube .fa.fa-youtube,#social_networks li.googleplus .fa.fa-google-plus,#social_networks li.linkedin .fa.fa-linkedin{color:#fff;}
</Style>

  1.  نقوم باستبدال رمز # برابط مواقعك الاجتماعية.
  2. نقوم باستبدال هذا الكود بأى لون تريد #f35d5c (كود اللون الاحمر).
  3. نقوم باستبدال هذا الكود بأى لون تريد #4b3f57 (كود اللون الاسود).
هذه التدوينة برعاية: مدونة ابو اياد و مدونة الربح من الانترنت

هناك 21 تعليقًا:

  1. مدونة تهتم بكل ما هو جديد في عالم الحماية وبلوجر
    http://nj--rat.blogspot.com/

    ردحذف
  2. أشكرك جدا يا ادمن على الموضوع واتشرف بزيارتك لمدونتي

    مدونة كنوز

    ردحذف
    الردود
    1. العفو واذا كان لديك اى استفسار ارجو ان تطرحه

      حذف
  3. http://m-misr.blogspot.com/
    شكرا علي القالب

    ردحذف
    الردود
    1. العفو وشكراً على مرورك العطر

      حذف
  4. شكرا على الاضافة

    عرب تك شو

    ردحذف
  5. اخي اسلام هل من وسيلة لتغيير ازرار بلوجر الرسمية بأزرار اريدها انا بارك الله فيك
    بحت في نتائج البحت كلها تقريبا ولم اجد احد تطرق الى هدا الموضوع افدنا بارك الله فيك

    ردحذف
    الردود
    1. أى ازرار رسمية ماذا تقصد بالضبط؟ وان شاء الله نفيدك

      حذف
  6. الردود
    1. نحن لم نفهمك ممكن توضح لنا اكثر

      حذف
    2. اقصد ازرار مشاركة الموضوع التي توكن اسفل التدوينة

      حذف
    3. فهمت قصدك وساقوم بالبحث عن طريقة ما.. شكرا لك على سؤالك

      حذف
  7. thank you for share this info ith us

    http://liveromanticlove.blogspot.com/

    ردحذف
  8. اذا سمحت طبقت الطريقة لكن لاتخرج اشكال الازرار

    ردحذف
    الردود
    1. احيانا هناك اضافات لا يقبلها قوالب معينة بسبب كثرة اكواد الجافا سكريبت وكثرة الاضافات والاكواد المستخدمة داخل القالب.

      حذف
  9. شكرا جزيلا على الإضافات

    http://www.blog4softwere.com/

    ردحذف
  10. ماذا لو اردت اضافة هذه الازار في النافبر في اعلى المدونة وبالجهه اليسرى هل من طريقة وشكراً

    ردحذف
  11. طيب مافي انستقرام؟

    ردحذف

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

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