Home
Blogger Tutorial
Blogging Tips

How to Add No Internet Connection Widget to Your Blogger Site

Learn how to add a No Internet Connection pop-up widget to your Blogger site with HTML, CSS & JS for better user experience.
EmadulAi
Hello! Welcome to EmadulAi.

It’s useful to notify your visitors about internet connectivity. If a visitor is viewing your website and the connection drops, this widget will alert them that there is currently no internet connection, so they can check and reconnect.

In this article, we will show you how to add a No Internet Connection pop-up widget to any Blogger website. This widget will display a pop-up alerting visitors whenever their device loses internet connectivity.

How to Add No Internet Connection Pop-up?

Adding a No Internet Connection pop-up widget to your Blogger website doesn’t require extensive knowledge of HTML, CSS, or JavaScript. The necessary code has already been prepared for you; you just need to insert it in the correct place within your Blogger Theme XML.

Important!
Before adding any code to your XML, it is highly recommended to create a backup of your current theme. This way, if any issues occur, you can easily restore your previous version.

  1. First of all Login to your Blogger Dashboard.
  2. On Blogger Dashboard, click Theme.
  3. Click the arrow down icon next to 'customize' button.
  4. Click Edit HTML, you will be redirected to editing page.
  5. Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.

    6. If your template supports dark mode and you want different colors in dark mode, you can customize the code accordingly. Each template may use a different dark mode class, so make sure to replace the marked class with your template's dark mode class. 

    /* Pop-Up Box (Style 1) by EmadulAi */
.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)}}

    Instead of using the CSS provided above, you can add the following CSS to achieve an alternative look with a blur effect. 

    /* Pop-Up Box (Style 2) by EmadulAi */
.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)}}

    Note!
    The CSS codes mentioned above might already be added in your Theme XML from previous steps. If so, you can skip this step and continue with the next instructions.

  6. Add the following CSS Codes just below to CSS Codes we have added in Step 5.
    7. /* Toast Notification by EmadulAi */
.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)}

    Note: Do not add these CSS codes if you have already added them earlier.

  7. Paste the following HTML just below to <body> tag. If you don't find it, it is probably already parsed which is &lt;body&gt;.
    8. <!--[ Toast Notification by EmadulAi ]-->
<div id='toastNotif' class='tNtf'></div>

    Again don't add if you already have added it.

  8. Now add the following HTML just above to </body> tag. If you don't find it, it is probably already parsed which is &lt;/body&gt;.
    9. <!--[ No Internet Connection Pop-up by EmadulAi ]-->
<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>
  9. After that, add the following JavaScript just below the HTML Code that we have pasted in Step 7. 
    10. <script>/*<![CDATA[*/ /* No Internet Connection Script by EmadulAi */ 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>
  10. Lastly, Save the changes by clicking on this icon

That's done! Now your website will show a pop-up saying No Internet Connection if there in no internet connection in your visitor's device.

Adding only No Internet Toast Notification

Now, what will you do if you just want to show only Toast Notification instead Pop-up? Don't worry, you can just add Toast Notification as well.

For that, replace the above JavaScript Code with the JavaScript provided below.

<script>/*<![CDATA[*/ /* No Internet Connection Script by EmadulAi (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>

You can remove unnecessary CSS, HTML Codes, if you have added this JavaScript Code.

Conclusion! That’s all about adding the No Internet Connection Pop-up Widget to Blogger Website. in your Blogger posts. We hope you found this guide helpful and easy to follow. Please feel free to share this article with others. If you face any issues or have any questions regarding any step, don’t hesitate to ask in the comment section. Thank you for reading!

Post a Comment

Join the conversation