Di zaman sekarang, koneksi internet memang sudah jadi kebutuhan utama untuk mengakses informasi. Tapi, terkadang koneksi internet kita bisa tiba-tiba terputus, entah karena masalah jaringan atau karena gangguan lainnya. Nah, supaya pengunjung blog kamu nggak bingung saat koneksi mereka bermasalah, kamu bisa menambahkan widget notifikasi tanpa internet. Widget ini akan muncul secara otomatis ketika koneksi internet terputus dan memberikan informasi kepada pengunjung, apakah menggunakan pop-up atau hanya sekedar toast notification kecil.
Apa Itu Widget Notifikasi No Internet?
Widget notifikasi tanpa internet adalah fitur tambahan di blog kamu yang berfungsi untuk memberi tahu pengunjung jika koneksi internet mereka sedang bermasalah. Jadi, ketika mereka membaca artikel dan tiba-tiba halaman tidak responsif karena koneksi internet terputus, widget ini akan muncul dengan pesan peringatan. Dengan begitu, pengunjung nggak salah paham dan mengira blog kamu yang error.
Fungsi dan Manfaat
Berikut adalah beberapa manfaat dan fungsi dari widget ini:
-
Memberikan Informasi Secara Real-Time:
Notifikasi akan muncul segera ketika koneksi internet terputus, sehingga pengunjung langsung tahu apa yang sedang terjadi. Ini membantu mereka untuk memeriksa kembali koneksi mereka tanpa harus menebak-nebak. -
Meningkatkan Pengalaman Pengguna (User Experience):
Dengan adanya pemberitahuan yang jelas, pengunjung tidak akan merasa bingung atau frustrasi ketika halaman blog tidak bisa dimuat dengan sempurna. Mereka tahu bahwa masalahnya ada pada koneksi mereka, bukan pada blog itu sendiri. -
Mengurangi Bounce Rate:
Seringkali, pengunjung meninggalkan halaman karena merasa ada kesalahan pada blog. Dengan notifikasi ini, mereka tetap tinggal karena tahu masalahnya hanya pada koneksi internet yang sedang bermasalah. -
Membantu Debugging:
Fitur ini juga berguna bagi pemilik blog untuk memantau kapan saja terjadi gangguan internet. Dengan begitu, kamu bisa lebih tenang karena pengunjung diberi tahu bahwa masalahnya berada di sisi mereka.
Langkah-langkah Membuat Widget Notifikasi No Internet di Blogger
Di bawah ini, kita akan bahas secara langkah demi langkah bagaimana cara menambahkan widget ini ke blog Blogger kamu. Pastikan kamu mengikuti setiap langkah dengan cermat!
Langkah #1: Buka Menu Tema dan Edit HTML
-
Login ke akun Blogger
Masuk ke akun Blogger kamu dan pilih blog yang ingin kamu modifikasi. -
Masuk ke Menu Tema
Pada dashboard, klik menu Tema di sebelah kiri. -
Edit HTML
Di halaman Tema, klik tombol Edit HTML untuk membuka editor kode template blog kamu.
Langkah #2: Menambahkan Kode CSS
Kode CSS ini berfungsi untuk mengatur tampilan widget notifikasi, baik itu pop-up maupun toast notification. Kamu bisa memilih antara dua gaya, yaitu Style 1 (versi standar) atau Style 2 (dengan efek background blur).
Kode CSS Style 1:
Letakkan kode berikut tepat di atas tag ]]></b:skin> atau sebelum tag </style> di template HTML kamu.
/* Pop-Up Box (Style 1) by Fineshop */
.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); }
}
/* Toast Notification by Fineshop */
.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);
}
Kode CSS Style 2 (Alternatif dengan Background Blur):
Jika kamu lebih suka tampilan yang modern dengan efek blur pada background, kamu bisa gunakan kode berikut ini. Tempatkan kode di posisi yang sama seperti sebelumnya.
/* Pop-Up Box (Style 2) by Fineshop */
.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); }
}
Langkah #3: Menambahkan Kode HTML untuk Toast Notification
Kode HTML berikut harus kamu tempatkan tepat di bawah tag <body> atau di dalam template <body> blog kamu. Kode ini berfungsi untuk menampilkan toast notification, yaitu notifikasi kecil yang muncul di pojok bawah layar.
<!--[ Toast Notification by Fineshop ]--> <div class='tNtf' id='toastNotif'/>
Langkah #4: Menambahkan JavaScript untuk Fungsi Notifikasi
JavaScript di bawah ini berfungsi untuk mendeteksi perubahan status koneksi internet. Ketika koneksi terputus, notifikasi akan muncul; begitu juga sebaliknya ketika koneksi kembali normal. Tempatkan kode JavaScript ini tepat di bawah kode HTML dari langkah sebelumnya.
<script>/*<![CDATA[*/
/* No Internet Connection Script by Fineshop */
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>
Pada kode di atas, terdapat fungsi pageReload() yang akan menambahkan animasi pada ikon notifikasi sebelum melakukan refresh halaman. Event listener untuk offline dan online memastikan bahwa notifikasi muncul dan hilang secara otomatis berdasarkan status koneksi.
Langkah #5: Menambahkan Kode HTML untuk Pop-Up Notifikasi
Selanjutnya, tambahkan kode HTML berikut tepat di atas tag </body> atau </body> pada template blog kamu. Kode ini adalah tampilan pop-up yang muncul saat koneksi internet terputus.
<!--[ No Internet Connection Pop-up by Fineshop ]-->
<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>
Kode di atas akan menghasilkan pop-up yang menampilkan ikon, judul, pesan, dan tombol untuk melakukan refresh halaman. Tombol ini menggunakan fungsi pageReload() yang telah dijelaskan sebelumnya.
Langkah #6: Simpan Perubahan Template
Setelah semua kode di atas sudah kamu tambahkan dengan benar, jangan lupa untuk klik tombol Simpan Template di Blogger. Perubahan yang kamu buat akan langsung diterapkan pada blog kamu.
Alternatif: Menambahkan Hanya Toast Notification
Jika kamu merasa pop-up terlalu mencolok dan hanya ingin menampilkan notifikasi kecil (toast), kamu dapat mengganti kode JavaScript pada Langkah #4 dengan kode berikut:
<script>/*<![CDATA[*/
/* No Internet Connection Script by Fineshop (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>
Setelah mengganti JavaScript di atas, pastikan untuk menghapus kode CSS yang berkaitan dengan pop-up box (kode pada Langkah #2 untuk pop-up) agar tampilan tidak terjadi tumpang tindih.
Penutup
Dengan mengikuti langkah-langkah di atas, kamu sekarang telah berhasil menambahkan widget notifikasi tanpa internet di blog Blogger kamu. Fitur ini sangat berguna untuk memastikan pengunjung mendapatkan informasi yang tepat saat koneksi mereka bermasalah. Selain meningkatkan kenyamanan pengguna, fitur ini juga membantu mengurangi kemungkinan pengunjung meninggalkan halaman karena salah mengira bahwa blog kamu sedang error.
Jangan lupa untuk mencobanya dan menyesuaikan tampilan sesuai dengan tema blog kamu. Kamu juga bisa bereksperimen dengan gaya CSS lainnya agar widget notifikasi tampak lebih menarik dan sesuai dengan branding blog.
Semoga tutorial ini bermanfaat dan dapat membantu kamu dalam memberikan pengalaman terbaik bagi pengunjung blog. Jika ada pertanyaan atau saran, silakan tulis di kolom komentar atau bagikan artikel ini ke teman-teman kamu yang membutuhkan. Selamat mencoba dan semoga sukses!
sumber:
www.fineshopdesign.com