×

search by faronesia.com

FARONESIA
Profesional and Specialist WebDesign by Faronesia

Selain tutorial, kami juga menyediakan layanan penambah follower untuk akun Instagram dan Tiktok anda dengan harga terjangkau. Ayo buruan order sekarang juga!!!

Layanan Media

Cara Membuat Preloader Pada Blog VERSI 1

Faronesia.com - Hai sobat blogger, pada kesempatan kali ini saya memberikan tutorial singkat kepada anda yaitu cara membuat preloader pada blog. Apasih preloader blog? Apa fungsinya pada blog? Apa dampaknya? Bagaimana cara pemasangannya? Dan berbagai pertanyaan lainnya akan saya jawab pada artikel ini, maka simaklah dengan seksama.

Preloader blog

Apakah anda pernah melihat tampilan loading pada sebuah halaman web sebelum menampilkan isi kontennya? Nah seperti itulah penampang preloader blog. Preloader adalah sebuah tampilan yang memberikan informasi sumberdaya blog yang sedang dimuat saat itu juga.

Fungsi preloader blog

Preloader / loading memiliki berbagai fungsi salah satunya yang telah disebutkan pada poin pertama yaitu memberikan informasi sumberdaya yang sedang dimuat, memperindah tampilan blog agar pengunjung tidak bosan, membuat web / blog terlihat lebih profesional, membantu menyamarkan proses load page (sumberdaya) website, meningkatkan kenyamanan pengunjung dan masih banyak lagi.

Dampak pemasangan preloader blog

Selain memiliki fungsi yang banyak, preloader juga memiliki dampak yang tergolong tidak bagus untuk blog. Dampak yang ditimbulkan dari pemasangan preloader / loading pada blog akan menambah beratnya proses load page atau pemuatan sumberdaya hal ini dikarenakan penambahan kode dan animasi bergerak pada blog. Namun dampak ini seimbang dengan fungsi yang diberikan pada poin diatas.

Cara membuat preloading pada blog

  • Masuk ke dashboard blog 
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML Cari kode </head> 
  • lalu tambahkan kode CSS dibawah ini tepat diatas kode </head>
<style>
.faronesialoading{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    position: fixed;
    display: flex;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}
.faronesiaload{
    width: 50px;
    height: 50px;
    border: 5px solid;
    color: #3498db;
    border-radius: 50%;
    border-top-color: transparent;
    animation: faronesiaload 1.2s linear infinite;
}
@keyframes faronesiaload{
    25%{
        color: #2ecc71;
    }
    50%{
        color: #f1c40f;
    }
    75%{
        color: #e74c3c;
    }
    to{
        transform: rotate(360deg);
    }
}
</style>
  • Selanjutnya cari kode <body>
  • lalu tambahkan kode HTML dibawah ini tepat dibawah kode <body>
<div class="faronesialoading">
<div class="faronesiaload"></div>
</div>
  • Selanjutnya cari kode </body>
  • lalu tambahkan kode HTML dibawah ini tepat diatas kode </body>
<script>
        $(window).on("load",function(){
            $(".faronesialoading").fadeOut(1000);
        });
    </script>
  • Selesai, lalu simpan template

Request tutorial lain?silahkan masuk ke halaman Tanggapan


Demikianlah mengenai Cara Membuat Preloader Pada Blog VERSI 1 semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.

Posting Komentar

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Modifikasi Tampilan Website Anda

Gunakan jasa kami, berikan kesan bahwa website anda professional.

Pesan Sekarang
Notifikasi pengguna

Aktifkan javascript dibrowser anda agar mendapatkan fitur jelajah yang lebih baik di situs kami.

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesia, caranya cukup dengan menekan tombol dibawah ini.

Tutup