اضافة عداد المتابعين على السايدبار بشكل جديد وحصري V1

السلام عليكم مرحبا بكم في مدونة عبدو تكنولوجي اليوم اقدم لكم اضافة رائعة وهيا عداد متابعين لكل من الفيسبوك و تويتر و اليوتيوب و جوجل بلس يوضع في السايدبار

معاينة

التركيب سهل عليك الذهاب الى التخطيط وفتح اضافة HTML/JAVA SCRIPT وضع هذا الكود و احفظ

<a class="count facebook" href="#">
        <div class="icon">
<i class="fa fa-facebook"></i></div>
<p>
<span>34.2k</span>متابع</p>
<p class="action-btn">
لايك الان</p>
</a>
      
      
    
      
      <a class="count twitter" href="#">
        <div class="icon">
<i class="fa fa-twitter"></i></div>
<p>
<span>28.6k</span> متابعين</p>
<p class="action-btn">
تابع الان</p>
</a>
      
      
      <a class="count youtube" href="#">
        <div class="icon">
<i class="fa fa-youtube"></i></div>
<p>
<span>8.6k</span> مشترك</p>
<p class="action-btn">
إشترك الان</p>
</a>

<a class="count google-plus" href="#">
        <div class="icon">
<i class="fa fa-google-plus"></i></div>
<p>
<span>17.3k</span> متابع</p>
<p class="action-btn">
+1</p>
</a>

</div>
<style>
.social-counter{
  padding: 0;
  display: block;
}

.count{
  display: block;
  padding: 7px 0;
  text-align: left;
  transition: all 0.5s ease;
}

.count:hover{
  background: rgba(0,0,0,0.033);
  transform: scale(1.065);
}

.count .icon{
  background: #aaa;
  display: inline-block;
  float: left;
  color: white;
  font-size: 22px;
  margin-left: 5px;
  text-align: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  text-shadow: 0 0 3px rgba(0,0,0,0.2);
  display: table;
}
.count .icon i{
  display: table-cell;
  vertical-align: middle;
}

.count p{
  display: inline-block;
  font-size: 13px;
  color: #888;
  margin: 11px;
}
.count p span{
  color: black;
  font-size: 18px;
  font-weight: bold;
  padding-right: 2px;
}

.count .action-btn{
  float: right;
  display: inline-block;
  background: #aaa;
  color: white;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 14px;
  margin: 11px;
}

/*== COLORS ==*/
.facebook .icon{background:#3b5999;}
.facebook .action-btn{background:#3b5999;}
.facebook .icon i{padding-top:2px;}

.twitter .icon{background:#55acee;}
.twitter .action-btn{background:#55acee;}
.twitter .icon i{padding-top:2px;}

.youtube .icon{background:#cd201f;}
.youtube .action-btn{background:#cd201f;}
.youtube .icon i{font-size:24px}

.google-plus .icon{background:#dd4b39;}
.google-plus .action-btn{background:#dd4b39;}
.google-plus .icon i{font-size: 18px; padding-top: 1px;}

.instagram .icon{background:#e4405f;}
.instagram .action-btn{background:#e4405f;}

.rss .icon{background:#f57d00;}
.rss .action-btn{background:#f57d00;}

.social-counter-2 .linkedin, .linkedin .icon,.linkedin .action-btn{background:#0077B5}

.social-counter-2 .vimeo, .vimeo .icon,.vimeo .action-btn{background:#1ab7ea}

.social-counter-2 .vk, .vk .icon,.vk .action-btn{background:#4c75a3}

.social-counter-2 .tumblr, .tumblr .icon,.tumblr .action-btn{background:#34465d}

.social-counter-2 .pinterest, .pinterest .icon,.pinterest .action-btn{background:#bd081c}

.social-counter-2 .stumbleupon, .stumbleupon .icon,.stumbleupon .action-btn{background:#eb4924}

.social-counter-2 .reddit, .reddit .icon,.reddit .action-btn{background:#ff5700}

.social-counter-2 .yelp, .yelp .icon,.yelp .action-btn{background:#af0606}

.social-counter-2 .weibo, .weibo .icon,.weibo .action-btn{background:#df2029}

.social-counter-2 .producthunt, .producthunt .icon,.producthunt .action-btn{background:#da552f}

.social-counter-2 .whatsapp, .whatsapp .icon,.whatsapp .action-btn{background:#25D366}

.social-counter-2 .vine, .vine .icon,.vine .action-btn{background:#00b489}

.social-counter-2 .slack, .slack .icon,.slack .action-btn{background:#3aaf85}

.social-counter-2 .dribbble, .dribbble .icon,.dribbble .action-btn{background:#ea4c89}

.social-counter-2 .flickr, .flickr .icon,.flickr .action-btn{background:#ff0084}

.social-counter-2 .behance, .behance .icon,.behance .action-btn{background:#131418}
.behance .icon i{font-size:18px;}

.social-counter-2 .foursquare, .foursquare .icon,.foursquare .action-btn{background:#f94877}

.social-counter-2 .snapchat, .snapchat .icon,.snapchat .action-btn{background:#FFFC00}
.snapchat .icon i{font-size:24px;text-shadow: -1px 0 black,0 -1px black, 1px 0 black, 0 1px black}

.snapchat .action-btn{text-shadow: 0 0 1px black}
</style>

اذا اعجبتك الاضافة لا تنسى الاشتراك في المدونة و القناة لاني انشر شروحات مصورة