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

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

معاينة

الان لتركيب الاضافة

ضع هذا الكود فوق ال </b:skin>

/*=====================================
= Social Connection
=====================================*/
.social-connection{width:910px;display:block;margin:auto;}
.connection-box{box-shadow: 0px 2px 5px 0px rgba(50, 50, 48, 0.48);background:#fff;margin:auto;width:280px;padding-bottom:10px;display:inline-block;margin-bottom:20px;margin-left:20px;}
.connection-box:nth-child(3n+3){margin-left:0;}
.connection-cover{height:80px;}
.connection-cover img{height:130px;width:280px;}
.connection-image{margin:auto;width:120px;}
.connection-image img{height:110px;width:110px;border-radius:100%;margin-bottom:10px;}
.connection-title{text-align:center;}
.connection-title a{text-decoration:none;color:#333;font-size:20px;margin-bottom:13px;display:inline-block;}
.connection-follow a{background-color:#fff;padding:5px 20px;display:inline-block;color:#333;box-shadow:0 1px 0 rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.17);border-radius:2px;}
.connection-follow a:hover{border-color:#999;}
.connection-follow i{color:#333;margin-left:8px;font-size:18px;}
.connection-follow i.fa-facebook-official{color:#3b5998;}
.connection-follow i.fa-twitter{color:#1da1f2;}
.connection-follow i.fa-linkedin{color:#3597d8;}
.connection-follow i.fa-google-plus,.connection-follow i.fa-youtube{color:#d73d32;}
@media screen and (max-width:1200px){.social-connection{width:800px;}.connection-box,.connection-cover img{width:240px;}.category-grid{width:765px;}.category-grid a{width:220px;padding:20px 10px;}}
@media screen and (max-width:530px){.social-connection,.category-grid{width:265px;}}
.connection-follow {text-align: center;}

ضع هذا الكود في المكان الذي تريد ضهور فيه الاضافة

<div class='connection-cover'>
<img src='https://2.bp.blogspot.com/-L8s9h952c4o/Whb_3Q5U1pI/AAAAAAAAEgQ/hg7XtF5SKNIF23Qkzon7El0P6srnGXDlwCK4BGAYYCw/s1600/cover%2Babdou%2B2018.png'/>
 </div>
<div class='connection-image'>
<img src='https://3.bp.blogspot.com/-1DtQnlk441M/Whb_BsKU2HI/AAAAAAAAEgE/oAPIUUSMFRczidNK7T3TBJiW21kaWVLbwCK4BGAYYCw/s1600/logoabdelali.png'/>
 </div>
<div class='connection-title'>
  <a href='#'>Abdou Technologie</a>
 </div>
<div class='connection-follow'>
      <a href='#'><i class='fa fa-facebook-official'/>لايك</a>
 </div>
</div>
<div class='connection-box'>

<div class='connection-cover'>
<img src='https://2.bp.blogspot.com/-L8s9h952c4o/Whb_3Q5U1pI/AAAAAAAAEgQ/hg7XtF5SKNIF23Qkzon7El0P6srnGXDlwCK4BGAYYCw/s1600/cover%2Babdou%2B2018.png'/>
 </div>
<div class='connection-image'>
<img src='https://3.bp.blogspot.com/-1DtQnlk441M/Whb_BsKU2HI/AAAAAAAAEgE/oAPIUUSMFRczidNK7T3TBJiW21kaWVLbwCK4BGAYYCw/s1600/logoabdelali.png'/>
 </div>
<div class='connection-title'>
  <a href='#'>Abdou Technologie</a>
 </div>
<div class='connection-follow'>
  <a href='#'><i class='fa fa-twitter'/>تابعني</a>
 </div>
</div>
<div class='connection-box'>

<div class='connection-cover'>
<img src='https://2.bp.blogspot.com/-L8s9h952c4o/Whb_3Q5U1pI/AAAAAAAAEgQ/hg7XtF5SKNIF23Qkzon7El0P6srnGXDlwCK4BGAYYCw/s1600/cover%2Babdou%2B2018.png'/>
 </div>
<div class='connection-image'>
<img src='https://3.bp.blogspot.com/-1DtQnlk441M/Whb_BsKU2HI/AAAAAAAAEgE/oAPIUUSMFRczidNK7T3TBJiW21kaWVLbwCK4BGAYYCw/s1600/logoabdelali.png'/>
 </div>
<div class='connection-title'>
  <a href='#'>Abdou Technologie</a>
 </div>
<div class='connection-follow'>
  <a href='#'><i class='fa fa-youtube'/>إشترك</a>
 </div>
</div>
</div>