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

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

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

قم بالذهاب الي التخطيط وفتح اضافة HTML/JAVA SCRIPT

وقم بوضع هذا الكود

<div class="social-counter">

      <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>
     
     
   
      <!-- TWITTER -->
      <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>
     
      <!-- YOUTUBE -->
      <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>

      <!-- GOOGLE PLUS -->
      <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>

      <!-- INSTAGRAM -->
    

    
    </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>

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