Điều này sẽ rất thú vị khi thông báo cho khách truy cập của bạn về kết nối internet. Nếu khách truy cập đang xem nội dung trang web của bạn và không may kết nối internet bị ngắt, nó sẽ thông báo cho người dùng rằng hiện tại không có kết nối internet, vì vậy họ có thể kiểm tra kết nối internet của mình.
 |
| © ModMobile☭ | Không có tiện ích kết nối Internet |
Trong bài viết này, chúng tôi sẽ thêm Tiện ích bật lên Không có Kết nối Internet vào bất kỳ Trang web Blogger nào. Thao tác này sẽ hiển thị cửa sổ bật lên cho biết Không có kết nối Internet nếu kết nối internet thiết bị của khách truy cập bị ngắt.
Làm thế nào để thêm Cửa sổ bật lên Không có Kết nối Internet?
Thêm Tiện ích bật lên Không có Kết nối Internet vào Trang web Blogger sẽ không yêu cầu nhiều kiến thức về HTML, CSS hoặc JS vì tôi đã thiết kế nó cho bạn. Những gì bạn cần làm là triển khai các mã ở đúng vị trí trong XML Chủ đề Blogger của bạn.
Quan trọng!Trước khi chúng tôi bắt đầu thêm mã trong XML, tôi khuyên bạn nên tạo một Bản sao lưu của chủ đề hiện tại của bạn. Tình cờ nếu có bất kỳ sự cố nào xảy ra, bạn có thể khôi phục lại sau.
Bước 1: Trước hết Đăng nhập vàoTrang tổng quan Blogger.
Bước 2: Trên Bảng điều khiển Blogger, nhấp vào Chủ đề .
Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'tùy chỉnh' .
Bước 4: Nhấp vào Chỉnh sửa HTML , bạn sẽ được chuyển đến trang chỉnh sửa.
Bước 5: Bây giờ tìm kiếm mã ]]></b:skin>và dán các Mã CSS sau ngay trên vào nó.
Nếu mẫu của bạn có tính năng chế độ tối và nếu bạn muốn có màu khác khi ở chế độ tối, bạn có thể tùy chỉnh các mã theo nhu cầu của mình. Mỗi mẫu có thể có một lớp chế độ tối khác nhau, vì vậy hãy điều chỉnh nó, bạn có thể thay thế lớp đã đánh dấu bằng lớp chế độ tối mẫu của mình.
.popSc{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}
.popSc.hidden{display:none}
.popSc .popBo{position:relative;background:#fff;max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:30px}
.popSc .popBo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.popSc .popBo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.popSc .popBo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.popSc .popBo .popBtn{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}
.popSc .popBo .popBtn:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}
.popSc .popBo .popBtn svg{width:24px;height:24px;flex-shrink:0;opacity:.8}
.popSc .popBo .popBtn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}
.darkMode .popSc, .darkMode .popSc .popBo .popBtn{background:#1f1f1f}
.darkMode .popSc .popBo{background:#2c2d31}
.darkMode .popSc .popBo svg{stroke:#fefefe}
.darkMode .popSc .popBo p, .darkMode .popSc .popBo 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)}}
Thêm CSS sau thay vì thêm CSS được cung cấp ở trên để có giao diện thay thế với Hiệu ứng Blur.
.popSc{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}
.popSc.hidden{display:none}
.popSc .popBo{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%)}
.popSc .popBo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.popSc .popBo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.popSc .popBo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.popSc .popBo .popBtn{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}
.popSc .popBo .popBtn:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}
.popSc .popBo .popBtn svg{width:24px;height:24px;stroke:#fff;flex-shrink:0}
.popSc .popBo .popBtn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}
.popSc{animation:popupBlur .3s ease-in; -webkit-animation:popupBlur .3s}
.popSc >*{animation:popupScale .3s ease-in; -webkit-animation:popupScale .3s}
.darkMode .popSc{background:rgba(0, 0, 0, 0.1)}
.darkMode .popSc .popBo{background:rgba(50, 50, 50, 0.8)}
.darkMode .popSc .popBo svg{stroke:#fefefe}
.darkMode .popSc .popBo p, .darkMode .popSc .popBo h2{color:#fefefe}
@keyframes popupBlur {from{opacity:0}to{opacity:1}}
@-webkit-keyframes popupBlur{from{opacity:0}to{opacity:1}}
@keyframes popupScale{from{transform:scale(0);animation-timing-function:ease-in;opacity:0}to{transform:scale(1);opacity:1}}
@-webkit-keyframes popupScale{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)}}
Lưu ý rằng chúng tôi đã sử dụng các Mã CSS ở trên trong các bài viết trước. Nếu bạn đã thêm nó trong Theme XML của mình, thì hãy bỏ qua bước này và làm theo các bước tiếp theo.
Bước 6: Thêm các Mã CSS sau ngay bên dưới vào Mã CSS mà chúng tôi đã thêm ở Bước 5 .
.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}}
.darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
Đừng thêm nếu bạn đã thêm nó trước đó.
Bước 7: Dán đoạn mã HTML sau vào ngay bên dưới để <body>gắn thẻ. Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp <body>.
<div id='toastNotif' class='tNtf'></div>
Một lần nữa, không thêm nếu bạn đã thêm nó.
Bước 8: Bây giờ hãy thêm HTML sau ngay bên trên để </body>gắn thẻ. Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp </body>.
<div id='noInternet' class='popSc hidden'>
<div class='popBo'>
<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='popBtn' 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>
Bước 9: Sau đó, thêm JavaScript sau ngay bên dưới Mã HTML mà chúng ta đã dán ở Bước 7 .
<script>/*<![CDATA[*/ /* No Internet Connection Script by ModMobile*/ function pageReload(){var n=document.querySelector("#noInternet .popBo .popBtn 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> Bước 10: Cuối cùng, Lưu các thay đổi bằng cách nhấp vào biểu tượng này
Đã xong! Bây giờ trang web của bạn sẽ hiển thị cửa sổ bật lên nói Không có kết nối Internet nếu không có kết nối internet trong thiết bị của khách truy cập.
Chỉ thêm Không có thông báo bánh mì nướng trên Internet
Bây giờ, bạn sẽ làm gì nếu bạn chỉ muốn hiển thị Thông báo bánh mì nướng thay vì Cửa sổ bật lên? Đừng lo lắng, bạn cũng có thể thêm Thông báo bánh mì nướng.
Đối với điều đó, hãy thay thế Mã JavaScript ở trên bằng Mã JavaScript được cung cấp bên dưới.
<script>/*<![CDATA[*/ /* No Internet Connection Script by ModMobile(Only Toast) */ window.addEventListener("offline",function(){document.querySelector("#toastNotif").innerHTML="<span>No internet connection!</span>"}),window.addEventListener("online",function(){document.querySelector("#toastNotif").innerHTML="<span>Internet connection restored!</span>"}); /*]]>*/</script> Bạn có thể loại bỏ các Mã CSS, HTML không cần thiết, nếu bạn đã thêm Mã JavaScript này.
Thử nghiệm
Bạn muốn xem nó hoạt động?
Bạn có thể chọn Không có kiểu tiện ích con bật lên kết nối Internet trước khi áp dụng nó trên Trang web Blogger của mình.
Chúng ta hãy nhìn vào nó!
Điều khoản sử dụng
Nếu bạn muốn sử dụng Tiện ích bật lên Không có Kết nối Internet này trên trang web của mình, vui lòng không xóa các thuộc tính khỏi mã, nó sẽ không hiển thị trên trang web của bạn.
Chúng tôi không cho phép viết lại bài đăng này dưới bất kỳ hình thức nào. Không sao chép bài đăng này , mã hoặc bất kỳ phần nào từ bài viết này mà không có sự cho phép , nó bị nghiêm cấm . Nếu bạn làm như vậy, Các Hành động Pháp lý sẽ được thực hiện.
Sự kết luận
Đây là tất cả về việc thêm Tiện ích bật lên Không có Kết nối Internet vào Trang web Blogger. Tôi hy vọng bạn thích bài viết này. Xin vui lòng chia sẻ bài viết này. Và nếu bạn đang gặp vấn đề trong bất kỳ phần nào hoặc bạn có bất kỳ câu hỏi nào thì hãy hỏi chúng tôi trong hộp bình luận.
© Bản quyền:
www.modmobile.online
Đăng nhận xét