Ngalor Ngidul: JQuery

Cara Memasang jQuery Image Preloader

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx9Y5dPM74jIsRmrB4REvSNGsNqvv7eeg1DYEZraKI1d64de4hzca8ZeWLcAnKxrxSzzPwui-nZV71TUzqmLgXRQgYA8So1Js660oXduHp_X5QOkht1epNvkK8ZJz0uwWdB1MfO8E68Ys/s1600/preloader_02_1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx9Y5dPM74jIsRmrB4REvSNGsNqvv7eeg1DYEZraKI1d64de4hzca8ZeWLcAnKxrxSzzPwui-nZV71TUzqmLgXRQgYA8So1Js660oXduHp_X5QOkht1epNvkK8ZJz0uwWdB1MfO8E68Ys/s1600/preloader_02_1.jpg" /></a></div><div style="text-align: justify;">jQuery Image Preloader di perkenalkan oleh Abhin Sharma pada situs net tuts+ dan merupakan salah satu plugin yang banyak digunakan pada situs-situs profesional. Jika di tilik dari fungsinya, sebenarnya plugin ini hanyalah tambahan untuk mempercantik penampilan gambar.<br />
<br />
Plugin jQuery Image Preloader berfungsi untuk memberikan efek delay (lambat) pada saat proses pemanggilan (load) gambar pada halaman situs, selama pemanggilan gambar belum sempurna maka lokasi gambar tersebut akan di gantikan dengan animasi loading. <br />
<br />
Setelah gambar tersebut siap ditampilkan (load 100%), animasi loading akan di sembunyikan dan gambar akan ditampilkan dengan efek fade yang lembut. Plugin ini akan memberikan kesan profesional pada blog dan menunjukan kepada pengunjung bahwa bagian yang terkecil sekalipun sangat diperhatikan sang pemilik blog. Bagaimana Cara Memasang  jQuery  Image Preloader ini di Blog?<br />
<br />
Sebagai contoh, diblog ini juga menggunakan jQuery Image Preloader. Untuk Cara Memasang jQuery Image Preloader di blogspot, kita cukup menambahkan kode script dan CSS berikut ini kedalam template blog kita.<br />
<br />
Langkah pertama adalah cari kode: <b></head></b><br />
Kemudian letakkan kode script berikut ke atasnya<br />
<div id="CSS-area1"><div id="CSS-area"><br />
<br />
<center><br />
<span style="color: #cc0000;"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script></span><br />
<script src='http://bloggeracsessories.googlecode.com/files/jquery.preloader.min.js' type='text/javascript'/><br />
<script type='text/javascript'><br />
$(function(){<br />
 $(&quot;body&quot;).preloader();<br />
});<br />
</script></center></div></div><br />
Kemudian cari kode: <b>]]</b:skin></b><br />
<div><br />
</div>dan tambahkan kode CSS berikut di atasnya.<br />
<br />
<pre class="CSS" name="code">.preloader { 
 background:url(http://nettuts.s3.amazonaws.com/860_preloaderPlugin/css/i/89.gif) center center no-repeat; 
} 
</pre><br />
Simpan template anda dan dan lihat hasilnya.<br />
<br />
Jika belum berhasil, coba hapus kode script yang saya tandai dengan warna merah yang tadi anda letakkan di atas kode <b></head></b></div></div>

jQuery Image Preloader di perkenalkan oleh Abhin Sharma pada situs net tuts+ dan merupakan salah satu plugin yang banyak digunakan pada situ...

Baca selengkapnya »

Pengenalan JQuery

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDSrB7y0_BZj2hh_xCBME4oi5edTeHrSHQYFK0pPQfR_2KVGfX7wH7TAhpKIW6mLEZjBGhqAeEXDk7sF0wuNsDupWDqHZ6aJFDcZNl-hqQ3yk4kGq8LVJGFwljvr5iovltz_xCnKiKGJQ/s1600/jquery-logo1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDSrB7y0_BZj2hh_xCBME4oi5edTeHrSHQYFK0pPQfR_2KVGfX7wH7TAhpKIW6mLEZjBGhqAeEXDk7sF0wuNsDupWDqHZ6aJFDcZNl-hqQ3yk4kGq8LVJGFwljvr5iovltz_xCnKiKGJQ/s1600/jquery-logo1.png" /></a></div><div style="text-align: justify;">jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL. Selain dukungan fasilitas yang lengkap, membuat plugin jquery juga cukup mudah. Dukungan ajax adalah salah satu fasilitas yang sudah tersedia di jquery.</div><div style="text-align: justify;"><br />
JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. Bagi Web Developer jQuery akan sangat menyederhanakan kode-kode JavaScript, seperti saat digunakan untuk penanganan event, interaksi Ajax yang cepat. jQuery ini dirancang untuk mengubah cara Kita menulis JavaScript.<br />
<br />
Microsoft dan Nokia telah mengumumkan akan mengemas jQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time.<br />
<br />
Dikarenakan Penggunaannya yang mudah tapi bisa melakukan segala macam yang kita inginkan, adalah salah satu alasan kenapa banyak web developer lebih memilih JQuery dibandingkan dengan Javascript Framework lain.<br />
<br />
Apa itu Javascript Framework?<br />
<br />
Framework, jika diterjemahkan ke bahasa kita, bisa berarti “area kerja”, atau “lingkungan kerja”. Dalam bahasa susahnya, berarti sebuah area kerja yang sudah disediakan fungsi-fungsi yang kita tinggal menggunakannya. Jadi tidak perlu lagi membuatnya dari awal.<br />
<br />
Analoginya, seperti kita menyewa sebuah kantor yang didalamnya sudah terdapat semua macam kebutuhan kantor seperti telepon, meja kerja, ruangan, dapur, dan lain-lain. Nah, Framework ini juga berarti sama. Sebuah framework sudah banyak menyediakan kegunaan-kegunaan yang dengan mudah kita gunakan.<br />
<br />
Framework inilah yang kini menjadi trend di dunia pemrograman. Tidak hanya di Javascript, tapi juga di PHP. Dan pengertian Framework semua sama.<br />
<br />
JQuery dan kemudahannya<br />
<br />
JQuery punya sebuah slogan yang “ngena” banget. “Write less, do more” memang bukan sembarang slogan. Menulis sedikit, bisa melakukan hal yang banyak.</div><br />
Mari kita tengok bagaimana JQuery mempermudah kita.<br />
<br />
Jika kita punya halaman HTML seperti ini:<br />
<br />
<div id="CSS-area1"><div id="CSS-area"><div style="text-align: center;"><b><div id="<span style="color: #990000;">container</span>">This is container</div></b></div></div></div><br />
Penggunaannya yang mudah tapi bisa melakukan segala macam yang kita inginkan adalah salah satu alasan kenapa banyak web develover lebih memilih JQuery dibandingkan dengan Javascript Framework lain.<br />
<br />
Maka kita bisa memperlakukan banyak hal dengan JQuery. Pemanggilan objek container bisa dilakukan sama seperti anda memperlakukannya di CSS.<br />
<br />
<div id="CSS-area1"><div id="CSS-area"><div style="text-align: center;"><b><script src="<span style="color: blue;">jquery.js</span>" type="text/javascript"></b></div><div style="text-align: center;"><b></script></b></div><div style="text-align: center;"><b><script type="text/javascript"></b></div><div style="text-align: center;"><b>$("<span style="color: #cc0000;">#container</span>").append("<strong>Ini hasil tambahan dari JQuery</strong>");</b></div><div style="text-align: center;"><b></script></b></div></div></div><br />
Untuk keterangan lebih lanjut, bisa dibaca manual JQuery di websitenya <b><a href="http://jquery.com/">disini</a></b>.</div>

Blogging designe Javascript JQuery Tingkat Lanjut Pengenalan JQuery

jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada...

Baca selengkapnya »