Cara Membuat Animasi Efek Loading Di Blog - BBT: Tutorial lengkap cara membuat animasi efek loading di blog menggunakan CSS3 serta cara membuat efek pre-loader sederhana menggunakan gambar loading

Cara Membuat Animasi Efek Loading Di Blog

Tidak semua blogger memasang animasi efek loading di blog mereka, mungkin karena tidak tahu caranya dan bisa juga karena tidak ingin memberi efek loading atau efek pre-loader di blog mereka.

Efek loading atau bisa juga disebut animasi pre-loader merupakan sebuah animasi yang bekerja sewaktu halaman sebuah blog / website sedang memuat/loading untuk membuka seluruh isi halaman sebuah blog, dan animasi efek loading tersebut akan hilang apabila seluruh isi pada halaman tersebut sudah berhasil dimuat.

Animasi efek loading ini bisa kita buat menggunakan script, jquery, gambar, serta menggunakan css3 yang tentunya harus dengan bantuan sebuah script jquery.
Nah, pada tutorial kali ini saya akan menuliskan 2 cara membuat animasi efek loading di blogger, yaitu :
  1. Cara membuat animasi efek loading menggunakan CSS3 + jQuery
  2. Cara membuat animasi efek loading menggunakan gambar + jQuery
Oke, saya akan bahas satu-satu.

Membuat Efek Loading Di Blogger Menggunakan CSS3 dan jQuery

Langkah - langkah yang harus kita lakukan adalah :
  1. Masuk ke dasbor blogger
  2. Buka halaman Template
  3. Backup dahulu template blogger yang digunakan untuk jaga-jaga
  4. Klik tombol Edit HTML
Pasang kode CSS3 berikut tepat di atas kode </head>

<style type='text/css'>
.bbt-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #fff;
}
#loading {
    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;
}

    #loading: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 */
    }

    #loading: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 */
        }
    }
</style>
Pasang lagi script berikut tepat di atas kode </head>

<script type='text/javascript' src='//code.jquery.com/jquery-2.1.3.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function() { $(".bbt-loading").fadeOut("slow"); })
//]]>
</script>
keteragan :
Kode <script type='text/javascript' src='//code.jquery.com/jquery-2.1.3.min.js'/> adalah script jQuery library, silakan hapus kode tersebut apabila template blogger sobat sudah menggunakannya.
Selanjutnya pasang kode html berikut di bawah kode <body>

<div class='bbt-loading'>
<div id='loading'/>
<div class='loading-section section-left'/>
<div class='loading-section section-right'/>
</div>
Selesai dan silakan simpan pengaturan template.

Hasil animasi loading menggunakan CSS3


Cara Bikin Efek Pre-Loader Di Blogger Menggunakan Gambar dan jQuery

Ikuti langkah - langkah di atas sampai langkah 4.

Selanjutnya pada halaman editor template blogger silakan pasang kode CSS yang berisi gambar berikut di atas kode </head>

<style type='text/css'>
#bbtloading {background:url(https://2.bp.blogspot.com/-KNrhlXjboRk/V9MnZJPeIvI/AAAAAAAAFb0/XPjavW7MEhIgBJZS_gMftHlEUpXmezpaACLcB/s1600/loading-animation.gif) no-repeat center;background-color:rgb(255,255,255);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;}
</style>
Keterangan :
Kode https://2.bp.blogspot.com/-KNrhlXjboRk/V9MnZJPeIvI/AAAAAAAAFb0/XPjavW7MEhIgBJZS_gMftHlEUpXmezpaACLcB/s1600/loading-animation.gif adalah url gambar, silakan ganti dengan gambar lain jika ingin menggunakan gambar loading lainnya.
Pasang kode html berikut di bawah kode <body>

<div id='bbtloading'/>
Kemudian pasang script berikut di atas kode </body>

<script type='text/javascript' src='//code.jquery.com/jquery-2.1.3.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#bbtloading").fadeOut(1e3)});
</script>
keteragan :
Kode <script type='text/javascript' src='//code.jquery.com/jquery-2.1.3.min.js'/> adalah script jQuery library, silakan hapus kode tersebut apabila template blogger sobat sudah menggunakannya.
Sekarang silakan simpan pengaturan template dan silakan coba lihat hasilnya dengan cara membuka blog sobat.

Hasil efek animasi loading sederhana menggunakan gambar

loading animation
Selamat mencoba membuat animasi efek loading di blog sobat dan semoga bermanfaat
loading...
Lihat / Tinggalkan Komentar
- All Rights Reserved. Powered by Blogger. Membuat Blog

Terimakasih telah membaca , semoga artikel tentang Cara Membuat Animasi Efek Loading Di Blog yang ada di blog ini bermanfaat buat sobat