إضافة أداة مواقع التواصل الاجتماعى بشكل مميزة

 بســــــــــم الله الرحمن الرحيم 

إضافة اليوم هى من أهم الاضافات لكثر من الموقع ، و لا أتصور أن هنا موقع ناجح أو مودونة ناجح من غير أن يكون لها صفحات على مواقع التواصل الاجتماعى - اليوتيوب ،فيسبوك ،تويتر...إلخ- لذلك يحتاجها الكثيرون ، أضافة اليوم تحتوى أيضا على عداد المُعجابيين على صفحاتك ، وبالطبع يوجد العديد من الاشكال الجميلة لهذه الاضافة لكن هذه أجملهم

والاضافة التى معا اليوم تحتوى العديد من المواقع مثل يوتيوب و فيسبوك وتويتر و الـRss و جوجل بلس وانستجرام و العديد والعديد ، لن أُطيل عليكم و سأبدأ وسأدخل فى صميم الموضوع .

اضافة اليوم تحتوى أكواد CSS سوف تقوم بوضعها فى اداة  HTML/JS فى التخطيط وهذا هو الكود 

 <div class="widget-content">
<style>
li.social_item-wrapper {
float: right;
width: 48%;
text-align: center;
margin-left: 4% !important;
margin-bottom: 10px !important;
color: #fff;
}
#sidebar .widget {
margin-bottom: 35px;
}
a.social_item {
position: relative;
display: block;
height: 60px;
line-height: 60px;
overflow: hidden;
}
.social_item-wrapper:nth-child(2n+2) {
margin-left: 0 !important;
}
.social_icon {
float: right;
line-height: 60px;
width: 41px;
font-size: 1.3rem;
}
a.social_item.social_facebook {
background: #3F5B9B;
}
.fa-facebook.social_icon {
background: #2E4372;
}
li.social_item-wrapper:hover .fa-facebook.social_icon {
background: #3F5B9B;
}
li.social_item-wrapper:hover .social_facebook {
background: #2E4372;
}
a.social_item.social_twitter {
background: #1C97DE;
}
.fa-twitter.social_icon {
background: #1571A5;
}
li.social_item-wrapper:hover .fa-twitter.social_icon {
background: #1C97DE;
}
li.social_item-wrapper:hover .social_twitter {
background: #1571A5;
}
a.social_item.social_youtube {
background: #E22020;
}
.fa-youtube.social_icon {
background: #B31919;
}
li.social_item-wrapper:hover .fa-youtube.social_icon {
background: #E22020;
}
li.social_item-wrapper:hover .social_youtube {
background: #B31919;
}
a.social_item.social_dribbble {
background: #E82159;
}
.fa-dribbble.social_icon {
background: #B51A45;
}
li.social_item-wrapper:hover .fa-dribbble.social_icon {
background: #E82159;
}
li.social_item-wrapper:hover .social_dribbble {
background: #B51A45;
}
a.social_item.social_rss {
background: #E86321;
}
.fa-rss.social_icon {
background: #C2521B;
}
li.social_item-wrapper:hover .fa-rss.social_icon {
background: #E86321;
}
li.social_item-wrapper:hover .social_rss {
background: #C2521B;
}
a.social_item.social_google-plus {
background: #E82C2C;
}
.fa-google-plus.social_icon {
background: #BF2424;
}
li.social_item-wrapper:hover .fa-google-plus.social_icon {
background: #E82C2C;
}
li.social_item-wrapper:hover .social_google-plus {
background: #BF2424;
}
a.social_item.social_linkedin {
background: #0275B6;
}
.fa-linkedin.social_icon {
background: #02669E;
}
li.social_item-wrapper:hover .fa-linkedin.social_icon {
background: #0275B6;
}
li.social_item-wrapper:hover .social_linkedin {
background: #02669E;
}
a.social_item.social_instagram {
background: #8E714D;
}
.fa-instagram.social_icon {
background: #6F583C;
}
li.social_item-wrapper:hover .fa-instagram.social_icon {
background: #8E714D;
}
li.social_item-wrapper:hover .social_instagram {
background: #6F583C;
}
a.social_item.social_pinterest {
background: #CA2027;
}
.fa-pinterest.social_icon {
background: #AB1B21;
}
li.social_item-wrapper:hover .fa-pinterest.social_icon {
background: #CA2027;
}
li.social_item-wrapper:hover social_pinterest {
background: #AB1B21;
}
ul.social-counter a {
color: #fff;
}
</style>

<div class="socialcounter">
<ul class="social-counter">
<li class="social_item-wrapper"><a href="#" class="social_item social_facebook"><i class="fa fa-facebook social_icon"></i>
<span class="social_num">230,000</span></a></li>
<li class="social_item-wrapper"><a href="#" class="social_item social_twitter"><i class="fa fa-twitter social_icon"></i>
<span class="social_num">230,000</span></a></li>
<li class="social_item-wrapper"><a href="#" class="social_item social_youtube"><i class="fa fa-youtube social_icon"></i>
<span class="social_num">230,000</span></a></li>
<li class="social_item-wrapper"><a href="#" class="social_item social_dribbble"><i class="fa fa-dribbble social_icon"></i>
<span class="social_num">230,000</span></a></li>
<li class="social_item-wrapper"><a href="#" class="social_item social_rss"><i class="fa fa-rss social_icon"></i>
<span class="social_num">230,000</span></a></li>
<li class="social_item-wrapper"><a href="#" class="social_item social_google-plus"><i class="fa fa-google-plus social_icon"></i>
<span class="social_num">230,000</span></a></li>
<li class="social_item-wrapper"><a href="#" class="social_item social_linkedin"><i class="fa fa-linkedin social_icon"></i>
<span class="social_num">230,000</span></a></li>
<li class="social_item-wrapper"><a href="#" class="social_item social_instagram"><i class="fa fa-instagram social_icon"></i>
<span class="social_num">230,000</span></a></li>
</ul>
</div>
</div>

بعد ان قمُت بأخذ بنسخ الكود وألصقته بالاداة يأتى دورك فى التعديل على بعض النقاط المهمة بالكود وهى :

الارقام التى بالون البنبى قم بتغيرها الى عدد متابعينك على مواقع التواصل الاجتماعى 

رمز الشباك (#) الملون بالون الاحمر قم بإزالته وضع روابط صفحاتك على مواقع التواصل الاجتماعى 

وهكذا ينتهى درسا اليوم......