Hello sahabat Blogger, berjumpa lagi dengan Aloe dalam postingan tentang Puluhan Efek Animasi Loading Keren dan Unik untuk Blog Anda. Blogger sekalian, sebelum Anda mulai melakukan kegiatan blogging terutama menulis artikel di blog, apa yang pertama kali Anda lakukan? Membuka browser kah? Menentukan ide kah? Atau menyusun kerangka berfikir dulu? Hahahaha tentu saja bukan. Jawaban yang benar adalah menghidupan PC/Notebook/Netbook sobat terlebih dahulu, hehehe. Tentu saja hal ini harus dilakukan terlebih dahulu, toh gimana mau menulis kalau komputer saja belum hidup. Namun yang menjadi masalah bukan pada menghidupkan komputer ataupun menulis artikel, tetapi coba Anda perhatikan ketika pertama kali komputer Anda dihidupkan, di sesi welcome screen, Anda harus menunggu sejenak sebelum bisa masuk ke desktop windows (bagi pengguna windows). Di bagian welcome screen tersebut baik windows XP, 7 atau 8 terdapat efek animasi loading dimana tiap versi windows memiliki efek animasi loading yang berbeda-beda.
Pernahkah Anda berfikir kalau efek animasi loading seperti pada welcome screen windows tersebut dapat diterapkan pada blog kita? Jika Anda tidak pernah memikirkan hal tersebut maka mulai sekarang mulailah berfikir tetang hal tersebut, hehehe, karena pada kesempatan kali ini Aloe Akan menunjukkan Puluhan Efek Animasi Loading Keren dan Unik untuk Blog Anda dan Bagaimana cara memasangnya di blog Anda lengkap dengan gambar. Okey langsung saja kita mulai,
Hal-hal yang harus dipersiapkan terlebih dahulu:
- PC/Notebook/Netbook
- Text Editor seperti notepad atau yang lainnya
- Koneksi internet
- Otak yang fresh, hehehe
- Pertama Anda harus menyiapkan file gambar animasi berformat gif yang akan Anda gunakan sebagai gambar animasi loading di blog Anda, untuk itu silahkan buka browser Anda dan masukan alamat ini http://preloaders.net,
- Silahkan pilih bentuk animasi loading yang Anda inginkan, setelah Anda memilih salah satu maka akan keluar tampilan seperti gambar di bawah ini,
- Foreground color untuk mentukan warna animasi loading yang Anda inginkan
Background color untuk menentukan warna background animasi loading yang Anda inginkan
Animation speed untuk menentukan kecepatan gerak animasi loading, silahkan atur sesuai selera Anda
Preloader size (px) untuk menentukan ukuran animasi loading, silahkan masukan angka pada kotak Width untuk lebar dan kotak Height untuk tinggi animasi loading
Setelah semuanya diatur, silahkan klik Generate preloader untuk melihat hasil editan Anda, jika Anda sudah merasa puas, klik Download
- Sampai disini Anda sudah mendapatkan file gambar gif untuk animasi loading di blog Anda. Langkah selanjutnya adalah Anda harus membuat sebuah link url gambar tadi yang nantinya link url ini akan Anda masukan ke dalam script animasi loading di blog Anda. Untuk membuat link url gambar gif tadi ikuti langkah selanjutnya
- Silahkan log in ke dashboard blogger Anda, kemudian buat sebuah page. Untuk judul page silahkan dikosongkan saja, kemudian pada bagian compose (konten artikel) silahkan Anda upload gambar gif tadi dan masukan ke bagian compose (jangan HTML). Setelah gambar gif berhasil dimasukkan, klik kanan gambar tersebut lalu klik Open Link in New Tab
- Kemudian gambar gif tadi akan ditampilkan, selanjutnya copy url gambar tersebut dan paste-kan di notepad atau text editor lainnya
- Kemudian kembali ke Dashboard, masuk ke Template lalu klik Edit HTML
- Cari tag ]]></b:skin> dan paste-kan script di bawah ini tepat di atas tag ]]></b:skin> tersebut
#page-loader { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; z-index:999999; background: #000 url("http://1.bp.blogspot.com/-XLNuwxigi1E/VXqiILWpISI/AAAAAAAAAbo/SJnKG4VpL3U/s1600/727.GIF") no-repeat 50% 50%; padding:1em 1.2em; display:none }
Silahkan ganti text warna kuning dengan kode HTML warna sesuai dengan warna background animasi loading Anda, jika Anda tidak tahu kode HTML warna silahkan buka link ini http://html-color-codes.info/
Silahkan ganti text warna hijau dengan url gambar animasi loading yang sudah anda copy di notepad
- Kemudian cari tag </body> dan paste-kan script di bawah ini di atas tag </body> tersebut
<script type='text/javascript'> //<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
- Sekarang silahkan buka address/alamat blog Anda di browser, setelah masuk reload halaman blog Anda dan lihat hasilnya. Berikut ini adalah gambar tampilan blog saya yang sudah saya modifikasi efek loadingnya
Bagaimana? Bagus bukan tampilan loading blog Anda sekarang?
Oke demikianlah postingan saya tentang Puluhan Efek Animasi Loading Keren dan Unik untuk Blog Anda, semoga dapat bermanfaat dan senang bisa berbagi ilmu. Terima kasih atas kunjungannya dan sampai jumpa.
