Friday, January 15, 2016

Cara membuat page loading sederhana

Oke Sobat pada kesempatan ini 9template9.blogspot.com akan membagikan cara membuat animasi Loading page sederhana di blogspot Untuk membuat efek Keren page loading di blog ini kita, jadi jangan takut kalok page loadi memberatkan blog mu . Dengang meambahkan efek keren loading seperti. dapa mempercantik tampila blog anda pengunjungan yang hampir ke blog kamu

Cara membuat Loading blog sederhana 


  1. Login Blogger
  2. klik menu Template => Edit HTML
  3. Cari Kode ]]</B:Skin> 
  4. COPY KODE CSS Dibawah ini, lalu paste di atas kode ]]</B:Skin>  
  5.  Demo
  6. /* KURUMI THEME */
    .ip-header {
    position: fixed;
    top: 0;
    z-index: 100;
    min-height: 480px;
    width: 100%;
    height: 100%;
    background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR9eqwwPxvFRdgDPqdI0_Kk4VXkK5lztBV27n-6cYgY-yxBwl0jtdUWae_atRTR7iTWsaua8LQgB7-0UHuK5DUaBQnH5s48aXxSHqFDVBAq4uOyOuP9ahBovVazjoMNWEPAJyzTdG61VgR/s1600/kurumi.gif) no-repeat center center;
    /* warna background dan gambar loader */
    z-index: 999999;
    }
    .ip-header .ip-loader svg path.ip-loader-circlebg {
    stroke: #222; /* warna background circle loader */
    }
    .ip-header .ip-loader svg path.ip-loader-circle {
    -webkit-transition: stroke-dashoffset 0.2s;
    transition: stroke-dashoffset 0.2s;
    stroke: #DB2209; /* Warna garis circle saat loading */
    }
  7. Copy-paste juga semua CSS dibawah ini setelah css tema tadi.
  8. /* Pre-Loader main */
    .ip-loader {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    cursor: default;
    pointer-events: none;
    }
    .ip-loader {
    bottom: 20%;
    }
    .ip-header .ip-inner {
    display: block;
    margin: 0 auto;
    }
    .ip-header .ip-loader svg path {
    fill: none;
    stroke-width: 6;
    }

    /* Animasi */
    .loading .ip-loader {
    opacity: 1;
    -webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
    animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
    }

    .loading .ip-loader {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    }

    @-webkit-keyframes animInitialHeader {
    from { opacity: 0; -webkit-transform: translate3d(0,800px,0); }
    }
    @keyframes animInitialHeader {
    from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); }
    }

    .loaded .ip-loader {
    opacity: 1;
    }

    .loaded .ip-loader {
    -webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
    animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
    }

    @-webkit-keyframes animLoadedLoader {
    to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
    }

    @keyframes animLoadedLoader {
    to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
    }

    /* Animasi header ketika loading selesai */
    .loaded .ip-header {
    -webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
    animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
    }

    @-webkit-keyframes animLoadedHeader {
    to { -webkit-transform: translate3d(0,-100%,0); }
    }
    @keyframes animLoadedHeader {
    to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
    }
    .layout-switch .ip-header {
    position: absolute;
    }
    /* End Preloader */
  9. Selanjutnya, Copy-paste semua kode HTML dibawah ini tepat dibawah <body> atau
    <body class ...>
    <div class='ip-container' id='ip-container'>
    <div class='ip-header'>
    <div class='ip-loader'>
    <svg class='ip-inner' height='60px' viewBox='0 0 80 80' width='60px'>
    <path class='ip-loader-circlebg' d='M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z'/>
    <path class='ip-loader-circle' d='M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z' id='ip-loader-circle'/></svg></div></div></div>
  10. Kemudian letakan kode Js dibawah ini tepat diatas kode </head>
    <script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaTUFNbmtWeHpzOTQ"/>
  11.  dan letakan ketiga Js dibawah ini tepat diatas kode </body>
    <script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaUWZGRkJNdGg2bWM"></script>
    <script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaOFRtR2kzckx6bkE"></script>
    <script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaRy1Qa1RiTDl6T0E"></script>
  12.  Simpan template dan buka halaman blog anda dan lihat hasilnya
di

No comments:

Post a Comment