Item: Tạo 3 tiện ích chat page, hotline, liên hệ ẩn hiện cho blogger
Rating: 9.5
Author: Bùi Tấn Đạt

Bởi: Bùi Tấn Đạt - Lúc: 01:00

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:

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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUrFtNieumbuT9HmP1S6EBDssWf80b-RaKU2jQmdK0wzXJgwVmVLPQXk3ORjvipL7H8zULwTzSFcvWicLcTE8iAMwMk4dg9CihZBSeYIGrZZZOplzf1a6osLZE6pN4KOKXCLkti29jeKQ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQtVZbrcOP9Ozy8jVPhOwEXowIZxemrZ-F3GgJ7NUSGZKKf_CQYSM5NGJgz5FpehMPaIVRKbjzMtsf3h-HuJMvL0XN7mKijcCmrqpEbC6sTE_3RYTjqgmUnH-IVjf5swV6X2A5TmktPms/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgseSR7WqH3_rc2F14Rk3eokXtaWE0KB5DlPq-f8lsqPFkP05PxQUxk7Wj9AhbHsDBe-U-raGByZmXHSXnRo6BODy4SAxbyVHid0sg_lmlYnyLCAHulKD8Nt4cQAtzeBaPbvhr1XL4CaJY/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Uir9BADzDSLuyQrUizD5PMFVx3Cgv-CCdkB-urQW3kxFY8lBTFJduc3_n8qq8LHmuZxt6ZZGti7DJWdsFtu4iy2JZhUf1gjG-GO-i5sqDyAOD5B6dXmef2h2Mbj_NtLuHYZS8hYiD5k/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