Wordpress Sayfanın Altında Yanan Telefon Butonu

Tahribat.com Forumları
line

Webmaster ve Yazılım Geliştiriciler
line

Wordpress Sayfanın Altında Yanan Telefon Butonu

24/Kas/24 16:41

Kısayol

Şikayet

Özel Mesaj

EcHoLL

Kayıt Tarihi: 04/Eylül/2008

wordpress sayfanızın alt kısmına telefon ve whatsapp numarası ekleme tema fonksiyon dosyana ekle

function add_contact_buttons() {
   ?>
   <style>
       .contact-buttons {
        position: fixed;
        left: 50px; /* Telefon butonu sol tarafta kalacak */
        top: 95%; /* Daha aşağıya taşımak için değeri artırın */
        transform: translateY(-50%);
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 30px; /* Butonlar arası boşluk */
    }
       /* Telefon Butonu Stilleri */
       .call-now-button {
           display: block;
       }

       .call-icon {
           display: block;
           width: 60px;
           height: 60px;
           border-radius: 50%;
           background: #e60808;
           position: relative;
           animation: phone-outer 3000ms infinite;
       }

       .call-icon:before {
           content: '';
           position: absolute;
           width: 100%;
           height: 100%;
           top: 0;
           left: 0;
           background: #e60808;
           border-radius: 50%;
           animation: phone-outer-ring 1.5s infinite;
       }

       .call-icon:after {
           content: '';
           position: absolute;
           width: 100%;
           height: 100%;
           top: 0;
           left: 0;
           background: #e60808;
           border-radius: 50%;
           animation: phone-outer-ring 2s infinite;
       }

       .call-icon svg {
           position: absolute;
           width: 30px;
           height: 30px;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           fill: white;
       }

       /* WhatsApp Butonu Stilleri */
       .whatsapp-button {
           position: fixed; /* WhatsApp'ı bağımsız konumlandır */
           right: 50px; /* Sağ tarafa yerleştir */
           top: 95%; /* Dikeyde ortala */
           transform: translateY(-50%);
           z-index: 9999;
       }

       .whatsapp-icon {
           display: block;
           width: 60px;
           height: 60px;
           border-radius: 50%;
           background: #25D366;
           position: relative;
           animation: whatsapp-outer 3000ms infinite;
       }

       .whatsapp-icon:before {
           content: '';
           position: absolute;
           width: 100%;
           height: 100%;
           top: 0;
           left: 0;
           background: #25D366;
           border-radius: 50%;
           animation: phone-outer-ring 1.5s infinite;
       }

       .whatsapp-icon:after {
           content: '';
           position: absolute;
           width: 100%;
           height: 100%;
           top: 0;
           left: 0;
           background: #25D366;
           border-radius: 50%;
           animation: phone-outer-ring 2s infinite;
       }

       .whatsapp-icon svg {
           position: absolute;
           width: 35px;
           height: 35px;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           fill: white;
       }

       @keyframes phone-outer-ring {
           0% {
               transform: scale(1);
               opacity: 0.5;
           }
           100% {
               transform: scale(2);
               opacity: 0;
           }
       }

       /* Ortak Tooltip Stilleri */
       .button-text {
           position: absolute;
           left: 75px;
           top: 50%;
           transform: translateY(-50%);
           background: #fff;
           padding: 5px 10px;
           border-radius: 5px;
           box-shadow: 0 2px 5px rgba(0,0,0,0.2);
           white-space: nowrap;
           display: none;
           font-weight: bold;
       }

       .call-now-button:hover .button-text,
       .whatsapp-button:hover .button-text {
           display: block;
       }

       @media (max-width: 768px) {
           .contact-buttons {
               left: 20px;
           }

           .whatsapp-button {
               right: 20px; /* Mobilde sağ boşluğu azalt */
           }
       }
   </style>

   <div class="contact-buttons">
       <!-- Telefon Butonu -->
       <div class="call-now-button">
           <a href="tel:0532xxx0">
               <div class="call-icon">
                   <svg viewBox="0 0 24 24">
                       <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 00-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02c-.37-1.11-.56-2.3-.56-3.53c0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99C3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>
                   </svg>
               </div>
               <div class="button-text">
                  0532xxx0
               </div>
           </a>
       </div>
   </div>

   <!-- WhatsApp Butonu -->
   <div class="whatsapp-button">
       <a href="https://wa.me/0532xxx0?text=Servis%20talebi%20oluşturmak%20istiyorum" target="_blank">
           <div class="whatsapp-icon">
               <svg viewBox="0 0 24 24">
                   <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
               </svg>
           </div>
           <div class="button-text">
               Servis Talebi Oluştur
           </div>
       </a>
   </div>
   <?php
}
add_action('wp_footer', 'add_contact_buttons');

"Hayat zor olabilir ama ben de kolay sayılmam." insanları Silahsızlandırmak onları köleleştirmek için En iyi Yoldur.

Alıntı yap

24/Kas/24 16:42 Kısayol Şikayet Özel Mesaj

Bilirkişi
mkyb

Kayıt Tarihi: 27/Mayıs/2011

Bu gif yoksa olmaz. :D

Yaşlandıkça 50 liralık saatin ve 5.000 liralık saatin aynı şeyi gösterdiğini fark edeceksin. 1.000.000 liralık ve 100.000 liralık ev aynı yalnızlığı barındırır. 1.000 liralık Android ile 20.000 liralık iPhone Pro kimse aramadıktan sonra aynıdır. Materyalist şeylerde gerçek mutluluk bulunmaz. Asıl mutluluk bir çift memededir. Enflasyon yüzünden bu imzayı bir ara güncellemek lazım. Bin liraya telefon kalmadı. :(

Alıntı yap

Toplam Hit: 1129 Toplam Mesaj: 2
wordpress telefon butonu

Cevapla