أحد أهم وسائل الترويج للمدونة هي أزرار المتابعة الإجتماعية , وكلما كانت ظاهرة كلما كان أسهل على الزوار رؤيتها والإشتراك بها
الازرار العائمة تعتبر وسيلة جذب جيدة للنظر مشكلتها ان احيانا يتم استخدام اكواد ثقيلة لعمل هذا الإنزلاق , أو تكون بها أكواد متابعة كبيرة أصلاً , لذلك قمت بعمل تلك الآداة التي هي فقط 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>
رمز # نغيره برابط الصفحة التي ستفتح عند الضغط عليها
الجزء المعلم بالأحمر هو الأيقونة ويمكنك طبعا الإختيار بين عدد كبير من الأيقونات من تلك الصفحة
وعدل الإسم وعدد المتابعين باى شئ تريده
كرر الكود ان اردت الحصول على ايقونة جديدة احذف أحدهم ان أردت عدد أقل
آخر شئ
كود الآداة تجاه اليسار
<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>
دائما وكعادتك مبدع وراقي فاستمر يا جميل الروح ♥
ردحذفشكرا استاذ
رابط تليغرام لا يوجد استاذ
ردحذفلا يظهر بعد التعديلات
شكرا يااستاذنا مبدع كالعادة
حذفأحمد باشا تسلم يا غالي , نورت المقال بزيارتك
حذفكذلك رابط pinterest لا يعمل استاذي الغالي
ردحذفحبيبي حياك الله
حذفبالنسبة لرابط تليجرام او بينتريست
هذا مثال على التليجرام
<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 في قالبك لأنه الذي تظهر الأيقونات طبقاً له
الله يحفظك ويبارك فيك ويطول في عمرك يارب
ردحذفالتطبيق لا يظهر بالشكل الجيد على المدونة https://mounir48.blogspot.com يظهر وكأنه شفاف
ردحذفنعم أخي لأنك لم تحدد للزر لون خلفية
حذفلاحظ انا ذكرت هذا في الشرح في النقطة
#InPop li:nth-child(1){background-color:#395693;}
المفترض الآن أنك زدت الخانات خانة اضافية فيجب ان تزيد الألوان لون اضافي وتعطيها رقم 5 لانه اصبح لديك 5 خانات
فأضف الكود التالي ضمن استايل الكود ستجده لم يعد شفافاً ان شاء الله
#InPop li:nth-child(5){background-color:#25a2e0;}
لاحظ انا اعطته رقم 5 لأن هذا هو الموقع الخامس وهكذا كلما زدت عليك الزيادة في الستايل أيضاً
نعم لقد صححت ذلك وكم أنت رائع والله
ردحذفشكرا لك من القلب وبارك الله فيك ورزقك من حيث لا تحتسب
تسلم يا غالي واللهم آمين واياكم أخي الحبيب
حذفدمت بكل ود
تسلم ايدك
ردحذفالله يعزك أخي أحمد
حذفالاضافة تعمل بشكل ممتاز ،شكرا جدا
ردحذفيسرني انها اعجبتك وتعمل معك , بالتوفيق وشاكر على المرور
حذف