إضافة تواصل معنا بشكل إحترافي في السيدبار.

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

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

لتركيب الإضافة :

1. قم بالتوجه إلى تخطيط المدونة
2. قم بإختيار إضافة أداة " HTML/JavaScript "
3. قم بنسخ ولصق هذا الكود هناك:

كود الإضافة :

<style>
.zd-social {
min-width: 250px;
margin: 10px 0
}
.zd-social a {
color: #fff;
position: relative;
display: block;
overflow: hidden
}
.zd-social .sq {
width: 50%;
height: 0;
padding-bottom: 50%;
float: left
}
.zd-social .icon {
left: 0%;
top: 0;
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out
}
.zd-social a:hover .icon {
left: -100%
}
.zd-social a:hover .content {
left: 0
}
.zd-social .content {
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
position: absolute;
top: 0;
left: 100%;
word-wrap: break-word;
width: 90%;
height: 100%;
margin: 0 5%;
font: 400 14px 'open sans', sans-serif;
text-align: center
}
.zd-social .display {
margin-top: 40px;
display: block
}
.zd-social .count {
font-weight: bold;
display: block;
margin-top: 5px
}
.zd-social .icon span {
position: Absolute;
left: 50%;
top: 50%;
color: #fff;
text-align: Center;
width: 40px;
height: 40px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
display: block;
margin-top: -20px;
margin-left: -20px;
border: 2px solid #fff;
font: 400 20px 'fontawesome';
line-height: 40px
}
.zd-social .facebook {
background: #3b5998
}
.zd-social .twitter {
background: #00aced
}
.zd-social .google {
background: #dd4b39
}
.zd-social .instagram {
background: #9b6954
}
.zd-social .email {
background: #ffaa09
}
.zd-social .rec {
height: 0;
padding-bottom: 40%
}
</style>
<div class="widget-content">
<div class="zd-social">
  <a class="sq facebook" href="https://www.facebook.com/allampro16/" target="_blank">
    <div class="icon"><span><i class="fa fa-facebook"></i></span></div>
    <div class="content">
    <span class="display">allampro16</span>
    <span class="count">2.5k</span>
    </div>
  </a>
  <a class="sq twitter" href="https://twitter.com/allampro16" target="_blank">
    <div class="icon"><span><i class="fa fa-twitter"></i></span></div>
    <div class="content">
    <span class="display">@allampro16</span>
    <span class="count">3k</span>
    </div>
  </a>
  <a class="sq google" href="https://plus.google.com/116800497104061567488/" target="_blank">
    <div class="icon"><span><i class="fa fa-google-plus"></i></span></div>
    <div class="content">
    <span class="display">+ allampro16</span>
    <span class="count">1.5k</span>
    </div>
  </a>
  <a class="sq instagram" href="https://www.instagram.com/abdlwafitahiri/" target="_blank">
    <div class="icon"><span><i class="fa fa-instagram"></i></span></div>
    <div class="content">
    <span class="display">@allampro16</span>
    <span class="count">5k</span>
    </div>
  </a>
  <div style="clear:both">
  <a class="rec email" href="#" target="_blank">
    <div class="icon"><span><i class="fa fa-envelope"></i></span></div>
    <div class="content">
    <span class="display">allampro16@gmail.com</span>
    </div>
  </a>
</div></div>
</div>
<div class="clear"></div>

           إلى هنا أتمنى أن أكون قد أفدتكم ، لا تنسو دائما ترك تعليقاتكم وأي إستفسار نحن في الخدمة ...

شارك المقالة عبر:

إقرأ أيضا

اترك تعليقا: