10772047211989472
recent
آخر الأخبار

اضافة اداة تواصل معنا عبر واتس اب الي مدونة بلوجر

الخط

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



شرح التركيب

اول شي اذهب آلي اي مكان في التخطيط وضيف اداة HTML/JavaScript في اي مكان داخل التخطيط

<div class="quick-alo-phone quick-alo-green quick-alo-show" id="quick-alo-phoneIcon" style="right: 10px; top: 20%;">

  <a href="https://api.whatsapp.com/send?phone=0100385xxxx" title="فرحات دوت كوم">

  <div class="quick-alo-ph-circle"></div>

  <div class="quick-alo-ph-circle-fill"></div>

  <div class="quick-alo-ph-img-circle"></div>

  </a>

</div>

<style>

.quick-alo-phone.quick-alo-static {

  opacity:.6;

}

.quick-alo-phone.quick-alo-hover,

.quick-alo-phone:hover {

  opacity:1;

}

.quick-alo-ph-circle {

  width:160px;

  height:160px;

  top:20px;

  left:20px;

  position:absolute;

  background-color:transparent;

  -webkit-border-radius:100%;

  -moz-border-radius:100%;

  border-radius:100%;

  border:2px solid rgba(30,30,30,0.4);

  border:2px solid #bfebfc 9;

  opacity:.1;

  -webkit-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;

  -moz-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;

  -ms-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;

  -o-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;

  animation:quick-alo-circle-anim 1.2s infinite ease-in-out;

  -webkit-transition:all .5s;

  -moz-transition:all .5s;

  -o-transition:all .5s;

  transition:all .5s;

  -webkit-transform-origin:50% 50%;

  -moz-transform-origin:50% 50%;

  -ms-transform-origin:50% 50%;

  -o-transform-origin:50% 50%;

  transform-origin:50% 50%;

}

.quick-alo-phone.quick-alo-active .quick-alo-ph-circle {

  -webkit-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;

  -moz-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;

  -ms-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;

  -o-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;

  animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;

}

.quick-alo-phone.quick-alo-static .quick-alo-ph-circle {

  -webkit-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;

  -moz-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;

  -ms-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;

  -o-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;

  animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;

}

.quick-alo-phone.quick-alo-hover .quick-alo-ph-circle,

.quick-alo-phone:hover .quick-alo-ph-circle {

  border-color:#00aff2;

  opacity:.5;

}

.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-circle,

.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-circle {

  border-color:#75eb50;

  border-color:#baf5a7 9;

  opacity:.5;

}

.quick-alo-phone.quick-alo-green .quick-alo-ph-circle {

  border-color:#00aff2;

  border-color:#bfebfc 9;

  opacity:.5;

}

.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-circle,

.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-circle {

  border-color:#ccc;

  opacity:.5;

}

.quick-alo-phone.quick-alo-gray .quick-alo-ph-circle {

  border-color:#75eb50;

  opacity:.5;

}

.quick-alo-ph-circle-fill {

  width:100px;

  height:100px;

  top:50px;

  left:50px;

  position:absolute;

  background-color:#000;

  -webkit-border-radius:100%;

  -moz-border-radius:100%;

  border-radius:100%;

  border:2px solid transparent;

  opacity:.1;

  -webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;

  -moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;

  -ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;

  -o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;

  animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;

  -webkit-transition:all .5s;

  -moz-transition:all .5s;

  -o-transition:all .5s;

  transition:all .5s;

  -webkit-transform-origin:50% 50%;

  -moz-transform-origin:50% 50%;

  -ms-transform-origin:50% 50%;

  -o-transform-origin:50% 50%;

  transform-origin:50% 50%;

}

.quick-alo-phone.quick-alo-active .quick-alo-ph-circle-fill {

  -webkit-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;

  -moz-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;

  -ms-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;

  -o-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;

  animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;

}

.quick-alo-phone.quick-alo-static .quick-alo-ph-circle-fill {

  -webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;

  -moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;

  -ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;

  -o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;

  animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;

  opacity:0 !important;

}

.quick-alo-phone.quick-alo-hover .quick-alo-ph-circle-fill,

.quick-alo-phone:hover .quick-alo-ph-circle-fill {

  background-color:rgba(0,175,242,0.5);

  background-color:#00aff2 9;

  opacity:.75 !important;

}

.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-circle-fill,

.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-circle-fill {

  background-color:rgba(117,235,80,0.5);

  background-color:#baf5a7 9;

  opacity:.75 !important;

}

.quick-alo-phone.quick-alo-green .quick-alo-ph-circle-fill {

  background-color:rgba(0,175,242,0.5);

  background-color:#a6e3fa 9;

  opacity:.75 !important;

}

.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-circle-fill,

.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-circle-fill {

  background-color:rgba(204,204,204,0.5);

  background-color:#ccc 9;

  opacity:.75 !important;

}

.quick-alo-phone.quick-alo-gray .quick-alo-ph-circle-fill {

  background-color:rgba(117,235,80,0.5);

  opacity:.75 !important;

}

.quick-alo-ph-img-circle {

  width:60px;

  height:60px;

  top:70px;

  left:70px;

  position:absolute;

  background:rgba(30,30,30,0.1) url("http://i.imgur.com/YWJeVO2.png") no-repeat center center;

  -webkit-border-radius:100%;

  -moz-border-radius:100%;

  border-radius:100%;

  border:2px solid transparent;

  opacity:.7;

  -webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;

  -moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;

  -ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;

  -o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;

  animation:quick-alo-circle-img-anim 1s infinite ease-in-out;

  -webkit-transform-origin:50% 50%;

  -moz-transform-origin:50% 50%;

  -ms-transform-origin:50% 50%;

  -o-transform-origin:50% 50%;

  transform-origin:50% 50%;

}

.quick-alo-phone.quick-alo-active .quick-alo-ph-img-circle {

  -webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;

  -moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;

  -ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;

  -o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;

  animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;

}

.quick-alo-phone.quick-alo-static .quick-alo-ph-img-circle {

  -webkit-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;

  -moz-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;

  -ms-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;

  -o-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;

  animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;

}

.quick-alo-phone.quick-alo-hover .quick-alo-ph-img-circle,

.quick-alo-phone:hover .quick-alo-ph-img-circle {

  background-color:#00aff2;

}

.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-img-circle,

.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-img-circle {

  background-color:#75eb50;

  background-color:#75eb50 9;

}

.quick-alo-phone.quick-alo-green .quick-alo-ph-img-circle {

  background-color:#00aff2;

  background-color:#00aff2 9;

}

.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-img-circle,

.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-img-circle {

  background-color:#ccc;

}

.quick-alo-phone.quick-alo-gray .quick-alo-ph-img-circle {

  background-color:#75eb50;

}

@-moz-keyframes quick-alo-circle-anim {

  0% {

    -moz-transform:rotate(0) scale(.5) skew(1deg);

    opacity:.1;

    -moz-opacity:.1;

    -webkit-opacity:.1;

    -o-opacity:.1;

  }

  30% {

    -moz-transform:rotate(0) scale(.7) skew(1deg);

    opacity:.5;

    -moz-opacity:.5;

    -webkit-opacity:.5;

    -o-opacity:.5;

  }

  100% {

    -moz-transform:rotate(0) scale(1) skew(1deg);

    opacity:.6;

    -moz-opacity:.6;

    -webkit-opacity:.6;

    -o-opacity:.1;

  }

}

@-webkit-keyframes quick-alo-circle-anim {

  0% {

    -webkit-transform:rotate(0) scale(.5) skew(1deg);

    -webkit-opacity:.1;

  }

  30% {

    -webkit-transform:rotate(0) scale(.7) skew(1deg);

    -webkit-opacity:.5;

  }

  100% {

    -webkit-transform:rotate(0) scale(1) skew(1deg);

    -webkit-opacity:.1;

  }

}

@-o-keyframes quick-alo-circle-anim {

  0% {

    -o-transform:rotate(0) kscale(.5) skew(1deg);

    -o-opacity:.1;

  }

  30% {

    -o-transform:rotate(0) scale(.7) skew(1deg);

    -o-opacity:.5;

  }

  100% {

    -o-transform:rotate(0) scale(1) skew(1deg);

    -o-opacity:.1;

  }

}

@-moz-keyframes quick-alo-circle-fill-anim {

  0% {

    -moz-transform:rotate(0) scale(.7) skew(1deg);

    opacity:.2;

  }

  50% {

    -moz-transform:rotate(0) -moz-scale(1) skew(1deg);

    opacity:.2;

  }

  100% {

    -moz-transform:rotate(0) scale(.7) skew(1deg);

    opacity:.2;

  }

}

@-webkit-keyframes quick-alo-circle-fill-anim {

  0% {

    -webkit-transform:rotate(0) scale(.7) skew(1deg);

    opacity:.2;

  }

  50% {

    -webkit-transform:rotate(0) scale(1) skew(1deg);

    opacity:.2;

  }

  100% {

    -webkit-transform:rotate(0) scale(.7) skew(1deg);

    opacity:.2;

  }

}

@-o-keyframes quick-alo-circle-fill-anim {

  0% {

    -o-transform:rotate(0) scale(.7) skew(1deg);

    opacity:.2;

  }

  50% {

    -o-transform:rotate(0) scale(1) skew(1deg);

    opacity:.2;

  }

  100% {

    -o-transform:rotate(0) scale(.7) skew(1deg);

    opacity:.2;

  }

}

@-moz-keyframes quick-alo-circle-img-anim {

  0% {

    transform:rotate(0) scale(1) skew(1deg);

  }

  10% {

    -moz-transform:rotate(-25deg) scale(1) skew(1deg);

  }

  20% {

    -moz-transform:rotate(25deg) scale(1) skew(1deg);

  }

  30% {

    -moz-transform:rotate(-25deg) scale(1) skew(1deg);

  }

  40% {

    -moz-transform:rotate(25deg) scale(1) skew(1deg);

  }

  50% {

    -moz-transform:rotate(0) scale(1) skew(1deg);

  }

  100% {

    -moz-transform:rotate(0) scale(1) skew(1deg);

  }

}

@-webkit-keyframes quick-alo-circle-img-anim {

  0% {

    -webkit-transform:rotate(0) scale(1) skew(1deg);

  }

  10% {

    -webkit-transform:rotate(-25deg) scale(1) skew(1deg);

  }

  20% {

    -webkit-transform:rotate(25deg) scale(1) skew(1deg);

  }

  30% {

    -webkit-transform:rotate(-25deg) scale(1) skew(1deg);

  }

  40% {

    -webkit-transform:rotate(25deg) scale(1) skew(1deg);

  }

  50% {

    -webkit-transform:rotate(0) scale(1) skew(1deg);

  }

  100% {

    -webkit-transform:rotate(0) scale(1) skew(1deg);

  }

}

@-o-keyframes quick-alo-circle-img-anim {

  0% {

    -o-transform:rotate(0) scale(1) skew(1deg);

  }

  10% {

    -o-transform:rotate(-25deg) scale(1) skew(1deg);

  }

  20% {

    -o-transform:rotate(25deg) scale(1) skew(1deg);

  }

  30% {

    -o-transform:rotate(-25deg) scale(1) skew(1deg);

  }

  40% {

    -o-transform:rotate(25deg) scale(1) skew(1deg);

  }

  50% {

    -o-transform:rotate(0) scale(1) skew(1deg);

  }

  100% {

    -o-transform:rotate(0) scale(1) skew(1deg);

  }

}

.quick-alo-phone {

    position: fixed;

    background-color: transparent;

    width: 200px;

    height: 200px;

    cursor: pointer;

    z-index: 200000 !important;

    -webkit-backface-visibility: hidden;

    -webkit-transform: translateZ(0);

    -webkit-transition: visibility .5s;

    -moz-transition: visibility .5s;

    -o-transition: visibility .5s;

    transition: visibility .5s;

    right: 150px;

    top: 30px;

}

</style>

بعد كده الصق هذا الكود داخل اداة HTML/JavaScript وغير رقم 0100385xxxx الي رقمك او رقم العمل وغير اسم فرحات دوت كوم الي اسمك او اسم مدونتك ومبروك عليك الاضافة

هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق
  1. طب لو انا عايز نفس الاضافه دي بس تحوله علي الماسنجر مش علي الواتس ينفع ؟

    ردحذف

إرسال تعليق

صديقي. إذا أعجبك الموضوع رجاءً قم بإضافة تعليق على الموضوع لتشجيعنا

نموذج الاتصال
الاسمبريد إلكترونيرسالة