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

#Tags

2 komentar untuk *Memasang Lines Animasi Preloading di Blogger!

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

Balas

ngak juga koq gan!

bisa dicoba dlu aja, biar sipp!

Balas

Silahkan berkomentar sesuai topik artikel diatas dan jangan buang waktu anda hanya untuk membuat komentar SPAM disini.