[Thủ Thuật WP] Tạo thanh liên hệ rung lắc dưới footer trong WordPress

Có rất nhiều cách để tạo 1 thanh liên hệ cho website như sử dụng plugin hoặc những đoạn code được chia sẻ trên mạng.

Tuy nhiên, dưới đây sẽ đoạn Code snippet hướng dẫn các bạn cách tạo thanh liên hệ rung lắc cực đẹp dưới footer theme WordPress trên giao diện mobile.

Tạo HTML cho thanh liên hệ

Copy và paste đoạn code này vào ngay đoạn mở thẻ body trong header.php (Giao diện > Chỉnh sửa > header.php) 

<div class="mmt-app">
    <div style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgb(142, 32, 32); opacity: 1; color: rgb(255, 255, 255); pointer-events: none; z-index: -1;">
    </div>
    <span class="mmt-menu__item" style="display: flex;">
        <div class="mt-tooltip">
            <span class="mmt-button call">
                <span>
                </span>
                <a href="tel:0354080393"><img alt="url" src="https://nguyenphudung.com/sites/default/files/2021-08/call_icon.png" class="mmt-button__icon mmt-button__icon--motion">
                    <span class="mmt-button__label" style="color: rgb(255, 255, 255);">Hotline</span>
            </span></a>
        </div>
    </span>
    <span class="mmt-menu__item" style="display: flex;">
        <div class="mt-tooltip">
            <span class="mmt-button facebook"><span>
                </span>
                <a href="https://nguyenphudung.com/"><img alt="url" src="https://nguyenphudung.com/sites/default/files/2021-08/facebook_icon.png" class="mmt-button__icon mmt-button__icon--motion">
                    <span class="mmt-button__label" style="color: rgb(255, 255, 255);">Facebook</span></a>
            </span>
        </div>
    </span>
    <span class="mmt-menu__item" style="display: flex;">
        <div class="mt-tooltip">
            <span class="mmt-button zalo">
                <span>
                </span>
                <a href="https://nguyenphudung.com/"><img alt="url" src="https://nguyenphudung.com/sites/default/files/2021-08/zalo_icon.png" class="mmt-button__icon mmt-button__icon--motion">
                    <span class="mmt-button__label" style="color: rgb(255, 255, 255);">Zalo</span></a>
            </span>
        </div>
    </span>
    <span class="mmt-menu__item" style="display: flex;">
        <span class="mmt-button contact">
            <span>
            </span>
            <a href="https://nguyenphudung.com/"><img alt="url" src="https://nguyenphudung.com/sites/default/files/2021-08/contact_icon.png" class="mmt-button__icon">
                <span class="mmt-button__label" style="color: rgb(255, 255, 255);">Chat Trực Tiếp </span></a>
        </span>
    </span>
</div>

Thay số điện thoại và đường link của bạn

Tạo CSS cho thanh liên hệ

.mmt-container--fit .mmt-app,
.mmt-app {
  display: none;
}
@media (max-width: 767px) {
  .mmt-container--fit .mmt-app {
    display: inline-flex;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
  }
  .mmt-app {
    position: fixed;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    min-height: 56px;
    transition: all 0.24s;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
      Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
      Segoe UI Symbol;
    bottom: 0;
    z-index: 999;
    width: 100%;
  }
  .mmt-menu__item {
    pointer-events: auto;
  }
  .mt-tooltip {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
  }
  .mmt-button {
    background-color: hsla(0, 0%, 100%, 0.2);
  }
  .mmt-button {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0 10px;
    flex-direction: row;
    cursor: pointer;
    position: relative;
    justify-content: flex-start;
    border-radius: 3px;
    height: 40px;
    margin: 10px 5px;
  }
  .mmt-button__icon--motion {
    animation: tada 1.2s infinite;
  }
  .mmt-button__icon {
    width: 20px;
    height: 20px;
    margin-right: 3px;
    box-sizing: border-box;
  }
  .mmt-container--fit .mmt-button__label {
    white-space: nowrap;
  }
  .mmt-button__label {
    font-size: 9px;
    line-height: 20px;
  }
  .mmt-button__icon--motion {
    animation: tada 1.2s infinite;
  }
  @keyframes tada {
    0% {
      transform: scale(1);
    }
    10%,
    20% {
      transform: scale(0.9) rotate(-3deg);
    }
    30%,
    50%,
    70%,
    90% {
      transform: scale(1.1) rotate(3deg);
    }
    40%,
    60%,
    80% {
      transform: scale(1.1) rotate(-3deg);
    }
    100% {
      transform: scale(1) rotate(0);
    }
  }
}

Quay lại trang chủ để kiểm tra code đã hoạt động chưa. Mình chỉ cho hiển thị ở mobile, nếu bạn nào muốn hiển thị ở cả deskop thì xoá đoạn CSS này đi nhé

.mmt-container--fit .mmt-app,.mmt-app {
    display:none;
}

Image