اضافة مواقع التواصل للمدونة بشكل جميل ورائع

اضافة جميلة ورائعة لأضافة مواقع التواصل على المدونة

طريقة الاضافة

اذهب للتخطيط - اضافة اداة- HTML/Javascript 

 وألصق الكود التالي مع تغيير مايلزم

<style>.footer-wrapper{ background:#fff;  clear:both;  overflow:hidden;  padding:14px}div#footed h2:after{ content:'';  bottom:0px;  right:0;  left:0px;  background:#bfbfbf;  position:absolute;  z-index:-1;  height:4px}div#footed h2:before{ content:'';  position:absolute;  width:44%;  height:4px;  background:#3d4a60;  right:0;  left:0;  margin:auto;  z-index:2;  bottom:0}div#footed h2{ position:relative;  z-index:1;  font-size:20px;  padding:8px 5px 13px 5px;  text-align:center;  color:#3d4a60;  margin-bottom:18px;  font-weight:100}div#footed:last-child{ margin-left:0}div#footed{ float:right;  width:32%;  margin-left:1%}#footed .widget-content{ font-size:16px;  color:#3d4a60;  padding:8px;  padding-top:0;  line-height:29px}#footed .list-label-widget-content ul li a, #footed .list-label-widget-content ul li span{ display:block;  margin-bottom:8px;  margin-right:6px;  margin-left:6px;  border-radius:3px;  font-size:17px;  padding:6px 0;  color:#fff;  background:#2c3648}#footed .list-label-widget-content ul li{ float:right;  width:50%;  text-align:center}.copyrights a{ color:#8a8a8a}#leftc{ float:left}#rightc{ float:right}.copyrights >div{ border-top:2px solid #2c3648;  padding:0 20px;  padding-top:14px}.copyrights{ background:#fff;  color:#2c3648;  padding:0;  text-align:center;  font-weight:100;  font-size:18px;  overflow:hidden;  height:60px}center.telk-us >span:first-child{ position:relative;  bottom:0;  float:right;  margin-top:6px;  margin-left:7px}center.telk-us img{ width:50px;  height:34px}center.telk-us{ display:inline-block;  margin-top:0;  margin-bottom:0}#footed .popular-posts ul li .item-title a{ color:#3d4a60;  font-size:18px}#footed .popular-posts ul li .item-snippet{ overflow:hidden;  height:49px;  font-size:15px;  color:#a9a9a9;  line-height:23px}#footed .popular-posts ul li .item-thumbnail img{ width:100%;  height:100%}#footed .popular-posts ul li .item-thumbnail{ float:right;  width:90px;  margin-left:9px;  height:90px;  border-radius:7px;  position:relative;  overflow:hidden}#footed .popular-posts ul li{ margin-bottom:14px}.social-type:after{ content:"\f100";  font-family:FontAwesome;  margin-right:5px}.social-to ul li.rss a{ background:#f29a1d}.social-to ul li.googleplus a{ background:#DD4B39}.social-to ul li.twitter a{ background:#55acee}.social-to ul li.facebook a{ background:#3b5998}.social-to ul li.instagram a{ background:#457399}.social-to ul li.youtube a{ background:#cb322c}.social-to ul li .social-type{ float:left}.social-to ul li .social-name{ float:right;  margin-left:8px}.social-to ul li a{ display:block;  border-bottom:3px solid rgba(0,0,0,0.09);  margin-bottom:8px;  color:#fff;  padding:10px 18px;  font-size:18px;  border-radius:4px;  background:#fff;  transition:0.2s}.social-to ul li{ overflow:hidden}.social-to ul li a:hover{ padding:10px 31px}</style>
<div class="social-to"><ul><li class="facebook"><a href="https://www.facebook.com/hlo1y"><span class="social-name"><i class="fa fa-facebook"></i></span><span class="social-count">+ 97 ألف</span><span class="social-type">متابع</span></a></li><li class="youtube"><a href="https://www.youtube.com/c/v518v"><span class="social-name"><i class="fa fa-youtube"></i></span><span class="social-count">+13 ألف</span><span class="social-type">مشترك</span></a></li><li class="instagram"><a href="https://www.instagram.com/hlo1y"><span class="social-name"><i class="fa fa-instagram"></i></span><span class="social-count">+3k</span><span class="social-type">متابع</span></a></li><li class="twitter"><a href="https://twitter.com/hlo1y"><span class="social-name"><i class="fa fa-twitter"></i></span><span class="social-count">+1.5k</span><span class="social-type">متابع</span></a></li></ul></div>