Nút liên hệ như sau
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="echbay-sms-messenger style-for-position-br"> <div class="phonering-alo-alo"> <a href="tel:0903123456" rel="nofollow" class="echbay-phonering-alo-event">.</a> </div> <div class="phonering-alo-sms"> <a href="sms:0903123456" rel="nofollow" class="echbay-phonering-sms-event">.</a> </div> <div class="phonering-alo-zalo"> <a href="https://zalo.me/0903123456" target="_blank" rel="nofollow" class="echbay-phonering-zalo-event">.</a> </div> <div class="phonering-alo-messenger"> <a href="https://www.messenger.com/t/aiken.trung" target="_blank" rel="nofollow" class="echbay-phonering-messenger-event">.</a> </div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
.echbay-sms-messenger div.phonering-alo-zalo, .echbay-sms-messenger div.phonering-alo-alo { background-color:#0084ff } .echbay-sms-messenger div.phonering-alo-sms { background-color:#f60 } .echbay-sms-messenger div.phonering-alo-messenger { background-color:#e60f1e } .echbay-sms-messenger { width:45px } .echbay-sms-messenger a { line-height:45px; color: transparent; display:block; } .echbay-sms-messenger { display:block } .echbay-sms-messenger div.phonering-alo-zalo { display: block } .echbay-sms-messenger div.phonering-alo-alo { background-image: url(http://codfe.com/wp-content/uploads/2020/08/call.png); } .echbay-sms-messenger div.phonering-alo-sms { background-image: url(http://codfe.com/wp-content/uploads/2020/08/mail.png); background-color: #f60; background-size: 60%; } .echbay-sms-messenger div.phonering-alo-zalo { background-image: url(http://codfe.com/wp-content/uploads/2020/08/zalo.png); } .echbay-sms-messenger div.phonering-alo-messenger { background-image: url(http://codfe.com/wp-content/uploads/2020/08/messenger.png); background-color: #e60f1e; } .echbay-sms-messenger div { margin: 14px 0; background: #0084FF center no-repeat; background-size: 70%; border-radius: 50%; box-shadow: 0 3px 10px #888; } .echbay-sms-messenger { text-align: center; right:20px; position: fixed; bottom: 20px; z-index: 999; } |
Chúc các bạn thành công
Code này nếu muốn cho hiển thị ở bên trái hoặc phải có thay đổi được không AD
Thay đổi right thành left: 20px; như bên dưới nhé
.echbay-sms-messenger {text-align: center;
left: 20px;
position: fixed;
bottom: 20px;
z-index: 999;
}
Cam on