إضافة أداة إتصل بنا عبر مواقع التواصل الإجتماعي بشكل أنيق 2016-2017

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

العديد من مستخدمي بلوجر يبحثون عن أداة التواصل الإجتماعي بشكل أنيق الا انهم يجدون الاداة قديمة وغير انيقة ومستعملة في العديد من المواقع الأخرى + لا تناسب محتوى أو شكل الموقع اليوم أتيت لكم بهذه الأداة سهلة التعامل هي فقط أداة html/javascript

1- يجب تغيير روابطي حساباتي بروابط حساباتك مثل فيسبوك تويتر ألخ " اللون الأزرق "
2- يمكن ضبط طول وعرض الإضافة من خلال كود width ; height
3- لمعاينة الإضافة توجد أسفل الموضوع على اليسار في موقعنا

بالتوفيق.



<div id='socialsidebar'>
<ul>
<li><a href="https://www.facebook.com/soufiane.hajaji.2015"><div class="sidebar-facebook"><p class="animated fadeInDown"><i class="fa fa-facebook"></i><span class="social-num">+12k</span><small class="social-count">اعجاب</small></p></div></a></li>
<li><a href="http://twitter.com/soufiane1472583"><div class="sidebar-twitter"><p class="animated"><i class="fa fa-twitter"></i><span class="social-num">+1.5K</span><small class="social-count">متابع</small></p></div></a></li>
<li><a href="http://instagram.com/#"><div class="sidebar-instagram"><p class="animated"><i class="fa fa-instagram"></i><span class="social-num">+2.3K</span><small class="social-count">متابع</small></p></div></a></li>
<li><a href="https://www.youtube.com/soufianehajaji"><div class="sidebar-youtube"><p class="animated"><i class="fa fa-youtube"></i><span class="social-num">8k</span><small class="social-count">مشترك</small></p></div></a></li>
<li><a href="https://plus.google.com/+soufianehajaji"><div class="sidebar-googleplus"><p class="animated"><i class="fa fa-google-plus"></i><span class="social-num">1.5k</span><small class="social-count">مشترك</small></p></div></a></li>
<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/BKWnoE"><div class="sidebar-rss"><p class="animated"><i class="fa fa-rss-square"></i><span class="social-num">2.4k</span><small class="social-count">مشترك</small></p></div></a></li>
</ul>
<style>
/* SOCIAL COUNTERS*/
#socialsidebar .widget-content ul li {
width: 33.2%;
float: right;
border: 1px solid #2A2E31;
overflow: hidden;
background: #22272A;
}
div#socialsidebar ul li>a {
color: #BEBFC1;
}
 
div#socialsidebar ul li a>div {
padding: 10px;
text-align: center;
text-transform: uppercase;
display: block;
}
div#socialsidebar i {
font-size: 30px;
}
#socialsidebar ul li a div .social-num {
font-size: 15px;
display: block;
padding: 10px 0 2px 0;
}
#socialsidebar ul li a div small.social-count {
display: block;
padding: 2px 0 0px 0;
}


 
#socialsidebar ul li {
 
    float: right;
    border: 1px solid #FFFFFF;
    overflow: hidden;
    background: #F5F5F5;
    padding: 0px 0px;
}
div#socialsidebar ul li>a {
  color: #414142;
 
}
 #socialsidebar ul li {
  width: 138px;
  float: right;
  border: 1px solid #FFFFFF;
  overflow: hidden;
  background: #F5F5F5;
  padding: 3px 0px;
}
div#socialsidebar ul li>a:hover {
  color: #414142 !important;
  background-color: #E0E0E0 !important;
}
#socialsidebar ul li:hover {
  background-color: #EDEDED;
}
</style>
</div>