08 May 2014

Membuat Efek Loading Seperti Blog Kang Ismet

Efek Loading Keren

Membuat Efek Loading Keren Seperti Blog Kang Ismet - Selamat datang sobat semua, sekarang saya akan membagikan Tutorial '"Membuat Efek Loading Seperti Blog KI"  efek loading ini memang sudah populer / sudah banyak yang membagikannya, tapi tidak sempurna rasanya jika tutorial ini tidak ada di blog kesayangan sobat semua. Silahkan simak baik-baik tutorial ini.

Langkah Pertama : Buka Blogger > Template > Edit HTML
Langkah Kedua : Masukan kode CSS di bawah ini tepat di atas ]]></b:skin> atau </style>

 #page-loader {
    position:fixed !important;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:999999;
    background: #303030 url("http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif") no-repeat 50% 50%;
    padding:1em 1.2em;
    display:none
    } 


Langkah Ketiga : Masukan kode di bawah ini tepat di atas </head>

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>    


NOTE : Lewati langkah ketiga, jika template blog sobat telah dipasangkan Libs/Jquery.

Langkah Keempat : Masukan kode di bawah ini tepat di atas </body>

  <script type='text/javascript'>
    //<![CDATA[
    // Menyisipkan markup tabir animasi
    $(document.body).append('<div id="page-loader"></div>');
    // Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
    $(window).on("beforeunload", function() {
        // ... tampilkan tabir animasi dengan efek `.fadeIn()`
        $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
    });
    //]]>
    </script> 


Langkah Terakhir : Simpan template sobat...

Semoga Tutorial ''Membuat Efek Loading Seperti Blog Kang Ismet'' bermanfaat bagi sobat, jangan lupa like, share, dan komentarnya ya, tunggu tutorial selanjutnya..
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic