Menambahkan Preloader di Blog
1. Pengertian
Preloader adalah sebuah fitur yang memunculkan proses load pada sebuah blog yang dapat kita terapkan dengan menggunakan Javascript, jQuery, CSS, dan HTML.
2. Manfaat
- Membantu menyamarkan proses load page website
- Membuat website terlihat proffesional
- Meningkatkan kenyamanan pengunjung
- Membuat blog menjadi lebih ringan
3. Langkah Kerja
- Buka Blogger. Pilih Tema > Edit HTML, tambahkan Script CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>
#cssload {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbxado5T0p3_mPBAjee8IuGPRv4KWEozdhMTpPjeysDPQJyIQ3SyD9RVnY9cIQDFIdPpl1Ss-5W-M0MeANldyVRGUqrRL8PjI0UTHtSoEAxCe814uslRxUyetHqxca2bi_a6WmPYe6ojY/s1600/loading.gif) no-repeat center;background-color:rgba(0,0,0,0.36);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;}
- Lalu tambahkan script berikut ini tepat dibawah tag <body>
<div id='cssload'/>
- Selanjutnya, tambahkan script Javascript dibawah ini tepat diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#cssload").fadeOut(1e3)});
//]]>
</script>
- Untuk mengganti animasi yang lebih menarik, silahkan buka dan copy link animasi dibawah ini dan letakan link di dalam background:url pada script pertama
- Terakhir, klik Simpan Tema dan lihat hasilnya. Jika animasi loading tidak muncul coba perhatikan penempatan kode atau ada kode yang tertinggal.
Semoga tutorial yang saya sampaikan diatas dapat bermanfaat. Jika ada yang ingin ditanyakan silahkan komen pada kolom komentar dibawah, terimakasih.
Comments