Tạo 3 tiện ích chat page, hotline, liên hệ ẩn hiện cho blogger



Thủ thuật tạo 3 tiện ích là like box fanpage kèm chat fanpage + Hotline kèm sđt liên hệ + trang liên hệ nằm ở góc phải của trang blog.



Xem ảnh demo:

1. Chèn toàn bộ code bên dưới vào trên thẻ /body

<!--=== BEGIN: SITE PHẢI ===-->
        <div class='site_supporrt'>
            <div class='ss_item window_popup'>
              <div class='i_title'><img alt='' src='https://2.bp.blogspot.com/-z0740NZlBqI/WWcXldeeWaI/AAAAAAAAJ_Y/WL_QSa5m7XcIPQqgyq2nLG058WO-7gZ7QCLcBGAs/s1600/img_face.png' title=''/></div>
                <div class='i-content' style='border-color: #193c86'><div class='fb-page' data-adapt-container-width='true' data-height='400' data-hide-cover='false' data-href='https://www.facebook.com/huynhphungblogger' data-show-facepile='true' data-show-posts='false' data-small-header='false' data-tabs='messages' data-width='250'/></div>
            </div>
            <div class='ss_item window_popup'>
                <div class='i_title'><img alt='' src='https://3.bp.blogspot.com/-ij15GvXxCsM/WWcX1FuY5UI/AAAAAAAAJ_c/Dg7UJ92AbuoGhQ7f_xqECScM-Xr5jjgswCLcBGAs/s1600/img_hotline.png' title=''/></div>
                <div class='i-content' style='border-color: #1387c0'>
                    <div class='ss_online'>
                        <div>Liên hệ hỗ trợ</div>
                        <a class='number_phone' href='tel:0932913631'><i class='fa fa-phone'/>0932.913.631</a>
                        <ul>
                            <li>
                                <a href='#'><img alt='' src='https://3.bp.blogspot.com/-RPZ6c-rKOVA/WWcYL0n46_I/AAAAAAAAJ_g/xOSxdvT_X7U1k6haYjnrZa0LercMoLvOwCLcBGAs/s1600/icon-skype.png' title=''/><span>skype</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class='ss_item1'>
              <div class='i_title'><a href='/p/contact.html'><img alt='' src='https://3.bp.blogspot.com/-jAz7UJPaiZ4/WWcYc2Ea0EI/AAAAAAAAJ_k/DJcJYnGoRvwzFivZEppYW9dx9CRI5MwdgCLcBGAs/s118/img_contact.png' title=''/></a></div>
            </div>
        </div>
        <!--=== END: SITE PHẢI ===-->
<style>
.site_supporrt .ss_item1{    pointer-events: auto;
    position: relative;
    margin-bottom: 5px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;}
.site_supporrt{z-index:999999;position:fixed;pointer-events:none;top:50%;right:0;z-index:100;-webkit-transform:translate(0,-50%);-moz-transform:translate(0,-50%);-o-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%)}
.site_supporrt .ss_item{pointer-events:auto;position:relative;margin-bottom:5px;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.site_supporrt .ss_item .i_title{width:40px;cursor:pointer}
.site_supporrt .ss_item .i-content{position:absolute;top:0;left:100%;border:1px solid;border-right:0;width:290px;padding:12px 9px;background:#fff}.site_supporrt .ss_item:hover{z-index:1;-webkit-transform:translate(290px,0);-moz-transform:translate(290px,0);-o-transform:translate(290px,0);-ms-transform:translate(290px,0);transform:translate(-290px,0)}.site_supporrt .ss_item .ss_online{padding-left:13px;font-size:16px;line-height:25px}
.ss_online .number_phone{padding:5px 0;font-size:20px;line-height:25px;font-weight:bold;color:#007dbb}.ss_online .number_phone i{font-size:20px;line-height:25px;padding-right:10px;color:#303030}
.ss_online ul{margin:10px 0}.ss_online ul li{display:inline-block;vertical-align:top;margin-right:25px}.ss_online ul li img{width:26px;margin-right:10px}
.ss_online ul li a{font-size:16px;line-height:25px}
</style>

2. Chèn dưới thẻ <body> mã script để hiện fanpage

<div id='fb-root'/><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = &quot;//connect.facebook.net/vi_VN/all.js#xfbml=1&quot;;fjs.parentNode.insertBefore(js, fjs);}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

P/s nếu trang blog nào đã có mã script này rồi thì bỏ qua bước 2
Lưu lại và xem kết quả nhé

Chúc bạn thành công!
Tôi Là Quản Trị Blog



Có thể bạn thích

Hãy cùng tham gia bình luận về bài viết này nhé!