random

آخر الأخبار

random
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. طب لو انا عايز نفس الاضافه دي بس تحوله علي الماسنجر مش علي الواتس ينفع ؟

    ردحذف

التعليقات



جميع الحقوق محفوظة

فرحات دوت كوم