https://wa.me/905001234567
905001234567 : Telefon numarası. WhatsApp telefon numaraları 212, 216, 312 vb. şehirlerarası kodlar kullanılabilinir ama ülke kodunun başına + eklenerek kullanılamaz.
<a href="https://wa.me/905001234567" rel="nofollow" target="_blank"></a>
<a href="https://wa.me/905001234567" rel="nofollow" target="_blank"><img src="RESİM URL" /></a>
<a style="display:scroll;position:fixed;bottom:5px;left:5px;" href="https://wa.me/905001234567" rel="nofollow" target="_blank" title="WhatsApp"><img src="RESİM URL" /></a>
<div id="whatsapp-widget" class="ww-right ww-normal ww-yes"> <a target="_blank" href="https://wa.me/905001234567/" class="ww-text">Nasıl yardımcı olabiliriz?<div class="ww-arrow"></div></a>
<div class="ww-icon">
<div>
<a class="ww-icon-link" target="_blank" href="https://wa.me/905001234567/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d=" M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path>
</svg>
</a>
</div> </div> </div><style>
#whatsapp-widget {
position: fixed;
bottom: 20px;
height: max-content;
display: flex;
align-items: center;
gap: 20px;
z-index: 99999999;
visibility: hidden;
transition: all 2s ease 0s;
}
#whatsapp-widget.ww-yes {
visibility: visible;
}
#whatsapp-widget.ww-no {
visibility: hidden !important;
}
#whatsapp-widget .ww-icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
opacity: 0;
animation: grow 3s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#whatsapp-widget .ww-link {
opacity: 1;
display: block;
bottom: -15px;
text-align: center;
white-space: nowrap;
text-decoration: none;
width: 60px;
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 11px;
line-height: 11px;
border: 0px;
max-width: inherit;
color: rgb(175, 175, 175) !important;
}
#whatsapp-widget .ww-link:hover {
border: 0px;
text-decoration: underline !important;
color: rgb(175, 175, 175) !important;
}
#whatsapp-widget .ww-text {
border-radius: 8px;
border: 1px solid #e2e2e2;
cursor: pointer;
word-break: break-word;
background: white;
padding: 1rem;
position: relative;
box-shadow: 2px 2px 15px 2px rgb(0 0 0 / 17%);
opacity: 0;
animation: slide 1s;
animation-delay: 3s;
animation-fill-mode: forwards;
margin-bottom: 15px;
z-index: 100;
}
#whatsapp-widget .ww-arrow {
position: absolute;
background: white;
border-right: 0.5px solid #e2e2e2;
border-bottom: 0.5px solid #e2e2e2;
top: 50%;
width: 20px;
height: 20px;
z-index: -100;
}
#whatsapp-widget.ww-right .ww-arrow {
transform: translateY(-50%) rotate(-45deg);
right: -11px;
left: unset;
}
#whatsapp-widget.ww-left .ww-arrow {
left: -11px;
right: unset;
transform: translateY(-50%) rotate(135deg);
}
#whatsapp-widget.ww-big .ww-text {
font-size: 23px;
line-height: 25px;
}
#whatsapp-widget.ww-medium .ww-text {
font-size: 20px;
line-height: 22px;
padding: 15px;
}
#whatsapp-widget.ww-normal .ww-text {
font-size: 17px;
padding: 12px;
line-height: 19px;
}
#whatsapp-widget svg {
fill: rgb(255, 255, 255);
z-index: 1;
border-radius: 50px;
cursor: pointer;
transition: transform 0.7s ease-in-out;
width: 100%;
height: 100%;
stroke: none;
}
#whatsapp-widget svg:hover {
transform: rotate(720deg);
}
#whatsapp-widget.ww-right .ww-text::after {
right: -10px;
transform: translateY(-50%) rotate(-45deg);
}
#whatsapp-widget.ww-left .ww-text::after {
left: -10px;
transform: translateY(-50%) rotate(135deg);
}
#whatsapp-widget.ww-left {
left: 20px;
flex-direction: row-reverse;
}
#whatsapp-widget.ww-right {
right: 20px;
flex-direction: row;
}
#whatsapp-widget .ww-icon-link {
padding: 5px;
box-sizing: border-box;
border-radius: 50%;
cursor: pointer;
overflow: hidden;
box-shadow: rgb(0 0 0 / 40%) 2px 2px 6px;
transition: all 0.5s ease 0s;
position: relative;
z-index: 200;
display: block;
border: 0px;
background: rgb(77, 194, 71) !important;
}
#whatsapp-widget.ww-normal .ww-icon-link {
width: 50px;
height: 50px;
}
#whatsapp-widget.ww-medium .ww-icon-link {
height: 65px;
width: 65px;
}
#whatsapp-widget.ww-big .ww-icon-link {
height: 75px;
width: 75px;
}
#whatsapp-widget .ww-icon div {
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
#whatsapp-widget {
bottom: 5px;
}
#whatsapp-widget .ww-text {
display: none;
}
#whatsapp-widget.ww-right {
right: 5px;
left: unset;
}
#whatsapp-widget.ww-left {
left: 5px;
right: unset;
}
}
@keyframes slide {
from {
bottom: -20px;
opacity: 0;
}
to {
bottom: 0px;
opacity: 1;
}
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes grow {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
</style>
Widget (gadget) olarak eklemek için :
Blogger > Düzen > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz
Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.
