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

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

مـعاَينة

1. اَلتركيب سهل عليك اَلذهاَب اَلى اَلتخطيط ووفتح اَضاَفة 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>


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