اضافة صندوق الاشتراك بالمواقع التواصل الاجتماعي بشكل إحترافي #3

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

معاينة

ابحث على </head> وضع هذا الكود فوقه مباشرة

<b:if cond='data:blog.pageType == "index"'>
<style>
/*=====================================
= ازرار التواصل الاجتماعي من عبدو تكنولوجي
=====================================*/
.social-time{width:100%;background:#4e4e4e;color:#fff;margin-top:50px;height:70px;line-height:67px;}
.st{color:#fff;font-size:30px;letter-spacing:1px;text-transform:uppercase;margin-top:-21px;font-weight:normal;text-align:center;}
.st:before{content:"\f017";font-size:30px;color:#fff;margin-right:15px;}
.social-section{margin-bottom:30px;float:left;width:100%;display:inline-flex;}
.s-button{color:#fff;display:block;background:rgba(198,198,198,0.32);font-size:24px;padding:7px 0;text-align:center;}
.facebook2{background-color:#3b5998;}
.google-plus2{background-color:#d73d32;}
.twitter2{background-color:#1da1f2;}
.pinterest2{background-color:#bd2126;}
.facebook2,.google-plus2,.twitter2,.pinterest2{width:100%;height:170px;}
.facebook2 a,.google-plus2 a,.twitter2 a,.pinterest2 a{display:block;text-decoration:none!important;font-size:16px;text-align:center;color:#FFF!important;padding:27px 0 18px 0;}
.facebook2 a span,.google-plus2 a span,.pinterest2 a span,.twitter2 a span{display:block;font-size:23px;font-family:inherit;transition: 0.5s;}
.facebook2:hover span,.google-plus2:hover span,.pinterest2:hover span,.twitter2:hover span{-webkit-transform:translateY(-60px);transform:translateY(-60px);}
.facebook2 a i,.google-plus2 a i,.pinterest2 a i,.twitter2 a i{transition: 0.5s;display:block;font-size:23px;background-color:#fff;color:#333;width:2.6rem;text-align:center;margin:0 auto;border-radius:30px;height:2.6rem;line-height:2.6rem;margin-bottom:14px;}
.facebook2:hover i,.google-plus2:hover i,.pinterest2:hover i,.twitter2:hover i{-webkit-transform:translateY(44px);transform:translateY(44px);}
.facebook2 a i{color:#3b5998}
.google-plus2 a i{color:#d73d32}
.pinterest2 a i{color:#bd2126}
.twitter2 a i{color:#1da1f2}
</style>
</b:if>