HOT !!!Hiện Tại HungCoder.Com Đang Phát Hành Trang Chat Miễn Phí Cho Mọi Người Giao Đỗi Thông Tin Với Nhau.Click Here

Thứ Bảy, tháng 1 13, 2018

Thêm Khung Liên Lạc Bên Tay Trái Cho WebBlog


Hôm nay Hùng Coder hướng dẫn cho các bạn một đoạn code khá hay cho các bạn bán hàng online hay tự vấn hổ trợ trực tiếp :), một dạng như chat online nhưng lại có thể gọi điện hoặc nhắn tin cho người đó ^^~.


Nếu bạn nào cần thì có thể bỏ đoạn code bên dưới và bỏ trên thẻ : </body> và lưu lại.

<!-- Support online hungcoder.com -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css' rel='stylesheet'/>
<style>
.support-online{position:fixed;z-index:999;left:1%;bottom:11%}
.support-online a{position:relative;margin:20px 10px;text-align:left;width:40px;height:40px}
.support-online 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}
.support-online a span{border-radius:2px;text-align:center;background:#67b634;padding:9px;display:none;width:180px;margin-left:10px;position:absolute;color:#fff;z-index:999;top:0;left:40px;font-size:14.5px;transition:all .2s ease-in-out 0;-moz-animation:headerAnimation .7s 1;-webkit-animation:headerAnimation .7s 1;-o-animation:headerAnimation .7s 1;animation:headerAnimation .7s 1}
.support-online a:hover span{display:block}
.support-online a{display:block}
.support-online a span:before{content:&quot;&quot;;width:0;height:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #67b634 transparent transparent;position:absolute;left:-10px;top:10px}
.kenit-alo-circle-fill{width:60px;height:60px;top:-12px;position:absolute;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;background-color:rgba(0,175,242,0.5);opacity:.75;right:-12px}
.kenit-alo-circle{width:50px;height:50px;top:-6.5px;right:-6.5px;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}
.support-online .btn-support{cursor:pointer}
</style>
<div class='support-online'>
<div class='support-content'>
<a class='call-now' href='tel: 0868 7878 92' rel='nofollow'>
<i aria-hidden='true' class='fa fa-whatsapp'/>
<div class='animated infinite zoomIn kenit-alo-circle'/>
<div class='animated infinite pulse kenit-alo-circle-fill'/>
<span>Hotline: 0868 7878 92</span>
</a>
<a class='mes' href='https://www.facebook.com/messages/t/100002632149630'>
<i aria-hidden='true' class='fa fa-facebook-official'/>
<span>Nhắn tin facebook</span>
</a>
<a class='zalo' href='https://chat.zalo.me/'>
<i aria-hidden='true' class='fa fa-comment'/>
<span>Zalo: 0868 7878 92</span>
</a>
<a class='sms' href='sms:0868787892'>
<i aria-hidden='true' class='fa fa-weixin'/>
<span>SMS: 0868 7878 92</span>
</a>
</div>
<a class='btn-support'>
<i aria-hidden='true' class='fa fa-user-circle'/>
<div class='animated infinite zoomIn kenit-alo-circle'/>
<div class='animated infinite pulse kenit-alo-circle-fill'/>
</a>
</div>
<script type='text/javascript'>
 //<![CDATA[
$(document).ready(function(){

    $('a.btn-support').click(function(e){
      e.stopPropagation();
      $('.support-content').slideToggle();
    });
    $('.support-content').click(function(e){
      e.stopPropagation();
    });
    $(document).click(function(){
      $('.support-content').slideUp();
    });
});
  //]]>
</script>
<!-- End Support -->
Và qua đoạn code trên bạn như thay đỗi những phần mình bôi đỏ trên đoạn code đó nhé :)

DEMO BÊN TAY TRÁI CỦA CÁC BẠN

Chúc các bạn thành công với thủ thuật này nhé :)



19 nhận xét

  1. Trả lời
    1. Hehe, bt thôi e. Tại a thấy bên ông niệm cũng hay nên lách về đấy, chứ thực ra thì thủ thuật ấy ko thể đặt trên blog a :) vì 1 số lý do

      Xóa
  2. Ngon đấy, Blog ông nhìn tùm lum hết à :v

    Trả lờiXóa
    Trả lời
    1. hehe có cái gì liên quan đến html + css + javascript + vb.net là có ở blog tui thôi :) tui ko chọn lọc kỹ bài viết đâu. Thích gì viết nẫy thôi :D

      Xóa
  3. mỗi tội màu đen khó nhìn quá

    Trả lờiXóa
    Trả lời
    1. Màu xanh mà ông chứ có màu đen đâu ?

      Xóa
    2. màu đen đâu ông, màu sáng mà ;) chắc css nó cũng với cái gì trong css của blog ông mất r đấy :D

      Xóa
  4. Blog này ông tối ưu load chưa Hùng

    Trả lờiXóa
    Trả lời
    1. Chưa ông ạ, vì mình thấy nó load cũng ok rồi nên ko tối ưu? mà sao ông hỏi thế vậy ? ông có cách tối ưu load hả?

      Xóa
    2. Không ý tôi là nên sửa lại một chút cho tăng điểm speeg google

      Xóa
    3. hiện tại cái đó m đang mù bạn ạ vời là m` bận cho việc đi làm quá nên không có time nhiều để tối ưu cho lắm. Nên cứ để vậy xài tạm thôi :D

      Xóa
  5. Đổi màu footer đi Hùng, đen thùi lùi ko thấy chữ đâu cả

    Trả lờiXóa
    Trả lời
    1. Haiz gắng nhìn thôi chứ mình không có time nhiều để edit lại bạn ạ ! với lại m` cũng khá thích màu tối :D vì đơn giản hồi xưa m` cũng là 1 Black Hat :D :D

      Xóa
  6. có link demo thôi mà còn xài 123link

    Trả lờiXóa
    Trả lời
    1. Hehe. Đó ko phải là do m cài đặt đâu bạn nhé. Nó đã tự mặc định vì mình có đặt 1 đoạn script của nó vào blog r bạn ạ. :)

      Xóa
  7. Cuối năm rồi, kiếm được khoản nào bự ăn Tết chưa bác Hùng? :D

    Trả lờiXóa
    Trả lời
    1. Chưa ông ạ. Đi làm còng lưng mà đếu thấy tết là gì luôn r, còn quảng cáo trên site thì treo cho vui chứ ko có kết quả gì về mơ ni cả :(

      Xóa
    2. Uh năm nay lương thưởng bèo bọt,làm ăn thất thu. Tui cũng đói như con mèo hen đây :))

      Xóa
    3. Ngán lắm ông ạ :( tiền bạc ko có gái nào nó theo :(( chán quá. Biết khi nào H mới đc như CƯỜNG ĐÔ LA đây :))

      Xóa

Monetize your website traffic with yX Media