عمل بنر إعلاني إحترافي لموقعك في دقائق و بدون أي خبرة

اهلا وسهلا بكم ومرحبا بكم متتبعي وزوار مدونة محترف التقنية الاوفياء في درس جديد واضافة حصرية بتقنية جديدة ورائعة وهي أزرار 

مواقع التواصل الاجتماعي بتقنية جديدة وحصرية تشبه تأثير 3D نوعا ما لكنها رائعة وستعطي لمدونتك لمسة خاصة وانيقة .

معاينة حية للاضافة

توصل بجديدنا

على الفيسبوك

اضفنا الى دوائرك

عبر جوجل بلس

غرد معنا

على تويتر

تواصل معنا

عبر لينكيدن

شرح طريقة التركيب

1. اذهب الي لوحة التحكم 
2. ثم تخطيط 
3. ثم اختار اداة html/javascript
4. ثم ضع هذا الكود وقم بتغير الـ# بـ الروابط الخاصة بك 

<style>
div#centrada a {
    color: #fff;
}
div#HTML1 {
    margin: 0;
}

.wrapper {
  padding: 60px 0;
  text-align: center;
}

.social {
  display : inline-block;
    font-size: 80px;
    color: rgb(255, 255, 255);
    height: 150px;
    width :  150px;
    line-height: 150px;
    border-radius: 0%;
    text-align: center;
}



#centrada{
  margin: 15px auto 0px auto;
  width : 300px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}
.utopix{
  padding-bottom:50px;
}
a{
  color:#fff;
  text-decoration:none;
}

.cube {
  width :  100%;
  height: 50px;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.default-state,.active-state {
  height: 50px;
}
.cube +.cube{
margin:10px 0px;
}
.default-state {
  -webkit-transform: translateZ(25px);
  -moz-transform: translateZ(25px);
  -o-transform: translateZ(25px);
  -ms-transform: translateZ(25px);
  transform: translateZ(25px);
}
.flip-to-top .active-state {
  -webkit-transform: rotateX(90deg) translateZ(75px);
  -moz-transform: rotateX(90deg) translateZ(75px);
  -o-transform: rotateX(90deg) translateZ(75px);
  -ms-transform: rotateX(90deg) translateZ(75px);
  transform: rotateX(90deg) translateZ(75px);
}
.flip-to-bottom .active-state {
  -webkit-transform: rotateX(-90deg) translateZ(-50px);
  -moz-transform: rotateX(-90deg) translateZ(-50px);
  -o-transform: rotateX(-90deg) translateZ(-50px);
  -ms-transform: rotateX(-90deg) translateZ(-50px);
  transform: rotateX(-90deg) translateZ(-50px);
}
.cube.flip-to-top:hover {
  -webkit-transform: rotateX(-89deg);
  -moz-transform: rotateX(-89deg);
  -o-transform: rotateX(-89deg);
  -ms-transform: rotateX(-89deg);
  transform: rotateX(-89deg);
}
.cube.flip-to-bottom:hover {
  -webkit-transform: rotateX(89deg);
  -moz-transform: rotateX(89deg);
  -o-transform: rotateX(89deg);
  -ms-transform: rotateX(89deg);
  transform: rotateX(89deg);
}
.cube {
  text-align: center;
  margin: 0 auto;
}
.default-state,
.active-state {
  font-size: 17px;
  text-transform: uppercase;
  color: #fff;
  line-height: 50px;
  -webkit-transition: background 250ms ease;
  -moz-transition: background 250ms ease;
  -o-transition: background 250ms ease;
  transition: background 250ms ease;
}
.cube:hover .default-state {
  background: #000;
}
.facebook {
  background: #3b5998;
}
.twitter {
  background: #019AD1;
}
.google-plus {
  background: #D34836;
}
.linkedin {
  background: #069;
}
</style>
<div id="centrada">
  
<div class="cube flip-to-top">
   <div class="default-state facebook">
      <span>
توصل بجديدنا</span>
   </div>
   <div class="active-state facebook">
      <span><a href="#" target="_blank"><i class='fa fa-facebook'/></i> على الفيسبوك </a></span>
   </div>
</div>

<div class="cube flip-to-top google-plus">
   <div class="default-state">
      <span>
اضفنا الى دوائرك</span>
   </div>
   <div class="active-state google-plus">
      <span><a href="#" target="_blank"><i class='fa fa-google-plus'/></i> عبر جوجل بلس </a></span>
   </div>
</div>


<div class="cube flip-to-top twitter">
   <div class="default-state">
      <span>
غرد معنا</span>
   </div>
   <div class="active-state twitter">
      <span><a href="#" target="_blank"><i class='fa fa-twitter'/></i> على تويتر </a></span>
   </div>
</div>

<div class="cube flip-to-top">
   <div class="default-state linkedin">
      <span>
تواصل معنا</span>
   </div>
   <div class="active-state linkedin">
      <span><a href="#" target="_blank"><i class='fa fa-linkedin'/></i> عبر لينكيدن </a></span>
   </div>
</div>
  
</div>

1. ثم قم بعمل حفظ ومبروك الأضافة