Hướng dẫn thêm nút liên hệ 1
Bạn có thể dán code script bằng các cách sau:
- Cách 1: Vào Giao diện → Tùy biến → Advanced (Nâng cao) cuộn xuống Custom JS (JavaScript tùy chỉnh)
- Cách 2: tạo file .js riêng và enqueue nó trong functions.php
- Cách 3: Dùng UX Blocks (theme Flatsome) hoặc các plugin có mục dán code js như Code Snippets ,…
- Cách 4: Riêng theme Flatsome: wp-admin/admin.php?page=optionsframework . Vào Flatsome → Advanced → Global Setting → Footer Scripts
<div id="sp-live" class="follow-scroll-splive"> <div class="splive-top"> <div class="icon-box"> <a href="https://zalo.me/0902299161" class="icon-link" rel="nofollow" target="_blank" title="Chat Zalo"> <div class="icon-background"> <img src="https://webdy.vn/public/files/uploads/2024/03/i-zalo.svg" alt="Chat Zalo" class="icon"> <div class="hover-content i-zalo"> Chat Zalo</div> </div> </a> </div> <div class="icon-box"> <a href="https://m.me/webdy.vn" class="icon-link" rel="nofollow" target="_blank" title="Messenger"> <div class="icon-background"> <img src="https://webdy.vn/public/files/uploads/2024/03/i-messenger.svg" alt="Messenger" class="icon"> <div class="hover-content i-messager"> Messenger</div> </div> </a> </div> <div class="icon-box"> <a href="https://api.whatsapp.com/send?phone=+84902299161" class="icon-link" rel="nofollow" target="_blank" title="Whatsapp"> <div class="icon-background"> <img src="https://webdy.vn/public/files/uploads/2024/03/i-whatsapp.svg" alt="Whatsapp" class="icon"> <div class="hover-content i-whatsapp"> Whatsapp</div> </div> </a> </div> <div class="icon-box"> <a href="tel:0902299161" class="icon-link" rel="nofollow" target="_blank" title="0902299161"> <div class="icon-background"> <img src="https://webdy.vn/public/files/uploads/2024/03/i-call.svg" alt="0902299161" class="icon"> <div class="hover-content i-call"> 0902299161</div> </div> </a> </div> <div class="icon-box"> <a href="mailto:[email protected]" class="icon-link" rel="nofollow" target="_blank" title="Gửi Mail"> <div class="icon-background"> <img src="https://webdy.vn/public/files/uploads/2024/03/i-mail.svg" alt="Gửi Mail" class="icon"> <div class="hover-content i-gmail"> Gửi Mail</div> </div> </a> </div> </div> </div> <style> a { background: 0 0; } a:active, a:hover { outline: 0; } img { border: 0; } @media print { * { color: #000 !important; text-shadow: none !important; background: transparent !important; -webkit-box-shadow: none !important; box-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } img { page-break-inside: avoid; } img { max-width: 100% !important; } } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { color: #428bca; text-decoration: none; } a:hover, a:focus { color: #2a6496; text-decoration: underline; } a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } img { vertical-align: middle; } /*! CSS */ .follow-scroll-splive { position: fixed; right: 0px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; z-index: 1; } .follow-scroll-splive .icon-box { position: relative; margin: 5px 0; display: flex; justify-content: flex-end; } .follow-scroll-splive .icon-link { position: relative; text-decoration: none; display: flex; align-items: center; } .follow-scroll-splive .icon-background { display: flex; align-items: center; background-color: #f6f9ff; padding: 12px; border-radius: 8px; transition: transform 0.3s ease, width 0.3s ease; width: 56px; overflow: hidden; white-space: nowrap; margin-right: 10px; } .follow-scroll-splive .icon { width: 32px; height: 32px; cursor: pointer; } .follow-scroll-splive .hover-content { opacity: 0; visibility: hidden; margin-left: 10px; font-size: 14px; transition: opacity 0.3s ease; } .follow-scroll-splive .icon-box:hover .icon-background { width: auto; transform: translateX(0px); } .follow-scroll-splive .icon-box:hover .hover-content { opacity: 1; visibility: visible; transition: opacity 0.3s ease 0.1s; } .follow-scroll-splive .icon-box .hover-content { color: #002499; text-align: center; font-family: "r_bold"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 16px; } .follow-scroll-splive .icon-box .i-zalo { color: #0068ff; } .follow-scroll-splive .icon-box .i-whatsapp { color: #67d449; } /*! CSS fontfaces */ @font-face { font-family: "r_bold"; } </style>
Chào ! Bạn thấy nội dung này thế nào?
