Cara Membuat Preloader dengan JQuery

Posted by Published on 0 comments

Apa itu preloader? Banyak dari Anda mungkin telah melihatnya. Dan bagi Anda yang belum mengerti dengan apa itu yang disebut dengan preloader, jika Anda berselancar di internet dan pernah melihat sebuah gambar yang ditampilkan sebelum halaman dimuat sepenuhnya, setelah halaman tersebut telah dimuat kemudian gambar tersebut perlahan-lahan menghilang, efek semacam inilah yang disebut dengan istilah preloader.

Lalu untuk apa manfaatnya? Penambahan preloader ini ditujukan untuk meningkatkan kinerja dan memberikan kontrol pemuatan yang lebih halus kepada pengguna sebelum halaman yang sebenarnya bisa ditampilkan. Untuk itu sangat disarankan agar semua orang untuk menambahkan efek preloading ini ke blog masing-masing karena akan membuat blog lebih indah dan terlihat lebih profesional. Oleh karena itulah tutorial kali ini akan menunjukkan kepada Anda bagaimana cara menambahkan preloader tersebut ke blog Anda.

Cara Membuat Preloader Blogspot dengan JQuery

Cara membuat preloader Blogspot dengan menggunakan JQuery adalah sebagai berikut:

  1. Buka blogger.com
  2. Pada menu, pilih sub menu Tema, lalu klik Edit HTML.
  3. Pastikan tema Blogspot yang digunakan sudah menggunakan JQuery. Jika belum, tambahkan code di bawah ini di atas tag </head>. Tetapi jika tema Blogger yang digunakan tersebut sudah memakai JQuery, langkah ini diabaikan saja.
    4. <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
  4. Lalu tambahkan code di bawah ini di bawah tag <body>
    5. <div id="preloader">
<div class="preloader">
<img src="{URL GAMBAR}"/>
</div>
</div>

    Note: Ganti {URL GAMBAR} dengan URL gambar yang mau dijadikan preloader.

  5. Kemudian tambahkan code CSS di bawah ini tepat di atas tag ]]></b:skin>
    6. #preloader{
background-color:#FFF;
position:fixed;
text-align:center;
left:0;
right:0;
top:0;
bottom:0;
width:100%;
height:100%;
z-index:9999}

.preloader{
position:relative;
left:0;
right:0;
top:0;
bottom:0;
width:100%;
height:100%}

.preloader img{
position:relative;
left:0;
right:0;
top:0;
bottom:0;
width:100%;
height:100%;
z-index:9999}
  6. Setelah itu, tambahkan script Javascript di bawah ini di atas tag </body>
    7. <script type="text/javascript">//<![CDATA[
(function($) {
$(window).load(function() {
$('#preloader').delay(300).fadeOut('slow');
});
})(window.jQuery);
//]]></script>
  7. Lalu klik Simpan Tema. Selesai.

Selamat mencoba.

Posted by

Published on

Edit This

Categorized in , , , , , ,

0 Readers Interaction:

Post a Comment