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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4__avsFsZ8-y5cM3wdGi3EdB_8sLUaefo8J4EMx6zEP4ArbGGRQ5uDjYKU8LqFa08SHCqpNN5_J9AvJcpRjTgcF68wfpg0RAjgtKrmR-_Wx_kY-VxjinIAneQ7vfJRJEwoVvrCp08V14/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/AVvXsEhc-vkZGbvhl69iGm8HF7uqA1T_rEXov7yTohMk38UcmTaLlUHujjHxfOzsfKW0txXVdRNgGV2gqvA_yaGfgwNcQvmkN8HGEeq_pqGyHPuhkw7YN2km-Vi4DdCGPM14NuEey1vEeDMl6hc/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/AVvXsEi1V8g4ItYtxcMb2Vf7Qmx_zRvBOyT13a2JmiPrYDxaV7v8fBit0TrCY-WpBJgO-ZB6gO9HCyjZ8xrG46nIDMM-BsFM_KEWARg8gg7ZOskUeClKZmjbdsgHSVBSRBi2S6FShKcJ9lkN8Fs/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/AVvXsEhIa2b2nUCcCTnn3qZLJ-SrHNDTKOprd8gmlGmQ6Hs5OtDwZ3sf4XCe3HGJyzys_2thKYxBPiflz6ZBONF26FMleA0QTmYF5MBxc4qGY2jPDWQ6GnxEGEKdIGzfNujZ-8gaWIowxe3P-0Q/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!
Huỳnh Phụng Blogger

TLQT là Blog chia sẻ kiến thức về Marketing, Digital Marketing, Kinh nghiệm làm SEO, Tối ưu Website và nhiều thứ khác

Mới hơn Cũ hơn

POST ADS1

POST ADS 2