Hampir semua aplikasi memiliki halaman atau konten khusus ketika pengguna sedang offline atau tidak terhubung ke jaringan internet. Misalnya saja offline mode pada aplikasi YouTube. Ketika kamu membuka aplikasi YouTube dalam keadaan offline, maka konten yang akan ditampilkan adalah notifikasi atau pemberitahuan bahwa kamu sedang offline atau tidak terhubung ke jaringan internet. Sedangkan untuk konten-konten video YouTube tidak akan ditampilkan.
Selain di aplikasi, widget offline mode ini juga dapat digunakan di website atau blog yang menggunakan Blogger sekalipun. Bahkan saya lihat sudah ada beberapa blog yang membagikan tutorial cara membuat widget notifikasi offline mode (no internet) di blog. Tapi untuk widget notifikasi no internet yang akan saya bagikan ini sedikit berbeda. Tampilan dari widget notifikasi offline mode ini bisa dibilang sangat mirip dengan notifikasi no internet yang digunakan di aplikasi Livin by Mandiri.
Selain itu, saya juga menambahkan beberapa opsi pilihan tampilan seperti Flip dan juga AXISnet. Widget notifikasi no internet (offline mode) ini sangat cocok untuk kamu kaum yang perfeksionis dalam mendesain tampilan blog karena tampilannya clean dan elegan. Dengan memasang widget notifikasi offline mode di blog, blog kamu akan terlihat lebih menarik dan profesional layaknya aplikasi mobile. Berikut adalah contoh tampilan widget notifikasi no internet mirip Livin by Mandiri.
Cara Memasang Notifikasi No Internet / Offline Mode di Blog
Saya akan sediakan beberapa pilihan tampilan offline mode / no internet yang bisa kamu pilih sesuai keinginan kamu. Yang pertama adalah widget notifikasi no internet mirip Livin by Mandiri, kedua mirip aplikasi Flip dan yang ketiga mirip aplikasi AXISnet.
Widget Notifikasi No Internet (Offline Mode) Mirip Livin by Mandiri
Untuk kode HTML, kamu bisa taruh kodenya di bawah tag <body> di dalam template blog kamu. Sedangkan untuk kode CSS, kamu bisa taruh di atas tag </style> atau ]]></b:skin>.
- HTML
- CSS
<div id='ignelius-offline' class='ignelius hidden'>
<div class='ignelius-container'>
<div class='ignelius-box'>
<img alt='Widget Notifikasi No Internet / Offline Mode Mirip Livin' title='Widget Notifikasi No Internet / Offline Mode Mirip Livin' src='https://www.ignelius.com/assets/image/no-internet.jpg' />
<svg class='line' viewBox='0 0 24 24'>
<path d='M22 12C22 6.48 17.52 2 12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22'></path>
<path d='M7.99998 3H8.99998C7.04998 8.84 7.04998 15.16 8.99998 21H7.99998'></path>
<path d='M15 3C15.97 5.92 16.46 8.96 16.46 12'></path>
<path d='M3 16V15C5.92 15.97 8.96 16.46 12 16.46'></path>
<path d='M3 9.0001C8.84 7.0501 15.16 7.0501 21 9.0001'></path>
<path d='M18.2 21.4C19.9673 21.4 21.4 19.9673 21.4 18.2C21.4 16.4327 19.9673 15 18.2 15C16.4327 15 15 16.4327 15 18.2C15 19.9673 16.4327 21.4 18.2 21.4Z'></path>
<path d='M22 22L21 21'></path>
</svg>
<b>Mencari Koneksi Internet...</b>
<p>Koneksi internet kamu terputus. Cek apakah perangkat terhubung ke jaringan internet.</p>
</div>
</div>
</div><style>/*<![CDATA[*/
/* CSS WIDGET NOTIFIKASI OFFLINE MODE MIRIP LIVIN - IGNELIUS.COM */
.ignelius-offline {
background: #f05300;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 10px 0;
padding: 12px 15px;
line-height: 20px;
color: #fffdfc;
font-size: 14px;
width: 100%;
border-radius: 20px;
font-weight: 700;
}
.ignelius {
display: flex;
align-items: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin-bottom: -100%;
background: rgba(0, 0, 0, 0.2);
z-index: 525;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.ignelius.hidden {
display: none;
}
.ignelius-container:before {
content: "";
width: 50px;
height: 3px;
background: #ebeced;
border-radius: 20px;
justify-content: center;
align-items: center;
text-align: center;
position: absolute;
top: 5px;
display: none;
}
.ignelius-container:hover::after {
content: "Hubungkan ke jaringan internet untuk melanjutkan.";
font-weight: 800;
position: absolute;
bottom: 14px;
right: 10px;
left: 10px;
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
width: auto;
text-align: center;
align-items: center;
justify-content: center;
padding: 10px;
background-color: #323232;
border-radius: 5px;
}
.ignelius-container {
width: 100%;
max-width: 680px;
max-height: calc(100% - 60px);
position: absolute;
border-radius: 0;
align-items: center;
justify-content: center;
transition: inherit;
z-index: 535;
display: flex;
overflow: hidden;
position: relative;
margin: 0 auto;
box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.05);
}
.ignelius-box {
padding: 1rem 1.25rem;
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
background: #fefefe;
}
.ignelius-box img {
display: block;
width: 100%;
height: auto;
}
.ignelius .ignelius-container .ignelius-box b {
font-size: 1.5rem;
font-weight: 800;
}
.ignelius-box svg {
margin: 0 5px;
width: 25px;
height: 25px;
vertical-align: -2px;
}
.ignelius-box p {
line-height: 1.5em;
font-size: 1rem;
color: #08102b;
margin-top: 10px;
margin-bottom: 10px;
}
@media screen and (max-width: 896px) {
.ignelius {
transition: all 0.1s ease;
align-items: flex-end;
}
.ignelius .ignelius-container {
border-radius: 0;
max-width: 680px;
bottom: 0;
position: fixed;
}
}
/* TAMBAHKAN KODE CSS UNTUK MODE GELAP DI SINI
[data-theme="dark"] .ignelius-offline {
...
}
*/
/*]]>*/</style>Untuk kode JavaScript, kamu bisa taruh di atas tag penutup </body>.
<script>//<![CDATA[
// JS Offline Mode Mirip Livin by ignelius.com
function igneliusOffMode() {
var a = document.querySelector('#ignelius-offline');
window.addEventListener('offline', function () {
if (a != null) {
a.classList.remove('hidden')
}
});
window.addEventListener('online', function () {
if (a != null) {
a.classList.add('hidden')
}
});
}
igneliusOffMode();
//]]></script>Widget Notifikasi No Internet (Offline Mode) Mirip Flip
Selain widget notifikasi no internet / offline mode mirip Livin by Mandiri, saya juga sudah sediakan beberapa style atau tampilan alternatif yang tidak kalah bagus. Untuk tampilan yang kedua ini, saya buat tampilannya mirip seperti aplikasi Flip saat mode offline aktif. Berikut adalah script widget notifikasi offline mode mirip Flip.
- HTML
- CSS
- JS
<div id='ignelius-offline-flip' class='hidden'>
<div class='offline-konten'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXLJqZtWHzgysQwL8TQJJylEPIf91sDo9Pn00zAChVcgFt6ys9bTdreqyV_SDJ3wAQF6pd7VMFH5FfR5Aa3XB7r7OkD4m0j9eqUx5pKJPrz3BsJw6FrLy4LB6SFD676MCpBbHHWyTJyzPQKZkFf4kso0ierqg_8QZUqS88hroT2qMwFH6cVJFsY04B1vw/s0/no-internet-mode-mirip-flip-by-igneliuscom.png' alt='Widget No Internet Offline Mode Mirip Flip' title='Widget No Internet Offline Mode Mirip Flip'/>
<div class='title-offline'>Tidak ada internet!</div>
<div class='detail-offline'>Mohon pastikan koneksi internetmu aktif dan coba lagi.</div>
<div class='btn-offline' onclick='refreshPage()'>Coba Lagi</div>
</div>
</div><style>/*<![CDATA[*/
/* CSS WIDGET NOTIFIKASI OFFLINE MODE MIRIP FLIP - IGNELIUS.COM */
#ignelius-offline-flip {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
}
@media (max-width: 680px) {
.offline-konten {
max-width: 300px;
}
}
#ignelius-offline-flip.hidden {
display: none;
}
.offline-konten {
width: 100%;
max-width: 700px;
padding: 1rem 1.25rem;
border-radius: 7px;
text-align: center;
z-index: 99999;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px);
}
.offline-konten img {
display: block;
width: 100%;
height: auto;
padding: 10px;
margin: 1.5rem 0;
}
.title-offline {
font-size: 18px;
font-weight: 800;
margin: 1.5rem 0 .8rem 0;
}
.detail-offline {
font-size: 14px;
}
.btn-offline {
background: #f05300;
color: #fffdfc;
padding: 1rem 1.25rem;
border-radius: 30px;
font-weight: 700;
cursor: pointer;
margin: 1.8rem 0 .5rem 0;
width: 100%;
}
/* TAMBAHKAN KODE CSS UNTUK MODE GELAP DI SINI
[data-theme="dark"] .ignelius-offline-flip {
tambahkan kode css untuk mode gelap di sini ...
}
*/
/*]]>*/</style><script>//<![CDATA[
// JS Offline Mode Mirip Flip by ignelius.com
function igneliusOffMode() {
var a = document.querySelector('#ignelius-offline-flip');
window.addEventListener('offline', function () {
if (a != null) {
a.classList.remove('hidden');
}
});
window.addEventListener('online', function () {
if (a != null) {
a.classList.add('hidden');
}
});
}
igneliusOffMode();
// Fungsi Tombol Refresh atau Reload
function refreshPage() {
location.reload();
}
//]]></script>Widget Notifikasi No Internet (Offline Mode) Mirip AXISnet
Untuk penempatan kode atau script, sama seperti yang ada di langkah pertama.
- HTML
- CSS
- JS
<div id='ignelius-offline-axisnet' class='hidden'>
<div class='offline-konten'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBLTJZMLikKOD_zpYfUH-ZfeZBq2xrABTz9lMViTuMMcxXi-C6YzYxELFECvziF0lM8Ii9EnkRMXC7kwWvItsWk3QqLCqn62U4OrF61I4CI8Ds95vAnC1HXWmcZK5edG_0VOnNyv2IzAxno_Nh9XbnL4yiRtBWz2tqnhLtoA8aaQrNT-3-VNRgMqSC3UI/s0/no-internet-mirip-axisnet-by-igneliuscom.webp'/>
<div class='desk-offline'>
<div class='title-offline'>Tidak ada koneksi internet!</div>
<div class="detail-offline">Pastikan perangkat kamu terhubung dengan jaringan internet atau Wi-Fi lalu coba kembali, ya!</div>
<div class='ignelius-offBtn' onclick='refreshPage()'>COBA LAGI</div>
</div>
</div>
</div><style>/*<![CDATA[*/
/* CSS WIDGET NOTIFIKASI OFFLINE MODE MIRIP AXISNET - IGNELIUS.COM */
#ignelius-offline-axisnet {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
padding: 1rem 1.25rem;
margin: 0 auto;
background: #fefefe;
backdrop-filter: blur(8px);
}
#ignelius-offline-axisnet.hidden {
display: none;
}
.offline-konten {
background: #fefefe;
width: 100%;
max-width: 700px;
max-height: calc(100% - 60px);
border-radius: 12px;
align-items: center;
justify-content: center;
text-align: center;
transition: inherit;
z-index: 9999;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
margin: 0 1rem;
padding: 1rem 1.5rem;
}
.offline-konten img {
width: 100%;
max-width: 300px;
height: auto;
margin: 1rem 0;
}
.desk-offline {
display: block;
margin: 1rem 0;
padding: 0;
}
.title-offline {
font-size: 18px;
font-weight: 800;
margin: 1.2rem 0 .8rem 0;
}
.detail-offline {
line-height: 1.8em;
font-size: 14px;
margin-top: 10px;
margin-bottom: 15px;
}
.ignelius-offBtn {
background: #3ddecd;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 1.5rem 0;
padding: 1rem 1.25rem;
line-height: 20px;
color: #fffdfc;
font-size: 14px;
text-transform: uppercase;
width: 100%;
border-radius: 30px;
font-weight: 700;
}
/* CSS UNTUK MODE GELAP SESUAIKAN */
.drK #ignelius-offline-flip {
background: rgba(0, 0, 0, 0.1);
}
.drK #ignelius-offline-flip .offline-konten {
background: rgba(50, 50, 50, 0.8);
}
.drK #ignelius-offline-flip .offline-konten .desk-offline {
background: #252526;
}
.drK #ignelius-offline-flip .offline-konten .desk-offline .detail-offline,
.drK #ignelius-offline-flip .offline-konten .desk-offline .title-offline {
color: #fefefe;
}
/*]]>*/</style><script>//<![CDATA[
// JS Offline Mode Mirip AXISnet by ignelius.com
function igneliusOffMode() {
var a = document.querySelector('#ignelius-offline-axisnet');
window.addEventListener('offline', function() {
if (a != null) {
a.classList.remove('hidden');
}
});
window.addEventListener('online', function() {
if (a != null) {
a.classList.add('hidden');
}
});
}
igneliusOffMode();
// Fungsi Tombol Refresh atau Reload
function refreshPage() {
location.reload();
}
//]]></script>Penutup
Itu dia tutorial cara membuat notifikasi no internet (offline mode) di blog dengan beberapa pilihan tampilan keren seperti Livin, Flip dan AXISnet. Kamu bisa sesuaikan kembali seluruh kode CSS yang ada dengan kode CSS yang digunakan pada template blog kamu masing-masing. Perlu diketahui, bahwa script yang digunakan pada widget notifikasi offline mode di atas sangat ringan sehingga tidak akan terlalu berpengaruh pada loading blog kamu. Kamu juga bisa minify JavaScript yang ada untuk memperoleh ukuran script yang lebih ringan lagi.
Posting Komentar