أزرار التواصل الإجتماعي E

• لوحة تحكم بلوجر.
• إضافة أداة.
• HTML/javascript.
• يمكنك المعاينه من هنا.

<div class="widget-content"> <div class="social-tuhfawebserver-man"> <a class="tuhfawebserv facebook" href="#"> <div class="icon"><i class="fa fa-facebook" aria-hidden="true"></i></div> <p><span>34.2k</span> إعجابات</p> <p class="action-btn">أعجبني</p> </a> <!-- TWITTER --> <a class="tuhfawebserv twitter" href="#"> <div class="icon"><i class="fa fa-twitter" aria-hidden="true"></i></div> <p><span>28.6k</span> متابعين</p> <p class="action-btn">متابعه</p> </a> <!-- YOUTUBE --> <a class="tuhfawebserv youtube" href="#"> <div class="icon"><i class="fa fa-youtube" aria-hidden="true"></i></div> <p><span>8.6k</span> مشترك</p> <p class="action-btn">أشترك</p> </a> <!-- GOOGLE PLUS --> <a class="tuhfawebserv google-plus" href="#"> <div class="icon"><i class="fa fa-google-plus" aria-hidden="true"></i></div> <p><span>17.3k</span> متابع</p> <p class="action-btn">+1</p> </a> <!-- INSTAGRAM --> <a class="tuhfawebserv instagram" href="#"> <div class="icon"><i class="fa fa-instagram" aria-hidden="true"></i></div> <p><span>17.3k</span> متابع</p> <p class="action-btn">متابعه</p> </a> </div> <style> .social-tuhfawebserver-man{ padding: 0; display: block; } .tuhfawebserv{ display: block; padding: 7px 0; text-align: left; transition: all 0.5s ease; } .tuhfawebserv:hover{ background: rgba(0,0,0,0.033); transform: scale(1.065); } .tuhfawebserv .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; } .tuhfawebserv .icon i{ display: table-cell; vertical-align: middle; } .tuhfawebserv p{ display: inline-block; font-size: 13px; color: #ececec; margin: 11px; } .tuhfawebserv p span{ color: #1c1c1c; font-size: 18px; font-weight: bold; padding-right: 2px; } .tuhfawebserv .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-tuhfawebserver-2 .linkedin, .linkedin .icon,.linkedin .action-btn{background:#0077B5} .social-tuhfawebserver-2 .vimeo, .vimeo .icon,.vimeo .action-btn{background:#1ab7ea} .social-tuhfawebserver-2 .vk, .vk .icon,.vk .action-btn{background:#4c75a3} .social-tuhfawebserver-2 .tumblr, .tumblr .icon,.tumblr .action-btn{background:#34465d} .social-tuhfawebserver-2 .pinterest, .pinterest .icon,.pinterest .action-btn{background:#bd081c} .social-tuhfawebserver-2 .stumbleupon, .stumbleupon .icon,.stumbleupon .action-btn{background:#eb4924} .social-tuhfawebserver-2 .reddit, .reddit .icon,.reddit .action-btn{background:#ff5700} .social-tuhfawebserver-2 .yelp, .yelp .icon,.yelp .action-btn{background:#af0606} .social-tuhfawebserver-2 .weibo, .weibo .icon,.weibo .action-btn{background:#df2029} .social-tuhfawebserver-2 .producthunt, .producthunt .icon,.producthunt .action-btn{background:#da552f} .social-tuhfawebserver-2 .whatsapp, .whatsapp .icon,.whatsapp .action-btn{background:#25D366} .social-tuhfawebserver-2 .vine, .vine .icon,.vine .action-btn{background:#00b489} .social-tuhfawebserver-2 .slack, .slack .icon,.slack .action-btn{background:#3aaf85} .social-tuhfawebserver-2 .dribbble, .dribbble .icon,.dribbble .action-btn{background:#ea4c89} .social-tuhfawebserver-2 .flickr, .flickr .icon,.flickr .action-btn{background:#ff0084} .social-tuhfawebserver-2 .behance, .behance .icon,.behance .action-btn{background:#131418} .behance .icon i{font-size:18px;} .social-tuhfawebserver-2 .foursquare, .foursquare .icon,.foursquare .action-btn{background:#f94877} .social-tuhfawebserver-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> </div>