Chèn nút Call hiệu ứng động chạy dọc website

Lang thang trên mạng tìm các giao diện website đẹp để tham khảo các hiệu ứng mới cho vào website của mình cho sinh động, bất ngờ Web7b bắt gặp một hiệu ứng nút Call quá đẹp hoạt động chủ yếu bằng CSS3 nên rất mượt mà.

Các bài viết trước:

Để bạn dễ hình dung mình đang nói về cái gì, mời bạn xem ví dụ ở dưới đây:

demo_nut_call_chay_doc_website

Sau khi click vào nút Call, hộp hỗ trợ trực tuyến xuất hiện:

thong_tin_hien_ra_khi_click_nut_call

Khi nhấn nút Close thì sẽ trở lại màn hình nút Call như ban đầu, thật là tuyệt vời!

Bạn có thể xem trực tiếp tại website khách hàng của Web7b: www.maylanhlevinh.vn

Bạn có thấy nút Call ở góc phải màn hình chưa, quá đẹp phải không nào, bạn có muốn làm nó? Nếu muốn thì tiếp tục xem hướng dẫn ở dưới đây nhé.

Hướng dẫn thêm nút Call chạy dọc màn hình hiệu ứng đẹp

Nói là hướng dẫn cho vui vậy thôi, chứ thực ra mình cũng đi tìm và làm theo từ các hướng dẫn của những website khác mà thôi.

Để làm được nút Call như ở trên, bạn cần tải về 2 file .css này:

Sau khi tải về 2 file này rồi, bạn cần upload lên host của mình để sử dụng.

Bạn tiến hành thêm thư viện coccoc_alo.css và support.css vừa tải lên vào cặp thẻ header của website hoặc project.

<link rel="stylesheet" href="css/coccoc_alo.css">
<link rel="stylesheet" href="css/support.css">

Tiếp theo bạn copy đoạn code ở dưới đây và chèn vào phần body của trang web:

<div style="width: 100%; height: 200px; padding: 20px; background: #f7f7f7; overflow: auto;"><span style="color: #0000ff;">
<script type="&lt;span style=" color:="" ff0000="">// <![CDATA[
text/javascript</span>"></span><br>function showHidechatbox(){var t=document.getElementById("chatbox"),o=t.offsetWidth;t.opened?movechatbox(0,19-o):movechatbox(19-o,0),t.opened=!t.opened; t.opened?$('#coccoc-alo-phoneIcon').hide():($('#coccoc-alo-phoneIcon').show());}function movechatbox(t,o){var a=document.getElementById("chatbox"),e=Math.abs(t-o)>10?5:1,n=o>t?1:-1,i=t+e*n;a.style.right=i.toString()+"0px",t!=o&&setTimeout("movechatbox("+i+", "+o+")",1)}<br><span style="color: #0000ff;">
// ]]></script>
</span><br /><span style="color: #0000ff;">/coccoc_alo.css</span>"&gt;<br /><span style="color: #0000ff;">/support.css</span>"&gt;<br />
<div id="coccoc-alo-phoneIcon" class="coccoc-alo-phone coccoc-alo-green coccoc-alo-show" style="position: fixed; right: 0px; bottom: 0px; display: block; transform: scale(1, 1); transform-origin: left top 0px;">
<div class="coccoc-alo-ph-circle-time"><img id="coccoc-alo-external-site-favicon" /> <span id="coccoc-alo-external-site-counter"></span></div>
<canvas id="stopwatch"></canvas>
<div class="coccoc-alo-ph-circle">&nbsp;</div>
<div class="coccoc-alo-ph-circle-fill">&nbsp;</div>
<div class="coccoc-alo-ph-img-circle coccoc-alo-ph-circle-shake">&nbsp;</div>
<div class="coccoc-alo-ph-circle-close">&nbsp;</div>
</div>
<br />
<div id="chatbox" style="right: -230px;"><br /> <br />
<div class="chatboxtab">&nbsp;</div>
<br />
<div class="chatboxcontent"><br />
<div style="width: 230px; height: auto; padding: 10px 20px; background: #FFF;"><br />
<h3>Hỗ trợ &amp; Tư vấn</h3>
<br />
<p style="color: #0672ec;"><strong>Hỗ trợ kinh doanh</strong></p>
<br />
<p style="font-size: 20px; color: #f5030e;">0914 46 42 44</p>
<br />
<p style="color: #0672ec;"><strong>Hỗ trợ kỹ thuật</strong></p>
<br />
<p style="font-size: 20px; color: #f5030e;">01652 833 656</p>
<p>&nbsp;</p>
</div>
</div>
<br /> <span style="color: #0000ff;">
<script>// <![CDATA[
</span>//showHidechatbox()<span style="color: #0000ff;">
// ]]></script>
</span></div>
</div>

Trong đoạn code trên có những đoạn text là thông tin liên hệ của website, do vậy bạn tìm và sửa những thông tin như số điện thoại, email... cho phù hợp với trang web của mình nha.

Sau khi thực hiện xong, hãy quay lại trang web của bạn và xem thành quả nào.

Chúc các bạn thành công!

Nguồn: Thiết kế web HCM

Đánh giá

Vương IT là freelancer nhận các dự án lập trình, thiết kế website tại Quận 12 TPHCM. Nhận thiết kế web hcm giá rẻ và các dự án phần mềm theo yêu cầu. Vương là một freelancer thiết kế web đã có hơn 7+ kinh nghiệm thiết kế và lập trình web cho hơn 200+ dự án lớn nhỏ. Hy vọng Vương sẽ được hợp tác cùng mọi người trong thời gian sớm nhất nhé! Add zalo của Vương nha zalo.me/0352833656

Copyright © 2015 - 2024. Designed by Vuong Tran DMCA.com Protection Status