Cara Membuat Animasi Efek Loading Di Blog

Januari 29, 2018

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

Efek loading atau mampu 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 mampu kita buat menggunakan script, jquery, gambar, serta menggunakan css3 yang tentunya harus dengan pemberian sebuah script jquery.
Nah, pada tutorial kali ini saya akan menuliskan 2 cara membuat animasi efek loading di blogger, yaitu :

Cara membuat animasi efek loading menggunakan CSS3 + jQuery
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 yaitu :

Masuk ke dasbor blogger
Buka halaman Template
Backup dahulu template blogger yang digunakan untuk jaga-jaga
Klik tombol Edit HTML

Pasang instruksi CSS3 berikut sempurna di atas instruksi </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 sempurna di atas instruksi </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'/> yaitu script jQuery library, silakan hapus instruksi tersebut apabila template blogger sahabat sudah menggunakannya.

Selanjutnya pasang instruksi html berikut di bawah instruksi <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 hingga langkah 4.

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

 <style type='text/css'> #bbtloading {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMV9xfExruSR7GU6Ht303-qyhXkxUqf3MQMmtPqMR9uP1G7xdnXemCUP_dh3EzRwIn2XoroV5yyCzovZjp2Q-5yXtIOaXSIxDIJAVvvNLSoQarXo4IjgBLyuqz7NCHEQJakrY2OOcizHvW/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMV9xfExruSR7GU6Ht303-qyhXkxUqf3MQMmtPqMR9uP1G7xdnXemCUP_dh3EzRwIn2XoroV5yyCzovZjp2Q-5yXtIOaXSIxDIJAVvvNLSoQarXo4IjgBLyuqz7NCHEQJakrY2OOcizHvW/s1600/loading-animation.gif yaitu url gambar, silakan ganti dengan gambar lain kalau ingin menggunakan gambar loading lainnya.

Pasang instruksi html berikut di bawah instruksi <body>

 <div id='bbtloading'/>

Kemudian pasang script berikut di atas instruksi </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'/> yaitu script jQuery library, silakan hapus instruksi tersebut apabila template blogger sahabat sudah menggunakannya.

Sekarang silakan simpan pengaturan template dan silakan coba lihat karenanya dengan cara membuka blog sobat.

Hasil efek animasi loading sederhana menggunakan gambar

Selamat mencoba membuat animasi efek loading di blog sahabat dan supaya bermanfaat

Cari Blog Ini

blog cara dan tutorial