author
Ryosuke
Cara Membuat Pendeteksi Offline Atau Online di Blogger Dengan Online.js

Cara Membuat Pendeteksi Offline Atau Online di Blogger Dengan Online.js

fyi.my.id - Cara Memasang Offline.js di blogspot - Offline.js adalah perpustakaan untuk memperingatkan pengguna Anda secara otomatis ketika mereka kehilangan konektivitas internet, seperti contohnya Gmail.

Ini menangkap permintaan AJAX yang dibuat saat koneksi sedang down, dan membuat ulang permintaan itu ketika kembali, sehingga aplikasi/blog Anda bereaksi dengan sempurna.

Cara Memasang Offline.js sangatlah mudah, anda dapat mengikuti tutorial nya disini.

Cara Memasang Offline.js di Blogger/Blogspot

1. Login dulu ke Blogger.
2. Pada saat di Dashboard Blogger pilih menu Tema dan Edit HTML.
3. Setelah itu copy code CSS dibawah ini diatas ]]></b:skin> atau </style>.

.online{background:#30b55a}.offline{background:#ff1e2d}.offline-ui,.offline-ui *,.offline-ui :after,.offline-ui :before,.offline-ui:after,.offline-ui:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.offline-ui{display:none;position:fixed;background:#fff;z-index:800;margin:auto;top:0;left:0;right:0}.offline-ui .offline-ui-content:before{display:inline}.offline-ui .offline-ui-retry{-webkit-user-select:none;-moz-user-select:none;user-select:none;display:none}.offline-ui .offline-ui-retry:before{display:inline}.offline-ui.offline-ui-up.offline-ui-up-5s{display:block}.offline-ui.offline-ui-down{display:block}.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry{display:block}.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry{display:none}@-webkit-keyframes offline-dropin{0%{transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);opacity:0}1%{transform:translateY(-800px);-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);-o-transform:translateY(-800px);opacity:0}2%{transform:translateY(-800px);-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);-o-transform:translateY(-800px);opacity:1}100%{transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);opacity:1}}@-moz-keyframes offline-dropin{0%{transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);opacity:0}1%{transform:translateY(-800px);-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);-o-transform:translateY(-800px);opacity:0}2%{transform:translateY(-800px);-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);-o-transform:translateY(-800px);opacity:1}100%{transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);opacity:1}}@-ms-keyframes offline-dropin{0%{transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);opacity:0}1%{transform:translateY(-800px);-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);-o-transform:translateY(-800px);opacity:0}2%{transform:translateY(-800px);-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);-o-transform:translateY(-800px);opacity:1}100%{transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);opacity:1}}@-o-keyframes offline-dropin{0%{transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);opacity:0}1%{transform:translateY(-800px);-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);-o-transform:translateY(-800px);opacity:0}2%{transform:translateY(-800px);-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);-o-transform:translateY(-800px);opacity:1}100%{transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);opacity:1}}@keyframes offline-dropin{0%{transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);opacity:0}1%{transform:translateY(-800px);-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);-o-transform:translateY(-800px);opacity:0}2%{transform:translateY(-800px);-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);-o-transform:translateY(-800px);opacity:1}100%{transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);opacity:1}}@-webkit-keyframes offline-dropout{0%{transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0)}100%{transform:translateY(-800px);-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);-o-transform:translateY(-800px)}}@-moz-keyframes offline-dropout{0%{transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0)}100%{transform:translateY(-800px);-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);-o-transform:translateY(-800px)}}@-ms-keyframes offline-dropout{0%{transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0)}100%{transform:translateY(-800px);-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);-o-transform:translateY(-800px)}}@-o-keyframes offline-dropout{0%{transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0)}100%{transform:translateY(-800px);-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);-o-transform:translateY(-800px)}}@keyframes offline-dropout{0%{transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0)}100%{transform:translateY(-800px);-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);-o-transform:translateY(-800px)}}@-webkit-keyframes offline-rotation{0%{transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0)}100%{transform:rotate(359deg);-webkit-transform:rotate(359deg);-moz-transform:rotate(359deg);-ms-transform:rotate(359deg);-o-transform:rotate(359deg)}}@-moz-keyframes offline-rotation{0%{transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0)}100%{transform:rotate(359deg);-webkit-transform:rotate(359deg);-moz-transform:rotate(359deg);-ms-transform:rotate(359deg);-o-transform:rotate(359deg)}}@-ms-keyframes offline-rotation{0%{transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0)}100%{transform:rotate(359deg);-webkit-transform:rotate(359deg);-moz-transform:rotate(359deg);-ms-transform:rotate(359deg);-o-transform:rotate(359deg)}}@-o-keyframes offline-rotation{0%{transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0)}100%{transform:rotate(359deg);-webkit-transform:rotate(359deg);-moz-transform:rotate(359deg);-ms-transform:rotate(359deg);-o-transform:rotate(359deg)}}@keyframes offline-rotation{0%{transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0)}100%{transform:rotate(359deg);-webkit-transform:rotate(359deg);-moz-transform:rotate(359deg);-ms-transform:rotate(359deg);-o-transform:rotate(359deg)}}.offline-ui{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.15),0 0 1em rgba(0,0,0,.3);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.15),0 0 1em rgba(0,0,0,.3);box-shadow:0 0 0 1px rgba(0,0,0,.15),0 0 1em rgba(0,0,0,.3);font-family:"Lucida Grande",sans-serif;font-size:14px;padding:1em;max-width:100%;background:#f6f6f6;color:#444;overflow:hidden}.offline-ui .offline-ui-content{padding-left:2em}.offline-ui .offline-ui-content:before{line-height:1.25em}.offline-ui .offline-ui-content:after{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;content:" ";display:block;position:absolute;top:0;bottom:0;left:1em;margin:auto;height:1em;width:1em}.offline-ui .offline-ui-retry{-webkit-box-shadow:0 1px 0 rgba(0,0,0,.08),inset 0 1px 2px rgba(255,255,255,.75);-moz-box-shadow:0 1px 0 rgba(0,0,0,.08),inset 0 1px 2px rgba(255,255,255,.75);box-shadow:0 1px 0 rgba(0,0,0,.08),inset 0 1px 2px rgba(255,255,255,.75);-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#ededed),color-stop(38%,#ededed),color-stop(100%,#dedede));background-image:-webkit-linear-gradient(#ededed,#ededed 38%,#dedede);background-image:-moz-linear-gradient(#ededed,#ededed 38%,#dedede);background-image:-o-linear-gradient(#ededed,#ededed 38%,#dedede);background-image:linear-gradient(#ededed,#ededed 38%,#dedede);position:absolute;right:4em;top:1em;bottom:1em;border:1px solid rgba(0,0,0,.25);text-shadow:0 1px 0 #f0f0f0;padding:0 1em;line-height:1.6em;height:1.7em;margin:auto;font-size:12px;text-decoration:none;color:inherit}.offline-ui.offline-ui-up{-webkit-animation:offline-dropout forwards .5s 2s;-moz-animation:offline-dropout forwards .5s 2s;-ms-animation:offline-dropout forwards .5s 2s;-o-animation:offline-dropout forwards .5s 2s;animation:offline-dropout forwards .5s 2s;-webkit-backface-visibility:hidden}.offline-ui.offline-ui-up .offline-ui-content:after{background:#80d580}.offline-ui.offline-ui-down{-webkit-animation:offline-dropin .5s;-moz-animation:offline-dropin .5s;-ms-animation:offline-dropin .5s;-o-animation:offline-dropin .5s;animation:offline-dropin .5s;-webkit-backface-visibility:hidden}.offline-ui.offline-ui-down .offline-ui-content:after{background:#ec8787}.offline-ui.offline-ui-down.offline-ui-connecting,.offline-ui.offline-ui-down.offline-ui-waiting{padding-right:3em}.offline-ui.offline-ui-down.offline-ui-connecting .offline-ui-content:after,.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content:after{background:#ec8787}.offline-ui.offline-ui-down.offline-ui-connecting:after,.offline-ui.offline-ui-down.offline-ui-waiting:after{-webkit-animation:offline-rotation .7s linear infinite;-moz-animation:offline-rotation .7s linear infinite;-ms-animation:offline-rotation .7s linear infinite;-o-animation:offline-rotation .7s linear infinite;animation:offline-rotation .7s linear infinite;-webkit-backface-visibility:hidden;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;content:" ";display:block;position:absolute;right:1em;top:0;bottom:0;margin:auto;height:1em;width:1em;border:2px solid transparent;border-top-color:rgba(0,0,0,.5);border-left-color:rgba(0,0,0,.5);opacity:.7}.offline-ui.offline-ui-down.offline-ui-waiting{padding-right:11em}.offline-ui.offline-ui-down.offline-ui-waiting.offline-ui-reconnect-failed-2s{padding-right:0}.offline-ui .offline-ui-retry:before{content:"Reconnect"}.offline-ui.offline-ui-up .offline-ui-content:before{content:"Your computer is connected to the internet."}@media (max-width:1024px){.offline-ui.offline-ui-up .offline-ui-content:before{content:"Your device is connected to the internet."}}@media (max-width:568px){.offline-ui.offline-ui-up .offline-ui-content:before{content:"Your device is connected."}}.offline-ui.offline-ui-down .offline-ui-content:before{content:"Your computer lost its internet connection."}@media (max-width:1024px){.offline-ui.offline-ui-down .offline-ui-content:before{content:"Your device lost its internet connection."}}@media (max-width:568px){.offline-ui.offline-ui-down .offline-ui-content:before{content:"Your device isn't connected."}}.offline-ui.offline-ui-down.offline-ui-connecting .offline-ui-content:before,.offline-ui.offline-ui-down.offline-ui-connecting-2s .offline-ui-content:before{content:"Attempting to reconnect..."}.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit=second]:before{content:"Connection lost. Reconnecting in " attr(data-retry-in-value) " seconds..."}@media (max-width:568px){.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit=second]:before{content:"Reconnecting in " attr(data-retry-in-value) "s..."}}.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit=second][data-retry-in-value="1"]:before{content:"Connection lost. Reconnecting in " attr(data-retry-in-value) " second..."}@media (max-width:568px){.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit=second][data-retry-in-value="1"]:before{content:"Reconnecting in " attr(data-retry-in-value) "s..."}}.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit=minute]:before{content:"Connection lost. Reconnecting in " attr(data-retry-in-value) " minutes..."}@media (max-width:568px){.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit=minute]:before{content:"Reconnecting in " attr(data-retry-in-value) "m..."}}.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit=minute][data-retry-in-value="1"]:before{content:"Connection lost. Reconnecting in " attr(data-retry-in-value) " minute..."}@media (max-width:568px){.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit=minute][data-retry-in-value="1"]:before{content:"Reconnecting in " attr(data-retry-in-value) "m..."}}.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit=hour]:before{content:"Connection lost. Reconnecting in " attr(data-retry-in-value) " hours..."}@media (max-width:568px){.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit=hour]:before{content:"Reconnecting in " attr(data-retry-in-value) "h..."}}.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit=hour][data-retry-in-value="1"]:before{content:"Connection lost. Reconnecting in " attr(data-retry-in-value) " hour..."}@media (max-width:568px){.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit=hour][data-retry-in-value="1"]:before{content:"Reconnecting in " attr(data-retry-in-value) "h..."}}.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry{display:none}.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s .offline-ui-content:before{content:"Connection attempt failed."}

5. Letakan kode berikut diatas kode

<script>
(function(){var n,f;f=$(".online"),n=$(".offline"),Offline.on("confirmed-down",function(){return f.fadeOut(function(){return n.fadeIn()})}),Offline.on("confirmed-up",function(){return n.fadeOut(function(){return f.fadeIn()})})}).call(this);
</script>
<script>
//<![CDATA[
/*! offline 0.7.1 by fyi.my.id */
(function(){var a,b,c,d,e,f,g;d=function(a,b){var c,d,e,f;f=[];for(d in b.prototype)try{e=b.prototype[d],f.push(null==a[d]&&"function"!=typeof e?a[d]=e:void 0)}catch(g){c=g}return f},a={},null==a.options&&(a.options={}),c={checks:{xhr:{url:function(){return"/favicon.ico?_="+Math.floor(1e9*Math.random())}},image:{url:function(){return"/favicon.ico?_="+Math.floor(1e9*Math.random())}},active:"xhr"},checkOnLoad:!1,interceptRequests:!0,reconnect:!0},e=function(a,b){var c,d,e,f,g,h;for(c=a,f=b.split("."),d=g=0,h=f.length;h>g&&(e=f[d],c=c[e],"object"==typeof c);d=++g);return d===f.length-1?c:void 0},a.getOption=function(b){var d,f;return d=null!=(f=e(a.options,b))?f:e(c,b),"function"==typeof d?d():d},"function"==typeof window.addEventListener&&window.addEventListener("online",function(){return setTimeout(a.confirmUp,100)},!1),"function"==typeof window.addEventListener&&window.addEventListener("offline",function(){return a.confirmDown()},!1),a.state="up",a.markUp=function(){return a.trigger("confirmed-up"),"up"!==a.state?(a.state="up",a.trigger("up")):void 0},a.markDown=function(){return a.trigger("confirmed-down"),"down"!==a.state?(a.state="down",a.trigger("down")):void 0},f={},a.on=function(b,c,d){var e,g,h,i,j;if(g=b.split(" "),g.length>1){for(j=[],h=0,i=g.length;i>h;h++)e=g[h],j.push(a.on(e,c,d));return j}return null==f[b]&&(f[b]=[]),f[b].push([d,c])},a.off=function(a,b){var c,d,e,g,h;if(null!=f[a]){if(b){for(d=0,h=[];d<f[a].length;)g=f[a][d],c=g[0],e=g[1],h.push(e===b?f[a].splice(d,1):d++);return h}return f[a]=[]}},a.trigger=function(a){var b,c,d,e,g,h,i;if(null!=f[a]){for(g=f[a],i=[],d=0,e=g.length;e>d;d++)h=g[d],b=h[0],c=h[1],i.push(c.call(b));return i}},b=function(a,b,c){var d,e;return d=function(){return a.status&&a.status<12e3?b():c()},null===a.onprogress?(a.addEventListener("error",c,!1),a.addEventListener("timeout",c,!1),a.addEventListener("load",d,!1)):(e=a.onreadystatechange,a.onreadystatechange=function(){return 4===a.readyState?d():0===a.readyState&&c(),"function"==typeof e?e.apply(null,arguments):void 0})},a.checks={},a.checks.xhr=function(){var c,d;d=new XMLHttpRequest,d.offline=!1,d.open("HEAD",a.getOption("checks.xhr.url"),!0),b(d,a.markUp,a.markDown);try{d.send()}catch(e){c=e,a.markDown()}return d},a.checks.image=function(){var b;return b=document.createElement("img"),b.onerror=a.markDown,b.onload=a.markUp,void(b.src=a.getOption("checks.image.url"))},a.checks.down=a.markDown,a.checks.up=a.markUp,a.check=function(){return a.trigger("checking"),a.checks[a.getOption("checks.active")]()},a.confirmUp=a.confirmDown=a.check,a.onXHR=function(a){var b,c,e;return b=function(b,c){var d;return d=b.open,b.open=function(e,f,g,h,i){return a({type:e,url:f,async:g,flags:c,user:h,password:i,xhr:b}),d.apply(b,arguments)}},e=window.XMLHttpRequest,window.XMLHttpRequest=function(a){var c,d,f;return c=new e(a),b(c,a),f=c.setRequestHeader,c.headers={},c.setRequestHeader=function(a,b){return c.headers[a]=b,f.call(c,a,b)},d=c.overrideMimeType,c.overrideMimeType=function(a){return c.mimeType=a,d.call(c,a)},c},d(window.XMLHttpRequest,e),null!=window.XDomainRequest?(c=window.XDomainRequest,window.XDomainRequest=function(){var a;return a=new c,b(a),a},d(window.XDomainRequest,c)):void 0},g=function(){return a.getOption("interceptRequests")&&a.onXHR(function(c){var d;return d=c.xhr,d.offline!==!1?b(d,a.confirmUp,a.confirmDown):void 0}),a.getOption("checkOnLoad")?a.check():void 0},setTimeout(g,0),window.Offline=a}).call(this),function(){var a,b,c,d,e,f,g,h,i;if(!window.Offline)throw new Error("Offline Reconnect brought in without offline.js");d=Offline.reconnect={},f=null,e=function(){var a;return null!=d.state&&"inactive"!==d.state&&Offline.trigger("reconnect:stopped"),d.state="inactive",d.remaining=d.delay=null!=(a=Offline.getOption("reconnect.initialDelay"))?a:3},b=function(){var a,b;return a=null!=(b=Offline.getOption("reconnect.delay"))?b:Math.min(Math.ceil(1.5*d.delay),3600),d.remaining=d.delay=a},g=function(){return"connecting"!==d.state?(d.remaining-=1,Offline.trigger("reconnect:tick"),0===d.remaining?h():void 0):void 0},h=function(){return"waiting"===d.state?(Offline.trigger("reconnect:connecting"),d.state="connecting",Offline.check()):void 0},a=function(){return Offline.getOption("reconnect")?(e(),d.state="waiting",Offline.trigger("reconnect:started"),f=setInterval(g,1e3)):void 0},i=function(){return null!=f&&clearInterval(f),e()},c=function(){return Offline.getOption("reconnect")?"connecting"===d.state?(Offline.trigger("reconnect:failure"),d.state="waiting",b()):void 0:void 0},d.tryNow=h,e(),Offline.on("down",a),Offline.on("confirmed-down",c),Offline.on("up",i)}.call(this),function(){var a,b,c,d,e,f;if(!window.Offline)throw new Error("Requests module brought in without offline.js");c=[],f=!1,d=function(a){return Offline.trigger("requests:capture"),"down"!==Offline.state&&(f=!0),c.push(a)},e=function(a){var b,c,d,e,f,g,h,i,j;i=a.xhr,f=a.url,e=a.type,g=a.user,d=a.password,b=a.body,i.abort(),i.open(e,f,!0,g,d),j=i.headers;for(c in j)h=j[c],i.setRequestHeader(c,h);return i.mimeType&&i.overrideMimeType(i.mimeType),i.send(b)},a=function(){return c=[]},b=function(){var b,d,f,g,h,i;for(Offline.trigger("requests:flush"),f={},h=0,i=c.length;i>h;h++)d=c[h],g=d.url.replace(/(\?|&)_=[0-9]+/,function(a,b){return"?"===b?b:""}),f[""+d.type.toUpperCase()+" - "+g]=d;for(b in f)d=f[b],e(d);return a()},setTimeout(function(){return Offline.getOption("requests")!==!1?(Offline.on("confirmed-up",function(){return f?(f=!1,a()):void 0}),Offline.on("up",b),Offline.on("down",function(){return f=!1}),Offline.onXHR(function(a){var b,c,e,f,g;return e=a.xhr,b=a.async,e.offline!==!1&&(c=function(){return d(a)},g=e.send,e.send=function(b){return a.body=b,g.apply(e,arguments)},b)?null===e.onprogress?(e.addEventListener("error",c,!1),e.addEventListener("timeout",c,!1)):(f=e.onreadystatechange,e.onreadystatechange=function(){return 0===e.readyState?c():4===e.readyState&&(0===e.status||e.status>=12e3)&&c(),"function"==typeof f?f.apply(null,arguments):void 0}):void 0}),Offline.requests={flush:b,clear:a}):void 0},0)}.call(this),function(){var a,b,c,d,e;if(!Offline)throw new Error("Offline simulate brought in without offline.js");for(e=["up","down"],c=0,d=e.length;d>c;c++)a=e[c],(document.querySelector("script[data-simulate='"+a+"']")||localStorage.OFFLINE_SIMULATE===a)&&(null==Offline.options&&(Offline.options={}),null==(b=Offline.options).checks&&(b.checks={}),Offline.options.checks.active=a)}.call(this),function(){var a,b,c,d,e,f,g,h,i,j,k,l,m;if(!window.Offline)throw new Error("Offline UI brought in without offline.js");b='<div class="offline-ui"><div class="offline-ui-content"></div></div>',a='<a href class="offline-ui-retry"></a>',e=function(a){var b;return b=document.createElement("div"),b.innerHTML=a,b.children[0]},f=d=null,c=function(a){return j(a),f.className+=" "+a},j=function(a){return f.className=f.className.replace(new RegExp("(^| )"+a.split(" ").join("|")+"( |$)","gi")," ")},h={},g=function(a,b){return c(a),null!=h[a]&&clearTimeout(h[a]),h[a]=setTimeout(function(){return j(a),delete h[a]},1e3*b)},l=function(a){var b,c,d,e;d={day:86400,hour:3600,minute:60,second:1};for(c in d)if(b=d[c],a>=b)return e=Math.floor(a/b),[e,c];return["now",""]},k=function(){var g,h;return f=e(b),document.body.appendChild(f),null!=Offline.reconnect&&Offline.getOption("reconnect")&&(f.appendChild(e(a)),g=f.querySelector(".offline-ui-retry"),h=function(a){return a.preventDefault(),Offline.reconnect.tryNow()},null!=g.addEventListener?g.addEventListener("click",h,!1):g.attachEvent("click",h)),c("offline-ui-"+Offline.state),d=f.querySelector(".offline-ui-content")},i=function(){return k(),Offline.on("up",function(){return j("offline-ui-down"),c("offline-ui-up"),g("offline-ui-up-2s",2),g("offline-ui-up-5s",5)}),Offline.on("down",function(){return j("offline-ui-up"),c("offline-ui-down"),g("offline-ui-down-2s",2),g("offline-ui-down-5s",5)}),Offline.on("reconnect:connecting",function(){return c("offline-ui-connecting"),j("offline-ui-waiting")}),Offline.on("reconnect:tick",function(){var a,b,e;return c("offline-ui-waiting"),j("offline-ui-connecting"),e=l(Offline.reconnect.remaining),a=e[0],b=e[1],d.setAttribute("data-retry-in-value",a),d.setAttribute("data-retry-in-unit",b)}),Offline.on("reconnect:stopped",function(){return j("offline-ui-connecting offline-ui-waiting"),d.setAttribute("data-retry-in-value",null),d.setAttribute("data-retry-in-unit",null)}),Offline.on("reconnect:failure",function(){return g("offline-ui-reconnect-failed-2s",2),g("offline-ui-reconnect-failed-5s",5)}),Offline.on("reconnect:success",function(){return g("offline-ui-reconnect-succeeded-2s",2),g("offline-ui-reconnect-succeeded-5s",5)})},"complete"===document.readyState?i():null!=document.addEventListener?document.addEventListener("DOMContentLoaded",i,!1):(m=document.onreadystatechange,document.onreadystatechange=function(){return"complete"===document.readyState&&i(),"function"==typeof m?m.apply(null,arguments):void 0})}.call(this);
//]]>
</script>

6. Tekan Simpan Tema.

Itulah Cara memasang offline js di blogger. jika kalian ingin lihat demo tampilannya. cukup matikan saja koneksi internet kalian saaat mengunjungi blog ini.

Referensi & kode : https://github.hubspot.com/offline/docs/welcome/
Indonesia
April 07, 2020 • 5 komentar
Disclaimer: gambar, artikel ataupun video yang ada di web ini terkadang berasal dari berbagai sumber media lain. Hak Cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami di halaman ini.
Isi dari komentar adalah tanggung jawab dari pengirim. FYI Indonesia mempunyai hak untuk tidak memperlihatkan komentar yang tidak etis atau kasar. Jika ada komentar yang melanggar aturan ini, tolong dilaporkan.