Thêm thông báo ngoại tuyến trên trang web trong Plus UI – [Opps! No Internet Connection]

Guide to add offline notification on your Blogger & WordPress website. It will show a pop-up notifier, when there is No internet connection on your device.

No Internet Connection!

Internet là nhu cầu cơ bản để duyệt web hoạt động. Khi người dùng mở trình duyệt. Tốt nhất là kiểm tra xem có kết nối Internet hay không và thông báo cho người dùng nếu không có kết nối Internet. Có một số cách để thông báo cho người dùng và các phương pháp này có thể khác nhau tùy theo từng trang web.

Sau đây là một số cách thông báo cho người dùng, có thể khác nhau tùy thuộc vào trang web:

• Thông qua thông báo đẩy đơn giản.
• Thông qua tin nhắn cảnh báo hoặc hộp thoại.
• Bằng cách hiển thị trang tĩnh với thiết kế css tùy chỉnh.

Trong bài viết này, chúng tôi sẽ hướng dẫn cách Thêm Thông báo ngoại tuyến trên Trang web. Thao tác này sẽ hiển thị thông báo bật lên khi khách truy cập hiện không có kết nối Internet trên thiết bị của họ. để họ có thể kiểm tra kết nối Internet của mình.

Cách Thông báo ngoại tuyến/Không có Internet bằng Cửa sổ bật lên

Để Thêm Thông báo không có Internet trên Trang web, bạn không cần phải có nhiều kiến ​​thức về HTML, CSS hoặc JS vì Chúng tôi đã thiết kế sẵn cho bạn. Tất cả những gì bạn cần làm là triển khai các mã được cung cấp đúng vị trí trong Chủ đề Blogger và WordPress của bạn.

Quan trọng!

Trước khi chúng tôi bắt đầu thêm mã vào XML, chúng tôi thực sự khuyên bạn nên sao lưu chủ đề hiện tại của mình. Nếu có bất kỳ vấn đề nào phát sinh trong quá trình này, bạn có thể dễ dàng khôi phục chủ đề về trạng thái trước đó.

Sau đây là hướng dẫn từng bước để thêm Thông báo Không có Internet vào Chủ đề Blogger của bạn:

Bước 1: Trước tiên, hãy Đăng nhập vào Bảng điều khiển Blogger của bạn: Blogger Dashboard.

Bước 2: Trên Bảng điều khiển Blogger, nhấp vào Theme - Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên hướng xuống bên cạnh nút customize - tùy chỉnh

Bước 4: Nhấp vào Edit HTML - Chỉnh sửa HTML, bạn sẽ được chuyển hướng đến trang chỉnh sửa.

Step 5: Tìm dòng code ]]></b:skin>. Dán mã CSS được cung cấp ngay phía trên mã này.

Bạn có thể sử dụng chức năng tìm kiếm (Ctrl + F hoặc Command + F) để tìm mã dễ hơn.

Nếu mẫu của bạn bao gồm tính năng chế độ tối và bạn muốn tùy chỉnh màu khi tính năng này được kích hoạt, bạn có thể sửa đổi mã để đáp ứng yêu cầu của mình. Lưu ý rằng mỗi mẫu có thể có một lớp chế độ tối khác nhau, vì vậy điều quan trọng là phải điều chỉnh mã cho phù hợp. Chỉ cần thay thế lớp được đánh dấu bằng lớp chế độ tối của bạn trong mẫu.

/* Pop-up Box (Style 1) */
.oppsup-Sc{position:fixed;z-index:99980;top:0;bottom:0;left:0;right:0;padding:20px;background:#f3f5fe;display:flex;justify-content:center;align-items:center}
.oppsup-Sc.hidden{display:none}
.oppsup-Sc .oppsup-Bo{position:relative;background:#fff;max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:30px}
.oppsup-Sc .oppsup-Bo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.oppsup-Sc .oppsup-Bo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.oppsup-Sc .oppsup-Bo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.oppsup-Sc .oppsup-Bo .oppsup-Btn{display:inline-flex;justify-content:center;align-items:center;height:50px;width:50px;outline:none;border:none;background:#f3f5fe;border-radius:50%;margin-top:20px;transition:all .2s ease;-webkit-transition:all .2s ease}
.oppsup-Sc .oppsup-Bo .oppsup-Btn:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}
.oppsup-Sc .oppsup-Bo .oppsup-Btn svg{width:24px;height:24px;flex-shrink:0;opacity:.8}
.oppsup-Sc .oppsup-Bo .oppsup-Btn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}
.drK .oppsup-Sc, .drK .oppsup-Sc .oppsup-Bo .oppsup-Btn{background:#1f1f1f}
.drK .oppsup-Sc .oppsup-Bo{background:#2c2d31}
.drK .oppsup-Sc .oppsup-Bo svg{stroke:#fefefe}
.drK .oppsup-Sc .oppsup-Bo p, .drK .oppsup-Sc .oppsup-Bo  h2{color:#fefefe}
@keyframes rotateIcn{from{transform:rotate(0deg)} to{transform:rotate(359deg)}}
@-webkit-keyframes rotateIcn{from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(359deg)}}

Để có giao diện thay thế với hiệu ứng làm mờ, hãy thêm mã CSS sau thay vì sử dụng mã CSS được cung cấp ở trên.

/* Pop-up Box (Style 2) */
.oppsup-Sc{position:fixed;top:0;bottom:0;left:0;right:0;padding:20px;background:rgba(255, 255, 255, 0.1);z-index:99980;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center}
.oppsup-Sc.hidden{display:none}
.oppsup-Sc .oppsup-Bo{position:relative;background:rgba(255, 255, 255, 0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:20px;box-shadow:0 5px 25px rgb(0 0 0 / 20%)}
.oppsup-Sc .oppsup-Bo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.oppsup-Sc .oppsup-Bo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.oppsup-Sc .oppsup-Bo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.oppsup-Sc .oppsup-Bo .oppsup-Btn{display:inline-flex;justify-content:center;align-items:center;height:50px;width:50px;outline:none;border:none;background:#482dff;border-radius:50%;margin-top:20px;transition:all .2s ease;-webkit-transition:all .2s ease}
.oppsup-Sc .oppsup-Bo .oppsup-Btn:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}
.oppsup-Sc .oppsup-Bo .oppsup-Btn svg{width:24px;height:24px;stroke:#fff;flex-shrink:0}
.oppsup-Sc .oppsup-Bo .oppsup-Btn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}
.oppsup-Sc{animation:oppsup-upBlur .3s ease-in; -webkit-animation:oppsup-upBlur .3s}
.oppsup-Sc >*{animation:oppsup-upScale .3s ease-in; -webkit-animation:oppsup-upScale .3s}
.drK .oppsup-Sc{background:rgba(0, 0, 0, 0.1)}
.drK .oppsup-Sc .oppsup-Bo{background:rgba(50, 50, 50, 0.8)}
.drK .oppsup-Sc .oppsup-Bo svg{stroke:#fefefe}
.drK .oppsup-Sc .oppsup-Bo p, .drK .oppsup-Sc .oppsup-Bo h2{color:#fefefe}
@keyframes oppsup-upBlur {from{opacity:0}to{opacity:1}}
@-webkit-keyframes oppsup-upBlur{from{opacity:0}to{opacity:1}}
@keyframes oppsup-upScale{from{transform:scale(0);animation-timing-function:ease-in;opacity:0}to{transform:scale(1);opacity:1}}
@-webkit-keyframes oppsup-upScale{from{-webkit-transform:scale(0);-webkit-animation-timing-function: ease-in;opacity:0}to{-webkit-transform:scale(1);opacity:1}}
@keyframes rotateIcn{from{transform:rotate(0deg)} to{transform:rotate(359deg)}}
@-webkit-keyframes rotateIcn{from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(359deg)}}

Step 6: Thêm các Mã CSS bên dưới ngay bên dưới các Mã CSS mà chúng ta đã thêm ở Bước 5.

/* Toast Notification */
.tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.drK .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}

Bạn có thể bỏ qua bước này nếu bạn đã thêm mã 'Thông báo Toast' trước đó.

Step 7: Dán mã HTML sau ngay bên dưới thẻ <body>. Nếu bạn không tìm thấy, có khả năng là nó đã được phân tích cú pháp thành &lt;body&gt; và tìm kiếm mã đã phân tích cú pháp &lt;body&gt;.

<!--[ Toast Notification ]-->
<div id='toastNotif' class='tNtf'></div>

Bỏ qua bước này nếu bạn đã thêm các thành phần cần thiết.

Step 8: Thêm mã HTML sau ngay phía trên thẻ </body> hoặc thẻ &lt;/body&gt;.

<!--[ No Internet Widget Pop-up ]-->
<div id='noInternet' class='oppsup-Sc hidden'>
  <div class='oppsup-Bo'>
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><line x1='1' x2='23' y1='1' y2='23'/><path d='M16.72 11.06A10.94 10.94 0 0 1 19 12.55'/><path d='M5 12.55a10.94 10.94 0 0 1 5.17-2.39'/><path d='M10.71 5.05A16 16 0 0 1 22.58 9'/><path d='M1.42 9a15.91 15.91 0 0 1 4.7-2.88'/><path d='M8.53 16.11a6 6 0 0 1 6.95 0'/><line x1='12' x2='12.01' y1='20' y2='20'/></svg>
    <h2>Oops! No Internet!</h2>
    <p>Looks like you are facing a temporary network interruption.<br/>Or check your network connection.</p>
    <button class='oppsup-Btn' onclick='pageReload()'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
  </div>
</div>

Step 9: Sau đó, thêm mã JavaScript được cung cấp ngay bên dưới mã HTML mà chúng ta đã dán ở Bước 7.

<script>/*<![CDATA[*/ /* No Internet Widget Script */ function pageReload(){var n=document.querySelector("#noInternet .oppsup-Bo .oppsup-Btn svg");null!=n&&n.classList.add("r"),setTimeout(function(){window.location.reload()},500)};window.addEventListener("offline",function(){document.querySelector("#noInternet").classList.remove("hidden"),document.querySelector("#toastNotif").innerHTML="<span>No internet connection!</span>"}),window.addEventListener("online",function(){document.querySelector("#noInternet").classList.add("hidden"),document.querySelector("#toastNotif").innerHTML="<span>Internet connection restored!</span>"}); /*]]>*/</script>

Step 10: Cuối cùng, thực hiện lưu thay đổi.

Đó là tất cả những gì bạn cần làm! Bây giờ, nếu thiết bị của khách truy cập không có kết nối internet, trang web của bạn sẽ hiển thị thông báo bật lên có nội dung "Oops! No Internet Connection".

Kết luận

Chúng tôi hy vọng bạn thấy điều này hữu ích và thú vị. Nếu bạn có bất kỳ câu hỏi, phản hồi hoặc khó khăn nào ở bất kỳ khía cạnh nào, vui lòng hỏi họ trong phần bình luận.

Go to Link