How to add Offline Notification on Website HTML Code 2024 (No internet pop Up)

আসসালামু আলাইকুম প্রিয় পাঠক আপনারা অনেকেই আমাদের কাছ থেকে শিখতে চেয়েছেন কিভাবে ব্লগার ওয়েবসাইটে অফলাইন নোটিফিকেশন পপ আপ যুক্ত করতে হয়। আজকের পোস্টে আমরা সেই সম্পর্কেই আলোচনা করেছি। আপনি যদি পোস্ট টি মনোযোগ সহকারে পড়েন তাহলে খুব সহজে আপনিও ব্লগা ওয়েবসাইটে একটি আকর্ষণীয় অফলাইন নোটিফিকেশন পপ আপ যুক্ত করতে পারবেন।

How to Add Offline Notification on Website HTML Code

HTML কোড ব্যাবহার করে সহজেই একটি ওয়েবসাইটে বিভিন্ন ফিচার যুক্ত করা যায়। আপনি খুব সহজেই আমাদের পোস্টে দেওয়া HTML কোড ব্যাবহার করে আপনার ওয়েবসাইটে একটি অফলাইন নোটিফিকেশন পপ আপ যুক্ত করতে পারবেন। নিচে আমরা সকল কোড আপনাদের জন্য দিয়ে দিয়েছি।

Step-by-Step Guide to Adding a No Internet Notification on Your Blogger Theme

Step 1: Log in to your Blogger Dashboard.

Step 2: From the Dashboard, click on the Theme option.

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

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

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

CSS Code

/* Toast Notification */
.toastNotification 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, 0.8);
font-size: 14px;
font-family: inherit;
border-radius: 3px;
padding: 13px 24px;
box-shadow: 0 5px 35px rgba(149, 157, 165, 0.3);
opacity: 0;
transition: all 0.1s ease;
animation: slideInwards 2s ease forwards;
-webkit-animation: slideInwards 2s ease forwards;
}

@media screen and (max-width: 500px) {
.toastNotification 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 .toastNotification span {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

HTML Code


<div id="toastNotif" class="tNtf"></div>


<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" y1="1" x2="23" 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" y1="20" x2="12.01" 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>

JavaScript Code

<script>
/*<![CDATA[*/
/* No Internet Widget Script*/

function pageReload() {
var reloadButton = document.querySelector("#noInternet .oppsup-Bo .oppsup-Btn svg");
if (reloadButton !== null) {
reloadButton.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>

অফলাইন নোটিফিকেশন উইজেট কিভাবে কাজ করে জেনে নিন

প্রিয় পাঠক, যখন আপনি আপনার ওয়েবসাইট এ অফলাইন নোটিফিকেশন ফিচার টি চালু রাখবেন, তখন কোন দর্শক যদি অফলাইনে চলে যায় কিংবা নেট বন্ধ হয়ে যায় তাহলে সে একটি অফলাইন নোটিফিকেশন পাবে।

এতে করে সে সহজেই বুঝতে পারবে তার ডাটা কানেকশনটি বিচ্ছিন্ন হয়েছে। পুনরায় যখন সে আবার ডাটা কানেকশন করবে তখন অফলাইন নোটিফিকেশন টি অটোমেটিক চলে যাবে। আশা করি বুঝতে পেরেছেন কিভাবে অফলাইন নোটিফিকেশন কাজ করে।

অফলাইন নোটিফিকেশন এর উপকারিতা ও অপকারিতা

প্রিয় পাঠক, আপনারা যেহুতু অফলাইন নোটিফিকেশন ফিচার টি আপনাদের ওয়েবসাইটে যুক্ত করতে চাচ্ছেন সেহুটু আপনাদের এই ফিচারটির ভালো দিক এবং মন্দ দিক জানা উচিত। মন্দ দিক বলতে তেমন কিছু নেই। আপনার ওয়েবসাইটের স্পিডের কোনো পরিবর্তন ঘটাবে না এই ফিচার টি অ্যাড করলে। তাই একদম নিশ্চিন্তে এই চমৎকার ফিচারটি আপনার ওয়েবসাইটে সংযুক্ত করে ফেলতে পারেন।

ভালো দিক হচ্ছে, এই উইজেট টি লাগানোর ফলে আপনার ওয়েবসাইট টি আরো সুন্দর এবং আকর্ষণীয় দেখাবে। ইহা আপনার ওয়েবসাইটের প্রতি দর্শকগণের বিশেষ মনোযোগ আকর্ষণ করবে। আপনার ওয়েবসাইট ব্যভারকালীন কোনো দর্শকের ডাটা কানেকশন বন্ধ হয়ে গেলে আপনি তাদেরকে এই উইজেট টির মাধ্যমে কাস্টোমাইজ নোটিফিকেশন প্রদান করতে পারবেন।

সারকথা

আশা করি আজকের পোস্ট টি পড়ে আপনারা জানতে পেরেছেন কিভাবে একটি ওয়েবসাইটে এইচটিএমএল কোড দ্বারা অফলাইন নোটিফিকেশন প্রভাব উইজেট বসানো যায়। আজকের পোস্টটি বুঝতে কোন সমস্যা হলে বা এই বিষয়ে কোন প্রশ্ন থাকলে অবশ্যই আমাদেরকে কমেন্ট করে জানাবেন আমরা আপনাকে সহযোগিতা করার চেষ্টা করব। আজ এই পর্যন্তই, সম্পূর্ণ পোস্টটি মনোযোগ সহকারে পড়ার জন্য অসংখ্য ধন্যবাদ।