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

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

توصل بجديدنا

على الفيسبوك

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

عبر جوجل بلس

غرد معنا

على تويتر

تواصل معنا

عبر لينكيدن

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

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

<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. ثم قم بعمل حفظ
2. ومبروك عليك الاضافة