Januari 31, 2014

Membuat Page Loading Dengan JQuery

Membuat Page Loading Dengan JQuery - Membuat page loading sebuah web atau blog bisa menggunakan flash atau JQuery. Pada kesempatan mari kita belajar membuat page loading memnggunakan JQuery. Page loading adalah satu fitur untuk menampilkan efek loading ketika perpindahan page. Dimana pada perpindahan halaman blog akan ditampilkan gambar atau animasi tertentu. Dengan page loading ini diharapkan sebagai indikator dan agar waktu load page tidak terasa lama bagi visitor. Selain itu dengan page loading blog akan terlihat lebih menarik. Demo bisa dilihat pada blog ini ketika perpindahan page akan muncul logo devilzart dengan tabir hitam transparan. Atas request dari salah satu visitor blog ini maka pada kesempatan ini mari kita belajar bersama bagaimana cara membuat page loading dengan JQuery yang smooth dan menarik untuk dilihat. Saatnya kita modif modifan template.

Dalam membuat page loading dengan JQuery ini kita membutuhkan suatu gambar animasi atau gambar apa saja untuk di load. Buatlah sebuah gambar dengan ukuran yang pas, saya recomendasi 200 x 200 pixel agar gambar page loading tidak pecah. Selanjutnya upload ke image hosting kesayangan sobat.

Membuat Page Loading Dengan JQuery

Sebelumnya meletakan script page loading blogger, pastikan sobat blogger sudah meletakan plugin jquery pada template sobat. Jika belum silahkan letakan kode dibawah ini diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>

Keterangan:
Pastikan plugin tersebut hanya ada satu saja di template blog sobat, hal ini untuk menghindari over load blog. Jquery plugin mempunyai banyak versi hal tersebut ditunjukan dengan tulisan berwarna merah pada kode diatas 1.9.1.

Untuk Script Page Loading Blogger silahkan copy kode berikut dan letakan diatas kode </body> pada template blog sobat :

<script type='text/javascript'>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader"></div>');
// Saat halaman terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
    // ... tampilkan tabir animasi dengan efek `.fadeIn()`
    $('#page-loader').fadeIn(700).delay(3000).fadeOut(700);
});
//]]>
</script>

Penjelasan script diatas :
pada document body disisipkan kode <div id="page-loader"></div>
ketika akan berpindah ke halaman lain page loader ditampilkan dengan efek fadein dengan waktu 700detik, dilakukan penundaan 3000detik, dan kemudian diakhiri dengan efek fadeout 700detik.

Keterangan :
Waktu animasi ditunjukan pada tulisan berwarna merah dapat disesuaikan dengan kondisi blog. Ini biasanya menyesuaikan dengan size halaman yang di load.

Berikut kode CSS untuk Page Loading Blogger, Copy diatas kode </b:skin>


#page-loader{
position:fixed !important;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:Black url('URL IMAGE') no-repeat 50% 50%;
font:0/0;
text-shadow:none;
padding:1em 1.2em;
display:none;opacity:.7
}

Penjelasan kode CSS diatas :
Page loader berada pada posisi fix, dengan background Black/Hitam transparan 70%, hal ini ditunjukan dengan kode css position:fixed, background:Black dan opacity:.7

Keterangan :
Tulisan dengan warna merah dapat diganti menyesuaikan kondisi blog sobat. Ganti "URL IMAGE"
dengan url gambar yang kalian punya. URL gambar mempunyai akhiran ekstensi JPG, PNG, atau GIF.
contoh : http://www.devilzart.com/gambar.jpg , JPG adalah ekstensi atau format bahwa itu adalah url gambar.

Sekian tutorial kecil tentang membuat page loading dengan JQuery, semoga bermanfaat, Jika ada pertanyaan silahkan ajukan pada kotak komentar untuk dibahas bersama. Guru yang baik adalah pengalaman.

20 comments » Membuat Page Loading Dengan JQuery

tolong mas bikin tutorial tombol download pake font awesome kaya mas

Balas

siap laksanakan sob. sama2 belajar ya biar jadi bahan diskusi. :D

Balas

Thanks ya Kang infonya :)

Balas

sama2 semoga bermanfaat sob.

Balas

kapan nih kang dibuatin postingan tombol downloadnya gue tunggunih
Makasih kang

Balas

Gan, maaf. OOT, ada cara buat read more otomatis tanpa java script?

Balas

Gan, Minta tutorial Auto Read More yang tanpa java script.

Balas

sabar sob, itu baru saya buatkan referensi dulu sob. banyak banget soalnya. ada 2 post soalnya, klo gak gitu susah dipahami. lagian klo dibuat langsung gak bisa buat belajar, ntar cuma bisa buat download button doang. saya pingin sobat bisa semua, karena font awesome ini banyak sekali manfaatnya bila diterapkan di web design.

Balas

ditunggu ya sob, banyak request soalnya. :D

Balas
Komentar ini telah dihapus oleh pengarang.

Mas share tutorial buat template dnk yg dari awal, ga pede pke template orang, hehe... thanks..

Balas

boleh sob nanti saya buatkan videonya lengkap deh klo pas luang. ditunggu ya. :D

Balas

Gan bisa bantu web saya www.arsimad.com, mau buat readmore dan ada beberapa kekurangan dikit. Untuk chating dan konfirm harga ini pin BB saya 29c28aad. Saya tinggal di Sleman Utara. Trm ksh sblmnya y....

Balas

mohon maaf gan ane gak punya BB hehe, itu website menggunakan content management dengan platform apa ya gan? ane juga baru berlajar soalnya.

Balas

gan maaf OOT, liat blog ane gan web-cyber.tk , itu kan kolom postingnya 2 kolom, gimana caranya agar bisa satu kolom gan? thanks gan :D

Balas

cari kode dengan cara masuk ke edit template ctrl+f search kode .post

css punya kmu.
.post {
margin: 0px 4px 4px 0px !important;
float: left !important;
width: 295px;
height: 145px;
overflow: hidden;
display: inline;
}


hapus tuh width: 295px;

Balas

web saya www.arsimad.com menggunakan codeigniter berbasis php. Sbnrnya ada bnyak kekurangan dsana dan ilmu saya terbatas. Untuk komunikasi bsa pake gtalk arsimad9@gmail.com. Jk agan bsa bantu, biaya bisa kita konfirm

Balas

waduh sob, nyerah ane klo code igneter, ane juga baru belajar PHP blm nyampe ilmunya ke CI

Balas

bagaimana cara membuat vidio seperti di youtub, Web tanpa ada loadingnya sedikitpun dan vidio langsung berjalan? mohon bantuannya.

Balas

Mohon maaf komentar pada blog ini kami moderasi dan tidak akan langsung ditampilkan. Silahkan berikan komentar sesuai judul dan isi artikel. Komentar yang mengandung link aktif / live link, iklan, pornografi, dan semacamnya akan dihapus atau kami masukan pada kategori SPAM.

Catatan :
1. Untuk menyisipkan kode gunakan  <i rel="code">kode yang akan disisipkan</i>
2. Untuk menyisipkan kode panjang gunakan <i rel="pre">kode yang akan disisipkan</i>
3. Untuk menyisipkan quote gunakan <b rel="quote">catatan anda</b>
4. Untuk menyisipkan gambar gunakan <i rel="image">URL gambar</i>
5. Untuk menyisipkan video gunakan <i rel="youtube">URL Video youtube</i>

Keterangan :
Gunakan HTML konverter sebelum menyisipkan kode.
Contoh link image : http://blablabla.com/image.jpg.

Profile yang mengandung broken link akan dihapus tanpa pemberitahuan terlebih dahulu.
Konversi Kode

Top