Demo:
Các bạn chèn code sau vào file : Footer.php nhé
Sau đó thay đường link facebook trong code nhé
Code:
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<style> .call-mobile {background: #ED1C24;position: fixed;bottom: 10px;height: 40px;line-height: 40px; padding: 0 0px 0 0px;border-radius: 40px;color: #fff;left: 20px;z-index: 99999; } .call-mobile1 {position: fixed;bottom: 52px;height: 40px;line-height: 40px; padding: 0 0px 0 0px;border-radius: 40px;color: #fff;left: 20px;z-index: 99999; } .call-mobile i {font-size: 20px;line-height: 40px;background: #B52026; border-radius: 100%;width: 40px;height: 40px; text-align: center; float: right; } .call-mobile a {color: #fff;font-size: 18px;font-weight: bold; text-decoration: none; margin-right: 10px; padding-left: 10px;} .ctrlq.fb-button { z-index: 999; background: url(http://namdinhweb.net/wp-content/uploads/2018/07/54.jpg) center no-repeat #0084ff; width: 60px; height: 60px; text-align: center; bottom: 10px; border: 0; outline: 0; border-radius: 60px; -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; -o-border-radius: 60px; box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16); -webkit-transition: box-shadow .2s ease; background-size: 80%; transition: all .2s ease-in-out; } .bubble { width: 20px; height: 20px; background: #c00; color: #fff; position: absolute; z-index: 999999999; text-align: center; vertical-align: middle; top: -2px; left: -5px; border-radius: 50%; } .ctrlq.fb-overlay { z-index: 0; position: fixed; height: 100vh; width: 100vw; -webkit-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s; top: 0; left: 0; background: rgba(0, 0, 0, .05); display: none; } .fb-widget { background: #fff; z-index: 1000; position: fixed; width: 360px; height: 435px; overflow: hidden; opacity: 0; bottom: 0; right: 24px; border-radius: 6px; -o-border-radius: 6px; -webkit-border-radius: 6px; box-shadow: 0 5px 40px rgba(0, 0, 0, .16); -webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, .16); -moz-box-shadow: 0 5px 40px rgba(0, 0, 0, .16); -o-box-shadow: 0 5px 40px rgba(0, 0, 0, .16); } .bubble-msg { width: 120px; left: -140px; top: 5px; position: relative; background: rgba(59, 89, 152, .8); color: #fff; padding: 5px 8px; border-radius: 8px; text-align: center; font-size: 13px; } .ctrlq.fb-button, .ctrlq.fb-close { position: fixed; right: 24px; cursor: pointer; } .ctrlq.fb-button:focus, .ctrlq.fb-button:hover { transform: scale(1.1); box-shadow: 0 2px 8px rgba(0, 0, 0, .09), 0 4px 40px rgba(0, 0, 0, .24); } </style> <a href="http://fb.com/chupy91" title="Gửi tin nhắn cho chúng tôi qua Facebook" class="ctrlq fb-button"> <div class="bubble">1</div><div class="bubble-msg">Bạn cần hỗ trợ?</div></a> |