Chào bạn! hôm nay VeoSpot.com chia sẻ miễn phí code button chat zalo, facebook giống như nút ở trên website VeoSpot đang sử dụng, tại thời điểm hiện tại.
Để làm được điều này thì rất đơn giản bạn chỉ cần xem video và làm theo hướng dẫn từng bước mà tui làm nha.
 |
| Chia Sẻ Code Button Chat Zalo Facebook Trên Website Blog |
Cách 1 dán vào nơi cần hiển thị
Bước 1: bạn và trang quản trị blog của mình và chọn nút Themes (Chủ đê)-->Chỉnh sửa HTML
Bước 2: Past (Dán) đoạn code CSS ở bên dưới.
CSS nằm trong b:skin hoặc nằm trong style
@media (min-width:767px){.the-article-tools{width:40px;position:fixed;top:40%;left:0;list-style:none;z-index:999;margin:0;background:#f7f7f7;border:1px solid #e4e4e4;border-left:0;border-top-right-radius:5px;border-bottom-right-radius:5px}.the-article-tools li{width:40px;height:40px;line-height:42px;float:left;display:block;cursor:pointer;font-size:16px;text-align:center!important;position:relative;margin:0 5px 0 0!important;border:0!important}.the-article-tools li a{color:#888;display:block!important;padding:0!important;width:100%;height:100%}.the-article-tools li a span{color:#888}.the-article-tools li span.label{display:none;height:30px;line-height:30px;border-top-right-radius:15px;border-bottom-right-radius:15px;position:absolute;left:60px;top:7px;white-space:nowrap;padding:0 15px 0 6px;background:#444;color:var(--white-color);font-size:12px}.the-article-tools li span.label:before{content:"";top:0;left:-15px;position:absolute;display:block;width:0;height:0;border-top:15px solid transparent;border-right:15px solid #444;border-bottom:15px solid transparent}.the-article-tools li.btnFacebook span.label{background:#306199;color:var(--white-color)}.the-article-tools li.btnFacebook span.label:before{border-right-color:#306199}.the-article-tools li.btnZalo span.label{background:#018fe5;color:var(--white-color)}.the-article-tools li.btnZalo span.label:before{border-right-color:#018fe5}.the-article-tools li.btnZalo .ti-zalo{background:url(https://3.bp.blogspot.com/-dhxUC-4idPI/XQcPWomMiwI/AAAAAAAAQ3c/ZJi45O6wlE8jrRzPxs6bZXUSHn0-YJjIgCLcBGAs/s1600/icon_zalo.png) no-repeat 50% 50%;width:40px;height:40px;display:inline-block;background-size:20px!important;vertical-align:middle;margin-right:2px;position:relative;top:-2px}.the-article-tools li.btnZalo:hover .ti-zalo{background-size:24px!important;background-position:50% 45%!important}.the-article-tools li.btnEmail{background:#fcb400}.the-article-tools li.btnEmail span.label{background:#00AEE8;color:var(--white-color)}.the-article-tools li.btnFontStyle{font-size:10px;display:none}.the-article-tools li.btnFontSize{display:none}.the-article-tools li.btnComment{height:auto}.the-article-tools li.btnComment a{display:inline-block}.the-article-tools li.btnComment span.label{background:#1eaf8b;color:var(--white-color)}.the-article-tools li.btnComment span.label:before{border-right-color:#1eaf8b}.the-article-tools li.btnComment span.counter{display:none}.the-article-tools li.btnError span.label{background:#dc0000;color:var(--white-color)}.the-article-tools li.btnError span.label:before{border-right-color:#dc0000}.the-article-tools li:hover{font-size:20px;line-height:44px}.the-article-tools li:hover span.label{display:block}.the-article-tools li:hover.btnFacebook a{font-size:20px}.the-article-tools li:hover.btnFacebook a span{color:#4368D2}.the-article-tools li:hover.btnError a span{color:#c10000}.the-article-tools li:hover.btnComment a span{color:#000}}@media(max-width:767px){.the-article-tools{display:none!important}}.the-article-share{-js-display:flex;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;padding:15px 0 0;position:relative}@media (min-width:320px){.the-article-share{margin:0 -5px}.the-article-share span{width:50%;padding:0 5px}}.the-article-share a.btnFacebook:before{content:"";position:absolute;display:block;top:0;left:0;width:40px;height:40px;line-height:40px;border-right:1px solid rgba(255,255,255,0.2);background:url(https://3.bp.blogspot.com/-3PVhnimoKpQ/XMVLezSS-tI/AAAAAAAAP4g/QH3BmwQaUeMT-BgGlzjydjiOqXzZKvB_gCLcBGAs/s1600/messenger.png) no-repeat 50% 50%;background-size:24px}.the-article-share a.btnZalo:before{content:"";position:absolute;display:block;top:0;left:0;width:40px;height:40px;line-height:40px;border-right:1px solid rgba(255,255,255,0.2);background:url(https://3.bp.blogspot.com/-Ccq6nOfDYyM/XQcPe-rqa_I/AAAAAAAAQ3g/MxZhYpCOtK0jc2HJT0ZL0nIAueoH7_UCQCLcBGAs/s1600/icon_zalomessage.png) no-repeat 50% 50%;background-size:24px}.the-article-share.bottom .btnFacebook:before,.the-article-share.bottom .btnZalo:before{display:inline-block;height:35px;line-height:35px;margin-right:5px;border:0;position:relative;vertical-align:middle}.the-article-share a{display:block;height:35px;line-height:35px;font-family:sans-serif;font-size:15px;color:#fff;text-align:center;border-radius:3px}.the-article-share a.btnFacebook{background:#09f}.the-article-share a.btnZalo{background:#018fe5}
Bước 3: Dán đoạn code HTML bên dưới vào nời bạn muốn nó hiển thị.
<div class="the-article-share bottom"><span class="facebook-share-button"><a class="btnFacebook" href="https://m.me/levinhteam" rel="noopener nofollow" target="_blank" title="Chat Facebook">Chat Facebook</a></span><span class="zalo-share-button"><a class="btnZalo" href="https://zalo.me/0362113321" rel="noopener nofollow" target="_blank" title="Chat Zalo">Chat Zalo</a></span></div>
Bước 4: Lưu lại giao diện. và trải nghiệm thôi.
Cách 2 dán vào HTML/Javascript
Dán trong đoạn HTML/Javascript là cách dễ dàng nhất bạn cũng có thể áp dụng cách này cũng được nhé.
<style>@media (min-width:767px){
.the-article-tools{width:40px;position:fixed;top:40%;left:0;list-style:none;z-index:999;margin:0;background:#f7f7f7;border:1px solid #e4e4e4;border-left:0;border-top-right-radius:5px;border-bottom-right-radius:5px}
.the-article-tools li{width:40px;height:40px;line-height:42px;float:left;display:block;cursor:pointer;font-size:16px;text-align:center!important;position:relative;margin:0 5px 0 0!important;border:0!important}
.the-article-tools li a{color:#888;display:block!important;padding:0!important;width:100%;height:100%}
.the-article-tools li a span{color:#888}
.the-article-tools li span.label{display:none;height:30px;line-height:30px;border-top-right-radius:15px;border-bottom-right-radius:15px;position:absolute;left:60px;top:7px;white-space:nowrap;padding:0 15px 0 6px;background:#444;color:var(--white-color);font-size:12px}
.the-article-tools li span.label:before{content:"";top:0;left:-15px;position:absolute;display:block;width:0;height:0;border-top:15px solid transparent;border-right:15px solid #444;border-bottom:15px solid transparent}
.the-article-tools li.btnFacebook span.label{background:#306199;color:var(--white-color)}
.the-article-tools li.btnFacebook span.label:before{border-right-color:#306199}
.the-article-tools li.btnZalo span.label{background:#018fe5;color:var(--white-color)}
.the-article-tools li.btnZalo span.label:before{border-right-color:#018fe5}
.the-article-tools li.btnZalo .ti-zalo{background:url(https://3.bp.blogspot.com/-dhxUC-4idPI/XQcPWomMiwI/AAAAAAAAQ3c/ZJi45O6wlE8jrRzPxs6bZXUSHn0-YJjIgCLcBGAs/s1600/icon_zalo.png) no-repeat 50% 50%;width:40px;height:40px;display:inline-block;background-size:20px!important;vertical-align:middle;margin-right:2px;position:relative;top:-2px}
.the-article-tools li.btnZalo:hover .ti-zalo{background-size:24px!important;background-position:50% 45%!important}
.the-article-tools li.btnEmail{background:#fcb400}
.the-article-tools li.btnEmail span.label{background:#00AEE8;color:var(--white-color)}
.the-article-tools li.btnFontStyle{font-size:10px;display:none}
.the-article-tools li.btnFontSize{display:none}
.the-article-tools li.btnComment{height:auto}
.the-article-tools li.btnComment a{display:inline-block}
.the-article-tools li.btnComment span.label{background:#1eaf8b;color:var(--white-color)}
.the-article-tools li.btnComment span.label:before{border-right-color:#1eaf8b}
.the-article-tools li.btnComment span.counter{display:none}
.the-article-tools li.btnError span.label{background:#dc0000;color:var(--white-color)}
.the-article-tools li.btnError span.label:before{border-right-color:#dc0000}
.the-article-tools li:hover{font-size:20px;line-height:44px}
.the-article-tools li:hover span.label{display:block}
.the-article-tools li:hover.btnFacebook a{font-size:20px}
.the-article-tools li:hover.btnFacebook a span{color:#4368D2}
.the-article-tools li:hover.btnError a span{color:#c10000}
.the-article-tools li:hover.btnComment a span{color:#000}
}
@media(max-width:767px){.the-article-tools{display:none!important}}
.the-article-share{-js-display:flex;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;padding:15px 0 0;position:relative}
@media (min-width:320px){.the-article-share{margin:0 -5px}.the-article-share span{width:50%;padding:0 5px}}
.the-article-share a.btnFacebook:before{content:"";position:absolute;display:block;top:0;left:0;width:40px;height:40px;line-height:40px;border-right:1px solid rgba(255,255,255,0.2);background:url(https://3.bp.blogspot.com/-3PVhnimoKpQ/XMVLezSS-tI/AAAAAAAAP4g/QH3BmwQaUeMT-BgGlzjydjiOqXzZKvB_gCLcBGAs/s1600/messenger.png) no-repeat 50% 50%;background-size:24px}
.the-article-share a.btnZalo:before{content:"";position:absolute;display:block;top:0;left:0;width:40px;height:40px;line-height:40px;border-right:1px solid rgba(255,255,255,0.2);background:url(https://3.bp.blogspot.com/-Ccq6nOfDYyM/XQcPe-rqa_I/AAAAAAAAQ3g/MxZhYpCOtK0jc2HJT0ZL0nIAueoH7_UCQCLcBGAs/s1600/icon_zalomessage.png) no-repeat 50% 50%;background-size:24px}
.the-article-share.bottom .btnFacebook:before,.the-article-share.bottom .btnZalo:before{display:inline-block;height:35px;line-height:35px;margin-right:5px;border:0;position:relative;vertical-align:middle}
.the-article-share a{display:block;height:35px;line-height:35px;font-family:sans-serif;font-size:15px;color:#fff;text-align:center;border-radius:3px}
.the-article-share a.btnFacebook{background:#09f}
.the-article-share a.btnZalo{background:#018fe5}</style>
<div class="the-article-share bottom"> <span class="facebook-share-button"> <a class="btnFacebook" href="https://m.me/levinhteam" rel="noopener nofollow" target="_blank" title="Chat Facebook">Chat Facebook</a> </span> <span class="zalo-share-button"> <a class="btnZalo" href="https://zalo.me/0362113321" rel="noopener nofollow" target="_blank" title="Chat Zalo">Chat Zalo</a> </span> </div>
=> Thế là bạn đã có được đoạn code như trên rồi.
Bạn có thắc mắc gì thì xin vui lòng liên hệ với lê vinh nhé
❤Chúc bạn thành công!