Memasang Lines Animasi Preloading di Blogger

Memasang Lines Animasi Preloading di Blogger

Memasang Lines Animasi Preloading di Blogger - Animasi Line Preloading ini adalah widget animasi loading page yang ke 4 yang sudah saya share diblog saya ini. jadi saya tidak akan mengulang lagi untuk apa animasi page loading ini. karna fungsi nya masih sama seperti animasi page preloading yang sebelum-sebelumnya.

Baca Juga:
  1. Memasang Dotted Animasi Preloading
  2. Memasang Efek Loading Youtube page di Blog
  3. Memasang Animasi Preloading di Blogger
Untuk DEMO, silahkan Klik Disini.

Untuk anda yang berminat menggunakan Animasi Preloading yang satu ini, bisa ikuti langkah-langkahnya dibawah ini:
  1. Masuk ke Akun Blogger
  2. Pilih Template > Edit HTML
  3. Cari kode ]]></b:skin> dan paste css berikut tepat diatas nya.
 
/* ==========================================================================
   LOADING PAGE
   ========================================================================== */

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;

    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

    z-index: 1001;
}

    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #e74c3c;

        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #f9c922;

        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }


    @-webkit-keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }
    @keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }

    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: #222222;
        z-index: 1000;
        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX(0);  /* IE 9 */
        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
    }

    #loader-wrapper .loader-section.section-left {
        left: 0;
    }

    #loader-wrapper .loader-section.section-right {
        right: 0;
    }

    /* Loaded */
    .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%);  /* IE 9 */
                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%);  /* IE 9 */
                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    
    .loaded #loader {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;  
                transition: all 0.3s ease-out;
    }
    .loaded #loader-wrapper {
        visibility: hidden;

        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);  /* IE 9 */
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.3s 1s ease-out;  
                transition: all 0.3s 1s ease-out;
    }
    
    /* JavaScript Turned Off */
    .no-js #loader-wrapper {
        display: none;
    }
    .no-js h1 {
        color: #222222;
    }

    #content {
        margin: 0 auto;
        padding-bottom: 50px;
        width: 80%;
        max-width: 978px;
    } 

4. Selanjutnya cari kode <body> dan paste kode berikut tepat dibawahnya.
 <div id='loader-wrapper'>
   <div id='loader'/>

   <div class='loader-section section-left'/>
            <div class='loader-section section-right'/>

  </div> 

5. Terakhir cari kode </body> dan paste kode berikut tepat diatasnya.
 <script type='text/javascript'>
;window.Modernizr=function(a,b,c){function D(a){j.cssText=a}function E(a,b){return D(n.join(a+&quot;;&quot;)+(b||&quot;&quot;))}function F(a,b){return typeof a===b}function G(a,b){return!!~(&quot;&quot;+a).indexOf(b)}function H(a,b){for(var d in a){var e=a[d];if(!G(e,&quot;-&quot;)&amp;&amp;j[e]!==c)return b==&quot;pfx&quot;?e:!0}return!1}function I(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:F(f,&quot;function&quot;)?f.bind(d||b):f}return!1}function J(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+&quot; &quot;+p.join(d+&quot; &quot;)+d).split(&quot; &quot;);return F(b,&quot;string&quot;)||F(b,&quot;undefined&quot;)?H(e,b):(e=(a+&quot; &quot;+q.join(d+&quot; &quot;)+d).split(&quot; &quot;),I(e,b,c))}function K(){e.input=function(c){for(var d=0,e=c.length;d&lt;e;d++)u[c[d]]=c[d]in k;return u.list&amp;&amp;(u.list=!!b.createElement(&quot;datalist&quot;)&amp;&amp;!!a.HTMLDataListElement),u}(&quot;autocomplete autofocus list placeholder max min multiple pattern required step&quot;.split(&quot; &quot;)),e.inputtypes=function(a){for(var d=0,e,f,h,i=a.length;d&lt;i;d++)k.setAttribute(&quot;type&quot;,f=a[d]),e=k.type!==&quot;text&quot;,e&amp;&amp;(k.value=l,k.style.cssText=&quot;position:absolute;visibility:hidden;&quot;,/^range$/.test(f)&amp;&amp;k.style.WebkitAppearance!==c?(g.appendChild(k),h=b.defaultView,e=h.getComputedStyle&amp;&amp;h.getComputedStyle(k,null).WebkitAppearance!==&quot;textfield&quot;&amp;&amp;k.offsetHeight!==0,g.removeChild(k)):/^(search|tel)$/.test(f)||(/^(url|email)$/.test(f)?e=k.checkValidity&amp;&amp;k.checkValidity()===!1:e=k.value!=l)),t[a[d]]=!!e;return t}(&quot;search tel url email datetime date month week time datetime-local number range color&quot;.split(&quot; &quot;))}var d=&quot;2.6.2&quot;,e={},f=!0,g=b.documentElement,h=&quot;modernizr&quot;,i=b.createElement(h),j=i.style,k=b.createElement(&quot;input&quot;),l=&quot;:)&quot;,m={}.toString,n=&quot; -webkit- -moz- -o- -ms- &quot;.split(&quot; &quot;),o=&quot;Webkit Moz O ms&quot;,p=o.split(&quot; &quot;),q=o.toLowerCase().split(&quot; &quot;),r={svg:&quot;http://www.w3.org/2000/svg&quot;},s={},t={},u={},v=[],w=v.slice,x,y=function(a,c,d,e){var f,i,j,k,l=b.createElement(&quot;div&quot;),m=b.body,n=m||b.createElement(&quot;body&quot;);if(parseInt(d,10))while(d--)j=b.createElement(&quot;div&quot;),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=[&quot;&amp;#173;&quot;,&#39;&lt;style id=&quot;s&#39;,h,&#39;&quot;&gt;&#39;,a,&quot;&lt;/style&gt;&quot;].join(&quot;&quot;),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background=&quot;&quot;,n.style.overflow=&quot;hidden&quot;,k=g.style.overflow,g.style.overflow=&quot;hidden&quot;,g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},z=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b).matches;var d;return y(&quot;@media &quot;+b+&quot; { #&quot;+h+&quot; { position: absolute; } }&quot;,function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)[&quot;position&quot;]==&quot;absolute&quot;}),d},A=function(){function d(d,e){e=e||b.createElement(a[d]||&quot;div&quot;),d=&quot;on&quot;+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement(&quot;div&quot;)),e.setAttribute&amp;&amp;e.removeAttribute&amp;&amp;(e.setAttribute(d,&quot;&quot;),f=F(e[d],&quot;function&quot;),F(e[d],&quot;undefined&quot;)||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:&quot;input&quot;,change:&quot;input&quot;,submit:&quot;form&quot;,reset:&quot;form&quot;,error:&quot;img&quot;,load:&quot;img&quot;,abort:&quot;img&quot;};return d}(),B={}.hasOwnProperty,C;!F(B,&quot;undefined&quot;)&amp;&amp;!F(B.call,&quot;undefined&quot;)?C=function(a,b){return B.call(a,b)}:C=function(a,b){return b in a&amp;&amp;F(a.constructor.prototype[b],&quot;undefined&quot;)},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!=&quot;function&quot;)throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e}),s.flexbox=function(){return J(&quot;flexWrap&quot;)},s.canvas=function(){var a=b.createElement(&quot;canvas&quot;);return!!a.getContext&amp;&amp;!!a.getContext(&quot;2d&quot;)},s.canvastext=function(){return!!e.canvas&amp;&amp;!!F(b.createElement(&quot;canvas&quot;).getContext(&quot;2d&quot;).fillText,&quot;function&quot;)},s.webgl=function(){return!!a.WebGLRenderingContext},s.touch=function(){var c;return&quot;ontouchstart&quot;in a||a.DocumentTouch&amp;&amp;b instanceof DocumentTouch?c=!0:y([&quot;@media (&quot;,n.join(&quot;touch-enabled),(&quot;),h,&quot;)&quot;,&quot;{#modernizr{top:9px;position:absolute}}&quot;].join(&quot;&quot;),function(a){c=a.offsetTop===9}),c},s.geolocation=function(){return&quot;geolocation&quot;in navigator},s.postmessage=function(){return!!a.postMessage},s.websqldatabase=function(){return!!a.openDatabase},s.indexedDB=function(){return!!J(&quot;indexedDB&quot;,a)},s.hashchange=function(){return A(&quot;hashchange&quot;,a)&amp;&amp;(b.documentMode===c||b.documentMode&gt;7)},s.history=function(){return!!a.history&amp;&amp;!!history.pushState},s.draganddrop=function(){var a=b.createElement(&quot;div&quot;);return&quot;draggable&quot;in a||&quot;ondragstart&quot;in a&amp;&amp;&quot;ondrop&quot;in a},s.websockets=function(){return&quot;WebSocket&quot;in a||&quot;MozWebSocket&quot;in a},s.rgba=function(){return D(&quot;background-color:rgba(150,255,150,.5)&quot;),G(j.backgroundColor,&quot;rgba&quot;)},s.hsla=function(){return D(&quot;background-color:hsla(120,40%,100%,.5)&quot;),G(j.backgroundColor,&quot;rgba&quot;)||G(j.backgroundColor,&quot;hsla&quot;)},s.multiplebgs=function(){return D(&quot;background:url(https://),url(https://),red url(https://)&quot;),/(url\s*\(.*?){3}/.test(j.background)},s.backgroundsize=function(){return J(&quot;backgroundSize&quot;)},s.borderimage=function(){return J(&quot;borderImage&quot;)},s.borderradius=function(){return J(&quot;borderRadius&quot;)},s.boxshadow=function(){return J(&quot;boxShadow&quot;)},s.textshadow=function(){return b.createElement(&quot;div&quot;).style.textShadow===&quot;&quot;},s.opacity=function(){return E(&quot;opacity:.55&quot;),/^0.55$/.test(j.opacity)},s.cssanimations=function(){return J(&quot;animationName&quot;)},s.csscolumns=function(){return J(&quot;columnCount&quot;)},s.cssgradients=function(){var a=&quot;background-image:&quot;,b=&quot;gradient(linear,left top,right bottom,from(#9f9),to(white));&quot;,c=&quot;linear-gradient(left top,#9f9, white);&quot;;return D((a+&quot;-webkit- &quot;.split(&quot; &quot;).join(b+a)+n.join(c+a)).slice(0,-a.length)),G(j.backgroundImage,&quot;gradient&quot;)},s.cssreflections=function(){return J(&quot;boxReflect&quot;)},s.csstransforms=function(){return!!J(&quot;transform&quot;)},s.csstransforms3d=function(){var a=!!J(&quot;perspective&quot;);return a&amp;&amp;&quot;webkitPerspective&quot;in g.style&amp;&amp;y(&quot;@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}&quot;,function(b,c){a=b.offsetLeft===9&amp;&amp;b.offsetHeight===3}),a},s.csstransitions=function(){return J(&quot;transition&quot;)},s.fontface=function(){var a;return y(&#39;@font-face {font-family:&quot;font&quot;;src:url(&quot;https://&quot;)}&#39;,function(c,d){var e=b.getElementById(&quot;smodernizr&quot;),f=e.sheet||e.styleSheet,g=f?f.cssRules&amp;&amp;f.cssRules[0]?f.cssRules[0].cssText:f.cssText||&quot;&quot;:&quot;&quot;;a=/src/i.test(g)&amp;&amp;g.indexOf(d.split(&quot; &quot;)[0])===0}),a},s.generatedcontent=function(){var a;return y([&quot;#&quot;,h,&quot;{font:0/0 a}#&quot;,h,&#39;:after{content:&quot;&#39;,l,&#39;&quot;;visibility:hidden;font:3px/1 a}&#39;].join(&quot;&quot;),function(b){a=b.offsetHeight&gt;=3}),a},s.video=function(){var a=b.createElement(&quot;video&quot;),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType(&#39;video/ogg; codecs=&quot;theora&quot;&#39;).replace(/^no$/,&quot;&quot;),c.h264=a.canPlayType(&#39;video/mp4; codecs=&quot;avc1.42E01E&quot;&#39;).replace(/^no$/,&quot;&quot;),c.webm=a.canPlayType(&#39;video/webm; codecs=&quot;vp8, vorbis&quot;&#39;).replace(/^no$/,&quot;&quot;)}catch(d){}return c},s.audio=function(){var a=b.createElement(&quot;audio&quot;),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType(&#39;audio/ogg; codecs=&quot;vorbis&quot;&#39;).replace(/^no$/,&quot;&quot;),c.mp3=a.canPlayType(&quot;audio/mpeg;&quot;).replace(/^no$/,&quot;&quot;),c.wav=a.canPlayType(&#39;audio/wav; codecs=&quot;1&quot;&#39;).replace(/^no$/,&quot;&quot;),c.m4a=(a.canPlayType(&quot;audio/x-m4a;&quot;)||a.canPlayType(&quot;audio/aac;&quot;)).replace(/^no$/,&quot;&quot;)}catch(d){}return c},s.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},s.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}},s.webworkers=function(){return!!a.Worker},s.applicationcache=function(){return!!a.applicationCache},s.svg=function(){return!!b.createElementNS&amp;&amp;!!b.createElementNS(r.svg,&quot;svg&quot;).createSVGRect},s.inlinesvg=function(){var a=b.createElement(&quot;div&quot;);return a.innerHTML=&quot;&lt;svg/&gt;&quot;,(a.firstChild&amp;&amp;a.firstChild.namespaceURI)==r.svg},s.smil=function(){return!!b.createElementNS&amp;&amp;/SVGAnimate/.test(m.call(b.createElementNS(r.svg,&quot;animate&quot;)))},s.svgclippaths=function(){return!!b.createElementNS&amp;&amp;/SVGClipPath/.test(m.call(b.createElementNS(r.svg,&quot;clipPath&quot;)))};for(var L in s)C(s,L)&amp;&amp;(x=L.toLowerCase(),e[x]=s[L](),v.push((e[x]?&quot;&quot;:&quot;no-&quot;)+x));return e.input||K(),e.addTest=function(a,b){if(typeof a==&quot;object&quot;)for(var d in a)C(a,d)&amp;&amp;e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b==&quot;function&quot;?b():b,typeof f!=&quot;undefined&quot;&amp;&amp;f&amp;&amp;(g.className+=&quot; &quot;+(b?&quot;&quot;:&quot;no-&quot;)+a),e[a]=b}return e},D(&quot;&quot;),i=k=null,function(a,b){function k(a,b){var c=a.createElement(&quot;p&quot;),d=a.getElementsByTagName(&quot;head&quot;)[0]||a.documentElement;return c.innerHTML=&quot;x&lt;style&gt;&quot;+b+&quot;&lt;/style&gt;&quot;,d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a==&quot;string&quot;?a.split(&quot; &quot;):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&amp;&amp;!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e&lt;g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function(&quot;h,f&quot;,&quot;return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&amp;&amp;(&quot;+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),&#39;c(&quot;&#39;+a+&#39;&quot;)&#39;})+&quot;);return n}&quot;)(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&amp;&amp;!f&amp;&amp;!c.hasCSS&amp;&amp;(c.hasCSS=!!k(a,&quot;article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}&quot;)),j||p(a,c),a}var c=a.html5||{},d=/^&lt;|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g=&quot;_html5shiv&quot;,h=0,i={},j;(function(){try{var a=b.createElement(&quot;a&quot;);a.innerHTML=&quot;&lt;xyz&gt;&lt;/xyz&gt;&quot;,f=&quot;hidden&quot;in a,j=a.childNodes.length==1||function(){b.createElement(&quot;a&quot;);var a=b.createDocumentFragment();return typeof a.cloneNode==&quot;undefined&quot;||typeof a.createDocumentFragment==&quot;undefined&quot;||typeof a.createElement==&quot;undefined&quot;}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||&quot;abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video&quot;,shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:&quot;default&quot;,shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.mq=z,e.hasEvent=A,e.testProp=function(a){return H([a])},e.testAllProps=J,e.testStyles=y,e.prefixed=function(a,b,c){return b?J(a,b,c):J(a,&quot;pfx&quot;)},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,&quot;$1$2&quot;)+(f?&quot; js &quot;+v.join(&quot; &quot;):&quot;&quot;),e}(this,this.document),function(a,b,c){function d(a){return&quot;[object Function]&quot;==o.call(a)}function e(a){return&quot;string&quot;==typeof a}function f(){}function g(a){return!a||&quot;loaded&quot;==a||&quot;complete&quot;==a||&quot;uninitialized&quot;==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){(&quot;c&quot;==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&amp;&amp;g(l.readyState)&amp;&amp;(u.r=o=1,!q&amp;&amp;h(),l.onload=l.onreadystatechange=null,b)){&quot;img&quot;!=a&amp;&amp;m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&amp;&amp;y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&amp;&amp;(r=1,y[c]=[]),&quot;object&quot;==a?l.data=c:(l.src=c,l.type=a),l.width=l.height=&quot;0&quot;,l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),&quot;img&quot;!=a&amp;&amp;(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||&quot;j&quot;,e(a)?i(&quot;c&quot;==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&amp;&amp;h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName(&quot;script&quot;)[0],o={}.toString,p=[],q=0,r=&quot;MozAppearance&quot;in l.style,s=r&amp;&amp;!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&amp;&amp;&quot;[object Opera]&quot;==o.call(a.opera),l=!!b.attachEvent&amp;&amp;!l,u=r?&quot;object&quot;:l?&quot;script&quot;:&quot;img&quot;,v=l?&quot;script&quot;:u,w=Array.isArray||function(a){return&quot;[object Array]&quot;==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&amp;&amp;(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split(&quot;!&quot;),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f&lt;d;f++)g=a[f].split(&quot;=&quot;),(e=z[g.shift()])&amp;&amp;(c=e(c,g));for(f=0;f&lt;b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(&quot;.&quot;).pop().split(&quot;?&quot;).shift(),i.bypass||(e&amp;&amp;(e=d(e)?e:e[a]||e[g]||e[a.split(&quot;/&quot;).pop().split(&quot;?&quot;)[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&amp;&amp;&quot;css&quot;==i.url.split(&quot;.&quot;).pop().split(&quot;?&quot;).shift()?&quot;c&quot;:c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&amp;&amp;f.load(function(){k(),e&amp;&amp;e(i.origUrl,h,g),j&amp;&amp;j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&amp;&amp;b++;return b}(),a)a.hasOwnProperty(n)&amp;&amp;(!c&amp;&amp;!--m&amp;&amp;(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&amp;&amp;a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&amp;&amp;l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&amp;&amp;c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i&lt;a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&amp;&amp;h(j,l);else Object(a)===a&amp;&amp;h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&amp;&amp;b.addEventListener&amp;&amp;(b.readyState=&quot;loading&quot;,b.addEventListener(&quot;DOMContentLoaded&quot;,A=function(){b.removeEventListener(&quot;DOMContentLoaded&quot;,A,0),b.readyState=&quot;complete&quot;},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement(&quot;script&quot;),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&amp;&amp;g(k.readyState)&amp;&amp;(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement(&quot;link&quot;),j,c=i?h:c||f;e.href=a,e.rel=&quot;stylesheet&quot;,e.type=&quot;text/css&quot;;for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};

$(document).ready(function() {
 
 setTimeout(function(){
  $(&#39;body&#39;).addClass(&#39;loaded&#39;);
 }, 3000);
 
});
</script> 

6. Sekarang anda dapat menyimpan template anda.

Note! Pastikan template anda sudah terdapat Jquery.js untuk membuat animasi lebih optimal.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Sekarang anda telah  Memasang Lines Animasi Preloading di Blogger, semoga artikel ini dan widget animasinya bisa bermanfaat untuk anda semua. Jika anda memiliki masalah dalam penerapan kode ini silahkan ditanyakan dibawah ini.

Semoga bermanfaat..
Memasang Lines Animasi Preloading di Blogger Memasang Lines Animasi Preloading di Blogger Reviewed by Mgs Rama Dony on 5:52 AM Rating: 5

2 comments:

  1. Ijiin cba gan script.a
    Tpi kaya.a nii buat blog berat gan soalnya blog agan juga berat nii.
    Gtau karna widget atau karena postingannya terlalu banyak nii

    ReplyDelete
    Replies
    1. ngak juga koq gan!

      bisa dicoba dlu aja, biar sipp!

      Delete

Silahkan berkomentar sesuai topik artikel diatas.
1. Jangan tinggalkan link akitf
2. Jangan gunakan kata kotor, spam, sara, atau provokasi lain
3. Gunakanlah form komentar dengan baik dan bijak

Powered by Blogger.