اضافة ازرار مواقع التواصل الاجتماعي

👈 اضافة ازرار مواقع التواصل الاجتماعي 👉

👈 زێده كرنا تورێت كومه لايه تي ل بلوگه ري 👉

اهلا وسهلا بكم ومرحبا بكم متتبعي وزوار مدونة_  ويب4كور _ في درس جديد واضافة حصرية بتقنية جديدة ورائعة وهي أزرار مواقع التواصل الاجتماعي الفيسبوك وجوجل بلس وتويتر ولينكدن بتقنية جديدة وحصرية تشبه تأثير 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>

➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖


ثم قم بعمل حفظ
ومبروك عليك الاضافة

➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖

بابه تي به لافكه

• Tweet
• Share
• Share
• Share
• Share