Add Offline Notification on Website – [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 Widget | Offline Notification

The Internet is the basic need for browse on web to work. When a user opens an browser. It is a best practice to check if the internet is available or not and inform the user if there is no internet connection. There are several ways to notify the user, and these methods may vary from website to website.

Here are a few ways the user can be notified, which may vary depending on the website:

• Via a simple push notification.
• Through an alert message or dialog box.
• By displaying an static page with a custom css design.

In this article, we are going to cover how to Add Offline Notification on Website. This will show a Pop-up notification when visitors currently don't have Internet connection on there device. so they can check their internet connection.

---

How to Offline / No Internet Notification with Pop-up

To Add a No Internet Notification on Website, you don't need to have much knowledge of HTML, CSS or JS because We have already designed it for you. All you need to do is to implement the provided codes at right place in your Blogger and WordPress Theme.

Before we start let's take a look at its Demo.

View Demo

Important!Before we start adding codes to the XML, We highly recommend you to take a Backup of your current theme. By chance if any issues arise during the process, you can easily restore your theme to its previous state.

Here is a step-by-step guide for adding No Internet Notification on your Blogger Theme:

Step 1: Login to your Blogger Dashboard.

Step 2: Click on the Theme option from the Dashboard.

Step 3: Click on the arrow down icon next to CUSTOMIZE button.

Step 4: Select Edit HTML. This will be redirect you to the HTML code editing page.

Step 5: Find the code ]]></b:skin>. Paste the provided CSS codes just above this code.

You can use the search function (Ctrl + F or Command + F) to make it easier to find the code place.

If your template includes a dark mode feature and you wish to customize the color when it's activated, you can modify the code to meet your requirements. Keep in mind that each template may have a different dark mode class, so it's important to adjust the code accordingly. Simply replace the marked class with your dark mode class in your template.

/* Pop-up Box (Style 1) by The Web Trick */
.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)}}

To get an alternative look with blur effect, add the following CSS instead of using the CSS provided above.

/* Pop-up Box (Style 2) by The Web Trick */
.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: Add the below CSS Codes just below to CSS Codes we have added in Step 5.

/* Toast Notification by The Web Trick */
.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)}

You can skip this step if you've already added 'Toast Notification' codes earlier.

Step 7: Paste the following HTML just below the <body> tag. If you are unable to find it, it's likely that it has already been parsed as <body> and search it, parsed code <body>.

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

Ignore this step if you have already added the required elements.

Step 8: Add the following HTML code just above the </body> tag or </body> tag.

<!--[ No Internet Widget Pop-up by The Web Trick ]-->
<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: After that, add the provided JavaScript code just below the HTML code that we pasted in Step 7.

<script>/*<![CDATA[*/ /* No Internet Widget Script by The Web Trick */ 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: Finally, click on this icon to save your changes.

That's all you need to do! Now, If your visitor's device does not have an internet connection, your website will display a pop-up message that says "Oops! No Internet Connection".

Conclusion

The main reason of this tutorial is many visitor's of Thewebtrick.com ask me how to Add No Internet Notification on Website. We hope you find this helpful & interesting. Please share this post with your friends and family. And if you have any questions, feedback or difficulties in any aspect, please ask them in the comment section.

You May Like These Posts:

Go to Link