Sau đây mình hướng dẫn các bạn cách thêm tiện ích liên hệ cho blogspot bao gồm nút gọi điện, liên hệ, zalo, facebook.
Khi cuộn trang thì tiện ích liên hệ sẽ hiển thị, rất tiện cho các trang blogspot bán hàng, dịch vụ, liên hệ.
Code được chia sẻ bởi thietkeblogspot
Bước 1: Thêm CSS trước thẻ đóng </b:skin>
.echbay-sms-messenger{position:fixed;top:50%;right:0;transform:translate(-0,-50%);z-index:999!important;display:none}.echbay-sms-messenger div{width:45px;margin:7px 0;background:#0084FF center no-repeat;background-size:70%;border-radius:50%}.echbay-sms-messenger div:first-child{margin-top:0}.echbay-sms-messenger div:last-child{margin-bottom:0}.echbay-sms-messenger a{display:block;line-height:45px}.echbay-sms-messenger div.phonering-alo-alo{background-color:#0080c0}.echbay-sms-messenger div.phonering-alo-zalo{background-color:#008df2}.echbay-sms-messenger div.phonering-alo-alo{background-image:url(https://4.bp.blogspot.com/-jmEjGbocGyU/XMVLejoHBYI/AAAAAAAAP4Y/XcUFUyib88UyzwTLSGy5efm95mK9spQ8ACLcBGAs/s1600/call.png)}.echbay-sms-messenger div.phonering-alo-sms{background-image:url(https://3.bp.blogspot.com/-9nBxaOD1dpw/XMVLe_cahmI/AAAAAAAAP4c/Ng3izEE1R9UF0UahDJbeW5_lklFS6zN2gCLcBGAs/s1600/mail.png);background-color:#00a651;background-size:60%}.echbay-sms-messenger div.phonering-alo-messenger{background-image:url(https://3.bp.blogspot.com/-3PVhnimoKpQ/XMVLezSS-tI/AAAAAAAAP4g/QH3BmwQaUeMT-BgGlzjydjiOqXzZKvB_gCLcBGAs/s1600/messenger.png);background-color:#0084FF}.echbay-sms-messenger div.phonering-alo-zalo{background-image:url(https://2.bp.blogspot.com/-s6IG0XrlsH0/XMVLfdP_ViI/AAAAAAAAP4k/nB8w5n9LFpU5lHWKpjQkdXlQpZAIKU8lACLcBGAs/s1600/zalo.png)}
Bước 2: Thêm HTML trước thẻ đóng </body>
<div class='echbay-sms-messenger'><div class='phonering-alo-alo'><a href='tel:+84123456789' rel='nofollow' title='Yêu cầu gọi lại'>.</a></div><div class='phonering-alo-sms'><a href='sms:+84123456789' rel='nofollow' title='Gửi tin nhắn'>.</a></div><div class='phonering-alo-zalo'><a href='https://zalo.me/+84123456789' rel='noppener nofollow' target='_blank' title='Zalo Chat'>.</a></div><div class='phonering-alo-messenger'><a href='https://www.messenger.com/t/kequaduongvodanh' rel='noppener nofollow' target='_blank' title='Messenger Chat'>.</a></div></div>
Bước 2: Thêm JS trước thẻ đóng </body>
Bước này có hai sự lựa chọn
1. Theo bản gốc của thietkeblogspot viết
<script>//<![CDATA[$(document).on('scroll', function() {var x = $(this).scrollTop(),y = $('#template').offset().topif (x > y) {$('.echbay-sms-messenger').fadeIn()} else {$('.echbay-sms-messenger').fadeOut()}})//]]></script>
Như vậy trên template của các bạn cần phải gắn 1 id có tên là template để khi các bạn cuộn trang tới vị trí id là template thì tiện ích sẽ hiện thị
Cái bất tiện ở đây là trang nào (trang chủ, bài viết, page...) bạn cũng cần phải gắn id cho nó thì nó mới hoạt động.
2. Mình tối ưu lại đoạn code trên như sau:
<script>//<![CDATA[$(window).scroll(function() {$(this).scrollTop() > 200 ? $('.echbay-sms-messenger').fadeIn() : $('.echbay-sms-messenger').fadeOut()})//]]></script>
Với cách này của mình bạn không cần phải thêm bất cứ id nào cả, chỉ cần chỉnh sửa con số 200 theo ý muốn, con số 200 tứ là vị trí 200px khi bạn cuộn trang tính từ TOP.
Trước tiên mình xin cảm ơn tất cả khách hàng đã luôn tin tưởng và ủng hộ mình trong suốt thời gian qua (2016 tới hiện tại).
Nhằm nâng cao chất lượng phục vụ Quý khách hàng và hoàn thiện chất lượng như hỗ trợ, template. Hôm nay ngày 04/2/2021 mình là Hòa Trần admin trang Giaodien.blog sẽ tiến hành mở một trang Feedback để khách hàng đã mua, sử dụng dịch vụ bên mình toàn quyền nhận xét đánh giá công khai ở trang này.
Từ những Feedback này những gì mình làm được và chưa làm được, từ đó mình sẽ rút ra được những kinh nghiệm, và hoàn thiện tốt dịch vụ bên mình.
Quý khách hàng có thể để lại nhận xét reviews tại trang Feedback
Nhận xét
Đăng nhận xét