اضافه دائره مواقع التواصل الاجتماعي بتاثير احترافي

السلام عليكم ورحمه الله وبركاته 

متابعين المدونه الافاضل اليوم اقدم لكم 

دائره مواقع التواصل بتاثير احترافي

معاينة

قم بالذهاب الي التخطيط 

اضافه اداه

Html/javascript اختر اداه

قم بلصق الكود التالي 

<style>
/* CSS Author Widget */
.iuauthor-item {padding:15px 10px;text-align:center;}
.iuauthor-item .image-wrap {position:relative;overflow:hidden;border-radius:50%;
-webkit-transform: translate3d(0px,0px,0px);transform: translate3d(0px,0px,0px);width:80%;
height:auto;margin:0 auto;margin-bottom:15px;}
.iuauthor-item .image-wrap:before {content: '';display:block;position:absolute;
border-radius:50%;border:10px solid #f9f9f9;border-image-source:initial;border-image-slice:initial;border-image-width:initial;border-image-outset:initial;border-image-repeat:initial;opacity:0.7;margin:auto;top:0px;right:0px;bottom:0px;left:0px;
-webkit-transition: all 0.4s linear;transition: all 0.4s linear;}
.iuauthor-item .social {position:absolute;width:92.5%;height:92.5%;border-radius:50%;
background-color:#333;opacity:0;margin:auto;top:0px;right:0px;bottom:0px;left:0px;font-size:0px;text-align:center;-webkit-transform: scale(0.7);transform: scale(0.7);transition:all 0.3s linear;}
.social.linear-3s .social-inner {position:absolute;width:100%;padding:15px 0;top:50%;left:50%;
-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.social-inner .fa {margin:0px 5px;font-size:16px;color:#fff;width:14px;height:14px;padding:8px;
border-radius:50%;}
.image-wrap:hover .social.linear-3s {opacity:0.9;-webkit-transform: scale(1);transform: scale(1);}
.image-wrap:hover:before {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);}
.iuauthor-item h4.iuauthor-name a {font-size:18px;margin-bottom:10px;display:block;
color:#666;}
.social-inner .fa-google-plus {background:#d64431!important;}
.social-inner .fa-twitter {background:#00aced!important;}
.social-inner .fa-facebook {background:#3b5998!important;}
.social-inner .fa-pinterest {background:#cb2027!important;}
</style>
<div class='iuauthor-item'>
<div class='image-wrap'>
<a href='http://ayanatech.blogspot.com'/>
<img alt='Arlina Design' class='img-circle author_avatar img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge7Fm1iliJoWRWea3b1DdLbnSfCByTjZmzjmjF-7dqAuruDNWWqX0GGC204k1fKINBCEKLmRCOAC4biyWW1ELLS-f-tZDnCU-bPJBBMujpKT7IZxnTGIEi7xcMzBSlIIl_e1tm-HUxYLBv/s1600/Arlina+Logo.png'/>
<div class='social linear-3s'>
<div class='social-inner'>
<a href='https://www.facebook.com/ayanatech' target='_blank' title='Facebook'><i class='fa fa-facebook'></i></a>
<a href='https://plus.google.com/+ayanatech' target='_blank' title='Google Plus'><i class='fa fa-google-plus'></i></a>
</div>
</div>
</div>
</div>
</div> 

قم بتغيير الروابط بما يناسبك

انتهي الموضوع اتمني الدعم منكم بتعليقات مشجعه