News Chèn các nút icon chát zalo điện thoại whatsApp vào website

Chèn các nút icon chát zalo điện thoại whatsApp vào website

    Learn code website

    Để chèn Chèn icon chát zalo điện thoại whatsApp vào website bạn dán đoạn code này vào HTML trong phần footer :

    <div class="social-button">
    <div class="social-button-content">
    <a href="tel:0347987766" class="call-icon" rel="nofollow">
    <i class="fa fa-whatsapp" aria-hidden="true"></i>
    <div class="animated alo-circle"></div>
    <div class="animated alo-circle-fill "></div>
    <span>Hotline:0347 987 766</span>
    </a>
    <a href="sms:0347987766" class="sms">
    <i class="fa fa-weixin" aria-hidden="true"></i>
    <span>SMS: 0347 987 766</span>
    </a>
    <a href="https://www.facebook.com/mypassion2018/" class="mes">
    <i class="fa fa-facebook-square" aria-hidden="true"></i>
    <span>Nhắn tin Facebook</span>
    </a>
    <a href="http://zalo.me/0347987766" class="zalo">
    <i class="fa fa-commenting-o" aria-hidden="true"></i>
    <span>Zalo: 0347 987 766</span>
    </a>
    </div> 
    <a class="user-support">
    <i class="fa fa-user-circle-o" aria-hidden="False"></i>
    <div class="animated alo-circle"></div>
    <div class="animated alo-circle-fill"></div>
    </a>
    </div>

    CSS thêm để trang trí cho đẹp

    <style>
    .social-button{
    display: inline-grid;
    position: fixed;
    bottom: 15px;
    left: 45px;
    min-width: 45px;
    text-align: center;
    z-index: 99999;
    }
    .social-button-content{
    display: inline-grid; 
    }
    .social-button a {padding:8px 0;cursor: pointer;position: relative;}
    .social-button i{
    width: 40px;
    height: 40px;
    background: #43a1f3;
    color: #fff;
    border-radius: 100%;
    font-size: 20px;
    text-align: center;
    line-height: 1.9;
    position: relative;
    z-index: 999;
    }
    .social-button span{
    display: none;
    }
    .alo-circle {
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: zoomIn;
    width: 50px;
    height: 50px;
    top: 3px;
    right: -3px;
    position: absolute;
    background-color: transparent;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid rgba(30, 30, 30, 0.4);
    opacity: .1;
    border-color: #0089B9;
    opacity: .5;
    }
    .alo-circle-fill {
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: pulse;
    width: 60px;
    height: 60px;
    top: -2px;
    right: -8px;
    position: absolute;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid transparent;
    background-color: rgba(0, 175, 242, 0.5);
    opacity: .75;
    }
    .call-icon:hover > span, .mes:hover > span, .sms:hover > span, .zalo:hover > span{display: block}
    .social-button a span {
    border-radius: 2px;
    text-align: center;
    background: rgb(103, 182, 52);
    padding: 9px;
    display: none;
    width: 180px;
    margin-left: 10px;
    position: absolute;
    color: #ffffff;
    z-index: 999;
    top: 9px;
    left: 40px;
    transition: all 0.2s ease-in-out 0s;
    -moz-animation: headerAnimation 0.7s 1;
    -webkit-animation: headerAnimation 0.7s 1;
    -o-animation: headerAnimation 0.7s 1;
    animation: headerAnimation 0.7s 1;
    }
    @-webkit-keyframes "headerAnimation" {
    0% { margin-top: -70px; }
    100% { margin-top: 0; }
    }
    @keyframes "headerAnimation" {
    0% { margin-top: -70px; }
    100% { margin-top: 0; }
    }
    .social-button a span:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent rgb(103, 182, 52) transparent transparent;
    position: absolute;
    left: -10px;
    top: 10px;
    }
    </style>
    <script>
    $(document).ready(function(){
    $('.user-support').click(function(event) {
    $('.social-button-content').slideToggle();
    });
    });
    </script>

     

    Bổ sung thêm đoạn code khung chứa code trong bài viết:

    <div style="background-color: #f4f4f4; border-bottom: gray 1px solid; border-left: gray 1px solid; border-right: gray 1px solid; border-top: gray 1px solid; cursor: text; font-family: consolas, 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 20px 0px 10px; max-height: 200px; overflow: auto; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; width: 97.5%;">
    <pre style="background-color: #f4f4f4; border-bottom-style: none; border-left-style: none; border-right-style: none; border-top-style: none; color: black; font-family: consolas, 'Courier New', courier, monospace; font-size: 8pt; line-height: 12pt; margin: 0em; overflow: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 100%;">nội dung bạn muốn nhập</pre>
    </div>

    Nguồn: ST

     

     

    205