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

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

الازرار العائمة تعتبر وسيلة جذب جيدة للنظر مشكلتها ان احيانا يتم استخدام اكواد ثقيلة لعمل هذا الإنزلاق , أو تكون بها أكواد متابعة كبيرة أصلاً , لذلك قمت بعمل تلك الآداة التي هي فقط 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>