آداة أزرار المتابعة الإجتماعية عائمة

أحد أهم وسائل الترويج للمدونة هي أزرار المتابعة الإجتماعية , وكلما كانت ظاهرة كلما كان أسهل على الزوار رؤيتها والإشتراك بها

الازرار العائمة تعتبر وسيلة جذب جيدة للنظر مشكلتها ان احيانا يتم استخدام اكواد ثقيلة لعمل هذا الإنزلاق , أو تكون بها أكواد متابعة كبيرة أصلاً , لذلك قمت بعمل تلك الآداة التي هي فقط HTML / CSS لا يوجد بها أى أكواد ثقيلة كلها تعتمد على موارد مدونتك فهي خفيفة جداً

آداة أزرار المتابعة الإجتماعية عائمة

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

يضاف الكود في آداة HTML/JavaScript

ويمكنك معاينة ورؤية الآداة على يمين الصفحة 

الآداة تجاه اليمين

<style>

#SocialPop{position:fixed;top:15%;right:-200px;transition:all .4s ease;z-index:3;}

#InPop{width:200px;padding:10px;box-sizing:border-box;border:2px solid #111;border-radius:0 0 0 5px;background-color:#f8f8f8;}

.Showhi{background-color:#111;width:40px;height:40px;text-align:center;line-height:40px;font-size:24px;position:absolute;left:-40px;cursor:pointer;top:0;color:#fff;border-radius:5px 0 0 5px;}

#SocialPop:hover{right:0;}

#InPop strong{display:block;height:36px;line-height:32px;box-sizing:border-box;text-align:center;color:#fff;margin:0 2px 5px;border:2px solid #fff;box-shadow:0 0  0 2px #000;}

#InPop ul{list-style:none;margin:0;padding:0;}

#InPop li{list-style:none;display:block;clear:both;line-height:30px;color:#fff;overflow:hidden;margin:0 0 5px;height:38px;box-sizing:border-box;}

#InPop li:last-child{margin:0;}

#InPop li a{margin:0!important;padding:4px 8px!important;text-decoration:none;display:block;overflow:hidden;transition:all .4s ease;color:inherit;}

#InPop li a:hover{background-color:rgba(0,0,0,.3);}

#InPop li span{float:right;margin:0 8px;}

#InPop li i{float:right;width:24px;background-color:rgba(255,255,255,.2);height:24px;text-align:center;margin:3px 0;line-height:24px;border-radius:2px;}

#InPop li b{background-color:rgba(0,0,0,.3);height:20px;line-height:20px;float:left;margin:6px 0 0;font-size:12px;width:40px;border-radius:2px;text-align:center;overflow:hidden;}

#InPop strong{background-color:#446FAA;}

#SocialPop:hover .Showhi{background-color:#446FAA;}

#SocialPop:hover #InPop{border-color:#446FAA;}

#InPop li:nth-child(1){background-color:#395693;}

#InPop li:nth-child(2){background-color:#0091E8;}

#InPop li:nth-child(3){background-color:#CD0F1C;}

#InPop li:nth-child(4){background-color:#8B47BA;}

</style>

<div id="SocialPop">

<i class="Showhi fa fa-heart"></i>

<div  id="InPop">

<strong>انضم الى متابعينا</strong>

<ul>

    <li>

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

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

        <span>فيس بوك</span>

        <b>10.2k</b>

        </a>

    </li>

    <li>

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

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

        <span>تويتر</span>

        <b>2k</b>

        </a>

    </li>

    <li>

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

        <i class="fa fa-youtube-play"></i>

        <span>يوتيوب</span>

        <b>700k</b>

        </a>

    </li>

    <li>

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

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

        <span>انستجرام</span>

        <b>1.5k</b>

        </a>

    </li>

</ul>

</div>

</div>


اللون البرتقالب هو لون الزر

اللون المعلم بالأحمر هو لون الآدة عدله بما تريد

السطر الأزرق هو لون أول أيقونة وستجد فيه رقم 1 , ستجده مكرر بعدها ثلاث مرات حتى الرقم 4

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

حددت باللون الأخضر لون أيقونة الفيس بوك حتى نشرح كيف تعدلها وتطبق الأمر على البقية

هذا هو الكود بمفرده لكي نشرحه

 <li>

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

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

        <span>فيس بوك</span>

        <b>10.2k</b>

        </a>

    </li>

رمز # نغيره برابط الصفحة التي ستفتح عند الضغط عليها

الجزء المعلم بالأحمر هو الأيقونة ويمكنك طبعا الإختيار بين عدد كبير من الأيقونات من تلك الصفحة 

أيقونات FontAwesome

وعدل الإسم وعدد المتابعين باى شئ تريده

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

آخر شئ

كود الآداة تجاه اليسار

<style>

#SocialPop{position:fixed;top:15%;left:-200px;transition:all .4s ease;z-index:3;}

#InPop{width:200px;padding:10px;box-sizing:border-box;border:2px solid #111;border-radius:0 0 5px 0;background-color:#f8f8f8;}

.Showhi{background-color:#111;width:40px;height:40px;text-align:center;line-height:40px;font-size:24px;position:absolute;right:-40px;cursor:pointer;top:0;color:#fff;border-radius:0 5px 5px 0 ;}

#SocialPop:hover{left:0;}

#InPop strong{display:block;height:36px;line-height:32px;box-sizing:border-box;text-align:center;color:#fff;margin:0 2px 5px;border:2px solid #fff;box-shadow:0 0  0 2px #000;}

#InPop ul{list-style:none;margin:0;padding:0;}

#InPop li{list-style:none;display:block;clear:both;line-height:30px;color:#fff;overflow:hidden;margin:0 0 5px;height:38px;box-sizing:border-box;}

#InPop li:last-child{margin:0;}

#InPop li a{margin:0!important;padding:4px 8px!important;text-decoration:none;display:block;overflow:hidden;transition:all .4s ease;color:inherit;}

#InPop li a:hover{background-color:rgba(0,0,0,.3);}

#InPop li span{float:left;margin:0 8px;}

#InPop li i{float:left;width:24px;background-color:rgba(255,255,255,.2);height:24px;text-align:center;margin:3px 0;line-height:24px;border-radius:2px;}

#InPop li b{background-color:rgba(0,0,0,.3);height:20px;line-height:20px;float:right;margin:6px 0 0;font-size:12px;width:40px;border-radius:2px;text-align:center;overflow:hidden;}

#InPop strong{background-color:#446FAA;}

#SocialPop:hover .Showhi{background-color:#446FAA;}

#SocialPop:hover #InPop{border-color:#446FAA;}

#InPop li:nth-child(1){background-color:#395693;}

#InPop li:nth-child(2){background-color:#0091E8;}

#InPop li:nth-child(3){background-color:#CD0F1C;}

#InPop li:nth-child(4){background-color:#8B47BA;}

</style>

<div id="SocialPop">

<i class="Showhi fa fa-heart"></i>

<div  id="InPop">

<strong>انضم الى متابعينا</strong>

<ul>

    <li>

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

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

        <span>فيس بوك</span>

        <b>10.2k</b>

        </a>

    </li>

    <li>

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

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

        <span>تويتر</span>

        <b>2k</b>

        </a>

    </li>

    <li>

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

        <i class="fa fa-youtube-play"></i>

        <span>يوتيوب</span>

        <b>700k</b>

        </a>

    </li>

    <li>

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

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

        <span>انستجرام</span>

        <b>1.5k</b>

        </a>

    </li>

</ul>

</div>

</div>

15تعليقات

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

  1. دائما وكعادتك مبدع وراقي فاستمر يا جميل الروح ♥
    شكرا استاذ

    ردحذف
  2. رابط تليغرام لا يوجد استاذ
    لا يظهر بعد التعديلات

    ردحذف
    الردود
    1. شكرا يااستاذنا مبدع كالعادة

      حذف
    2. أحمد باشا تسلم يا غالي , نورت المقال بزيارتك

      حذف
  3. كذلك رابط pinterest لا يعمل استاذي الغالي

    ردحذف
    الردود
    1. حبيبي حياك الله
      بالنسبة لرابط تليجرام او بينتريست
      هذا مثال على التليجرام
      <li>

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

      <i class="fa fa-paper-plane"></i>

      <span>تليجرام</span>

      <b>10.2k</b>

      </a>

      </li>

      وطبعا تغير لونه في الـ css كما هو موضح هل انت لديك اصدار fontawoesome في قالبك لأنه الذي تظهر الأيقونات طبقاً له

      حذف
  4. الله يحفظك ويبارك فيك ويطول في عمرك يارب

    ردحذف
  5. التطبيق لا يظهر بالشكل الجيد على المدونة https://mounir48.blogspot.com يظهر وكأنه شفاف

    ردحذف
    الردود
    1. نعم أخي لأنك لم تحدد للزر لون خلفية
      لاحظ انا ذكرت هذا في الشرح في النقطة
      #InPop li:nth-child(1){background-color:#395693;}
      المفترض الآن أنك زدت الخانات خانة اضافية فيجب ان تزيد الألوان لون اضافي وتعطيها رقم 5 لانه اصبح لديك 5 خانات
      فأضف الكود التالي ضمن استايل الكود ستجده لم يعد شفافاً ان شاء الله
      #InPop li:nth-child(5){background-color:#25a2e0;}
      لاحظ انا اعطته رقم 5 لأن هذا هو الموقع الخامس وهكذا كلما زدت عليك الزيادة في الستايل أيضاً

      حذف
  6. نعم لقد صححت ذلك وكم أنت رائع والله
    شكرا لك من القلب وبارك الله فيك ورزقك من حيث لا تحتسب

    ردحذف
    الردود
    1. تسلم يا غالي واللهم آمين واياكم أخي الحبيب
      دمت بكل ود

      حذف
  7. الاضافة تعمل بشكل ممتاز ،شكرا جدا

    ردحذف
    الردود
    1. يسرني انها اعجبتك وتعمل معك , بالتوفيق وشاكر على المرور

      حذف