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

Offline.js adalah perpustakaan yang dapat digunakan untuk memberikan peringatan kepada pengguna Anda secara otomatis ketika mereka kehilangan koneksi internet. Misalnya, ketika pengguna mengakses email Gmail mereka. Perpustakaan ini dapat menangkap permintaan AJAX yang dibuat saat koneksi internet sedang down, dan kemudian membuat ulang permintaan tersebut saat koneksi internet kembali, sehingga blog atau aplikasi Anda tetap berfungsi dengan baik.

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

Cara Memasang Offline.js di Blogger/Blogspot

.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 </body>

<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/