Home
Feature
Script

How to Add Network Connection Alerter Feature in your Website

Hey Guys! Welcome back to Techly Series website.

Assuming You are observing the Network Connection Alerter Script on blogger. This is the Right Place to you. Since You can get this Script for free.

Today, in this article, I will Discuss with you about How to Add Network Connection Alerter Feature in your Website.

What is Net Connection Alerter

It is a very simple feature. It will instantly alert a visitor when the network connection is on or off the mobile.

How to Add

So, to add Network Connection Alerter Feature on blogger you need to follow the following process below precisely.

What's more, with the help of these steps, you can easily add this feature in your blogger website.

Step 1

  • You will go to your - Blogger Dashboard
  • Go to Theme
  • Go to - Edit HTML
  • Search - </head> or &lt;/head&gt;
  • Copy this CSS Code below and Paste on top of </head> or &lt;/head&gt;

You must back up your theme before go to Edit HTML

<style>
.Nn span{position:fixed;left:25px;top:-70px;display:inline-flex;justify-content:center;margin-top:20px;z-index:99999;background:#ffffff;color:#000000;box-shadow:0 0 15px #000;border-radius:5px;padding:16px 25px;opacity:0;transition:all .3s ease;animation:slidedown 2s ease forwards}
@media screen and (max-width:500px){.Nn span{margin-top:20px;left:25px;right:25px}}
@keyframes slidedown{0%{opacity:0}20%{opacity:1;top:0}50%{opacity:1;top:0}80%{opacity:1;top:0}100%{opacity:0;top:-70px;visibility:hidden}}
</style>

Step 2

  • After Paste CSS Code
  • Search - <body> or &lt;body&gt;
  • Copy this HTML & Javascript Code below and Paste after - <body> or &lt;body&gt;
  • Done.
<div class='Nn'></div>
<script>/*<![CDATA[*/ 
window.addEventListener("offline",function(){document.querySelector(".Nn").innerHTML="<span>No Internet Connection!</span>"}),window.addEventListener("online",function(){document.querySelector(".Nn").innerHTML="<span>Internet Connection Restored!</span>"});
/*]]>*/</script>

Final Words

You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.

I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.

Assuming you experience any issues while copying this script you can impart me by Telegram and I'll attempt to help.

Post a Comment

  • Aᴀ
  • A+
  • A-