إضافة أيقونات التواصل الإجتماعي v1

السلام عليكم أحبابي متابعي وزوار نقطة إبداع

في تدوينة جديد وحصرية 

في هذه التدوينة سوف إضافة أيقونات التواصل الإجتماعي 

للمعاينة

معاينة الإضافة

طريقة التركيب

ادخل إلى القالب في لوحة التحكم في بلوجر وبعدها إلى التخطيط وإضافة أداة جديدة واختر إداة HTML/JavaScript

وضع فيها الكود التالي 

<div dir="rtl" style="text-align: right;" trbidi="on">
<div id="socialsidebar">
<ul>
<li><a href="#"><div class="sidebar-facebook"><p class="animated fadeInDown"><i class="fa fa-facebook"></i><span class="social-num">+300</span><small class="social-count">اعجاب</small></p></div></a></li>
<li><a href="#"><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="#"><div class="sidebar-instagram"><p class="animated"><i class="fa fa-instagram"></i><span class="social-num">+1.5K</span><small class="social-count">متابع</small></p></div></a></li>
<li><a href="#"><div class="sidebar-youtube"><p class="animated"><i class="fa fa-youtube"></i><span class="social-num">1.5k</span><small class="social-count">مشترك</small></p></div></a></li>
<li><a href="#"><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="#"><div class="sidebar-rss"><p class="animated"><i class="fa fa-rss-square"></i><span class="social-num">1.5k</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 {
  width: 103px;
  float: right;
  border: 1px solid #FFFFFF;
  overflow: hidden;
  background: #F5F5F5;
}
div#socialsidebar ul li>a {
  color: #414142;
  font-family: neosansarabic;
}
div#socialsidebar {
  margin-right: -18px;
}
 #socialsidebar ul li {
  width: 102px;
  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>
<br /></div>

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