إضافة متابعة وسائل التواصل الى السايد بار

إضافة المواقع الإجتماعية الى السايد بار في بلوجر.

هذه الإضافة تسمح بإضافة ما تريد من أزرار لسايدبار بلوجر وتعتمد على مكتبة أيقونات Fontawesome

فيمكنك أن تعدل ما تريد من الأيقونات ولا يقتصر الامر فقط على وسائل التواصل

 

مكونات الإضافة

يتكون كل زر من

• أيقونة
• عدد المتابعين أو المشتركين 
• معلومة المتابعة على الموقع الإجتماعي

 

<style>
#widesocial{display:flex;flex-direction:column;gap:5px;max-width:300px;}
.item-ws{text-decoration:none;background-color:#0040ff;color:#fff;height:60px;display:grid;grid-template-columns:auto 1fr;direction:rtl;padding:5px;box-sizing:border-box;border-radius:4px;grid-template-rows:repeat(2,20px);align-items:center;gap:5px 10px;transition:background-color .4s;font-family:Cairo;line-height:0;box-shadow:0 -20px 15px rgba(0,0,0,.2) inset;}
.item-ws:nth-child(1){background-color:#395498;}
.item-ws:nth-child(2){background-color:#333333;}
.item-ws:nth-child(3){background-color:#C31F25;}
.item-ws:nth-child(4){background-color:#B600A7;}
.item-ws:hover{background-color:#000;color:#fff;}
.item-ws i{grid-row:1/-1;grid-column:1;width:50px;height:50px;display:flex;align-items:center;justify-content:center;text-align:center;background-color:rgba(255,255,255,.2);border-radius:50%;font-size:24px;margin-top:3px;}
.item-ws b span{order:1;font-weight:normal;}
.item-ws b{display:flex;align-items:center;gap:2px;font-size:12px;}
.item-ws b span{order:1;}
</style>


<div id="widesocial">

<!--بداية زر-->
<a class="item-ws" href="#" target="_blank" rel="nofollow noopener">
<i class="fa-brands fa-facebook-f"></i>
 <span>تابعنا عبر الفيسبوك</span>
<b><span>متابع</span>520</b>
</a>  
<!--نهاية زر-->

<!--بداية زر-->
<a class="item-ws" href="#" target="_blank" rel="nofollow noopener">
<i class="fa-brands fa-x-twitter"></i>
 <span>تابعنا على تويتر</span>
<b><span>متابع</span>360</b>
</a>  
<!--نهاية زر-->

<!--بداية زر-->
<a class="item-ws" href="#" target="_blank" rel="nofollow noopener">
<i class="fa-brands fa-youtube"></i>
 <span>قناتنا على اليوتيوب</span>
<b><span>مشترك</span>200</b>
</a>  
<!--نهاية زر-->

<!--بداية زر-->
<a class="item-ws" href="#" target="_blank" rel="nofollow noopener">
<i class="fa-brands fa-facebook-f"></i>
 <span>تابعنا عبر انستجرام</span>
<b><span>متابع</span>1k</b>
</a>  
<!--نهاية زر-->

</div>

شرح الكود

<!--بداية زر-->
<a class="item-ws" href="#" target="_blank" rel="nofollow noopener">
<i class="fa-brands fa-facebook-f"></i>
 <span>تابعنا عبر الفيسبوك</span>
<b><span>متابع</span>520</b>
</a>  
<!--نهاية زر-->

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

رمز # في أو سطر في الزر هو الرابط الذي سيفتح عند الضغط عليه 

يليه سطر الأيقونة عدله بالأيقونة التي تعجبك

عدل الكلمات بما تريد ورقم المتابعين

 

ملحوظة  تجد أيضاً في الكود هذا الجزء

.item-ws:nth-child(1){background-color:#395498;}
.item-ws:nth-child(2){background-color:#333333;}
.item-ws:nth-child(3){background-color:#C31F25;}
.item-ws:nth-child(4){background-color:#B600A7;}

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

وان زدت أيقونات كرر سطر للون الجديد مع تعديل الرقم واللون فيه