Tampilkan postingan dengan label jQuery. Tampilkan semua postingan
Tampilkan postingan dengan label jQuery. Tampilkan semua postingan

Kamis, 26 Mei 2011

Latihan Menggunakan jQuery

Bagaimana menggunakan jQuery?

- Download library jQuery langsung dari websitenya, Di http://jquery.com . Pilih versi jQuery yang diinginkan.

- Simpan file jquery, misalnya di D:\latihan. Lalu buat dokumen baru (*.html) yang isinya sebagai berikut:

<html>
<head><title>Latihan jQuerytitle>
head>
<body>
body>
html>

- Selanjutnya kita panggil library jQuery diantara tag head.

<html>
<head><title>Latihan jQuerytitle>
<script type="text/javascript" src="jquery-1.4.js">script>
head>
<body>
body>
html>

- Sebagai contoh, kita akan membuat dua buah tombol yang akan mengontrol sebuah gambar, berikut contoh skripnya:

<html>
<head><title>Latihan jQuerytitle>
<script type="text/javascript" src="jquery-1.4.js">script>
head>
<body>
<button class="semmbunyi">Sembunyikanbutton>
<button class="tampil">Tampilkanbutton>
<p><img id="foto" src="fotomu.jpg">p>
body>
html>

- Kemudian buat skrip jQuery dan sesuaikan dengan id atau class yang telah kita definisikan pada langkah sebelumnya, berikut contoh skripnya:

<html>
<head><title>Latihan jQuerytitle>
<script type="text/javascript" src="jquery-1.4.js">script>
<script type="text/javascript">
$(document).ready(function(){
$(".sembunyi").click(function(){
$.("#foto").hide("slow");
});
$(".tampil").click(function(){
$.("#foto").show("slow");
});
});
script>
head>
<body>
<button class="semmbunyi">Sembunyikanbutton>
<button class="tampil">Tampilkanbutton>
<p><img id="foto" src="fotomu.jpg">p>
body>
html>

- Lalu simpan filenya dengan nama japarus.html. Untuk melihat hasilnya, tinggal dobel-klik saja pada filenya, maka akan dibuka pada browser default kita, Atau Klik Kanan Open with firefox

Lihat Hasil nya ..

Selamat Menoba ..

Apa itu jQuery?

JQuery pertama dirilis pada tahun 2006 oleh John Resig. Dan kini jQuery telah digunakan oleh beberapa situs yang canggih nan terkenal seperti: Google, Facebook, Twitter, Youtube, Nokia dan masih banyak lagi. Tidak hanya situs interlokal, lokal juga ada kok yang telah memakai jQuery, contohnya:VivaNews, Studio 21, Kompas dan lain-lain. Selengkapnya bisa dilihat di http://docs.jquery.com/Sites_Using_jQuery.

Apa itu jQuery?

jQuery sendiri adalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript. Atau dalam kesimpulannya jQuery menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya “Write less, do more”.

Mengapa memilih jQuery?

Ada beberapa alasan mengapa lebih baik menggunakan jQuery daripada library lainnya, antara lain:

jQuery telah digunakan oleh website-website raksasa

  • Kompatibel dengan hampir seluruh browser
  • Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3)
  • Dokumentasi dan tutorialnya lengkap, bisa langsung dilihat di http://jquery.com
  • Didukung oleh banyak komunitas
  • Disupport oleh plugin yang lengkap
  • Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb
  • Open source atau Free
  • jQuery lebih diminati oleh para developer web saat ini
Apa kemampuan yang dimiliki jQuery?

Berikut beberapa kemampuan yang dimiliki yang dapat membuat kita berdecak kagum:

Mempermudah akses dan manipulasi elemen tertentu pada dokumen.
Mempermudah modifikasi/perubahan tampilan halaman web.
Mempersingkat Ajax (Asynchronous Javacsript and XML).
Memiliki API (Application Programming Interface).
Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.
Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.

Selasa, 24 Mei 2011

jQuery Chatbox Slide Vertikal di blog


Untuk memasang chatbox slide vertikal dengan jQuery ini sangat mudah, anda tinggal menambahkan kode-kode HTML yang nanti akan saya uraikan secara lengkap


gambar di atas saya pasang bukan chatbox, kalau mau lihat demo nya disini
tinggal terserah sobat bloger aja mau di tarus script Html apa

ok langsung aja :
  1. Login ke Blogger dengan akun anda.
  2. Kemudian pilih Rancangan >> Edit HTML
  3. Seperti biasa klik Download Template Lengkap biar aman
  4. Jangan lupa centang Expand Template Widget
  5. Selanjutnya cari kode ]]>, jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]> tersebut:


kode:
kode:
.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}


6.Setelah itu cari kode </head> setelah itu copas kode dibawah ini dan taruh diatasnya.

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


#
Jika anda telah memasang script Jquery ini sebelumnya anda dapat meninggalkan langkah diatas
7. Masukan kode Javascript berikut dibawah script jQuery tadi:

kode:
Judul Spoiler:
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>


9. Kemudian cari lagi kode berikut ini <body>
10. Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya

kode:
<div class="panel">

Kode script ChatBox Anda atau bisa diganti dengan kode apa saja

</div>
<a class="trigger" href="">ChatBox</a>


11. Dan yang terakhir Save Template anda.

Jumat, 20 Mei 2011

jQuery Menu Lavalamp navigation


Demonya bisa di liat diatas



Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin> :
3. Dan Simpan kode berikut diatasnya :
kode:
/* ---------------
lavaLamp With Image
---------------------------------- */
.lavaLampWithImage {
position: relative;
height: 29px;
width: 421px;
background:-moz-linear-gradient(left, #ff6900, #ff9700, #ff6900, #ff9700, #ff6900); no-repeat top;
-moz-border-radius:10px;
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
padding: 15px;
margin: 10px 0;
overflow: hidden;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVjfCuCm-t3CKSKfhyphenhyphenWQXRaonvSIeeWQ6iIvSw-Gji9-3kiOkz_x6_9OQteydxOgTVKXPlMXYtYwafaSWi6STIaMGnXQmUrAj0ZFJ3f4_KjHnbCRqrwnSuNnpYm8TtoDMuC7NatTJZWfQ/s1600/lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVjfCuCm-t3CKSKfhyphenhyphenWQXRaonvSIeeWQ6iIvSw-Gji9-3kiOkz_x6_9OQteydxOgTVKXPlMXYtYwafaSWi6STIaMGnXQmUrAj0ZFJ3f4_KjHnbCRqrwnSuNnpYm8TtoDMuC7NatTJZWfQ/s1600/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li a {
font: bold 14px arial;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}

4. Simpan java script berikut tepat diatas kode </head>
kode:
<script src='http://japarus.xtgem.com/blogspot/jquery.easing.min.js' type='text/javascript'/>
<script src='http://japarus.xtgem.com/blogspot/jquery-1.1.3.1.min.js' type='text/javascript'/>
<script src='http://japarus.xtgem.com/blogspot/jquery.lavalamp.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&quot;#1&quot;).lavaLamp({
fx: &quot;backout&quot;,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
</script>

5. Cari kode berikut (ctrl+F untuk mempermudah pencarian) :
kode:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

ini kalau mau posisi nya di bawah header ..
kalau mau posisinya seperti punya saya di atas cari kode ini <div id='top-wrap'>

6. jika sudah ketemu simpan kode beikut dibawah kode yang dicari tadi :
kode:
<ul class="lavaLampWithImage" id="1">
<li><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Ride an elephant</a></li>
</ul>

mudahan Tempelate kita ga beda yah ...
SELESAI

Selasa, 17 Mei 2011

Cara Baru Membuat Daftar Isi blog otomatis dengan Jquery

liat demonya disini

PERTAMA :

1. Login Ke Akun Blog Sobat
2. Pada Dasbor Pilih Rancangan-->Edit HTML
3. Copy Paste CSS Berikut Tepat Diatas Kode ]]></b:skin>

kode:
.judul-label{background:-moz-linear-gradient(top, #393E41, #000000);font-weight:bold;line-height:1.4em;margin-bottom:5px;overflow:hidden;white-space:nowrap;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 1px 1px 4px #AAAAAA;box-shadow: 0 1px 2px rgba(0,0,0,.2);color: #e9e9e9;border: 2px solid white !important;background:#000 url("http://japarus.xtgem.com/blogspot/r85dfm.gif") no-repeat}.data-list{line-height:1.5em;margin-left:5px;margin-right:5px;padding-left:15px;padding-right:5px;white-space:nowrap;text-align:left;font-family:kristen itc;font-size:12px;}.list-ganjil{background-color:#000;color:#51A104;border-top:1px solid #FF0000;border-bottom:1px solid #FF0000}.headactive{color: #FFFFFF;border: 2px solid:#C0C0C0;!important;background: #D11717;background: -moz-linear-gradient(top, #D11717, #8C0000)}


Simpan Templatenya

TERAKHIR

* Langsung Pilih Entri Baru (buat artikel baru)
* Isikan Judul Entrinya Atau Judul Postingnya Dengan Judul Daftar Isi Atau apa sajalah ..
* Setelah Itu Masukan Kode Berikut Pada Tab HTML Postingan

Kode:
<script src="http://japarus.xtgem.com/blogspot/daftarisi.js"></script>
<script src="http://www.japarus.co.tv/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">var accToc=true;</script>
<script src="http://japarus.xtgem.com/blogspot/daftarisi1.js" type="text/javascript"></script>

Senin, 16 Mei 2011

Sweet Menu Navigasi 2011 "Slide out effect jquery"

Lihat Demonya Di atas kiri yang ada ikon merah muter2
liat gambar:


Tapi Kali ini saya tulis yg model original nya
liat gambar:


Berikut langkah - langkah nya
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : <head>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode <head> kalau tidak bisa taruh dibawahnya saja tidak apa.
css nya:
<script type="text/javascript" src="http://playground.adambecker.info/sweet-menu/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://playground.adambecker.info/sweet-menu/jquery.easing.js"></script>
<script type="text/javascript" src="http://playground.adambecker.info/sweet-menu/jquery.sweet-menu-1.0.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$('#backMenu').sweetMenu({
top: 40,
padding: 8,
iconSize: 48,
easing: 'easeOutBounce',
duration: 500,
icons: [
'http://playground.adambecker.info/sweet-menu/images/back.png'
]
});

$('#exampleMenu').sweetMenu({
top: 200,
padding: 8,
iconSize: 48,
easing: 'easeOutBounce',
duration: 500,
icons: [
'http://playground.adambecker.info/sweet-menu/images/home.png',
'http://playground.adambecker.info/sweet-menu/images/comments.png',
'http://playground.adambecker.info/sweet-menu/images/red_heart.png',
'http://playground.adambecker.info/sweet-menu/images/male_user.png',
'http://playground.adambecker.info/sweet-menu/images/yellow_mail.png',

]
});
});
</script>

<style type="text/css">
body
{
background: #000000 url('images/bg.jpg') top center no-repeat;
}

.sweetMenuAnchor{
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
color: #0071bb;
font-size: 24px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
font-family: arial;
text-decoration: none;
background-color: #888888;
opacity: 0.6;
}

.sweetMenuAnchor span{
display: block;
padding-top: 10px;
}

h1
{
display: block;
text-align: center;
font-size: 48px;
color: #ffffff;
text-shadow: 0px 0px 12px #000000;
font-family: "Trebuchet MS";
}
</style>


6. Setelah Itu Beralihlah dan cari kode <body>
Jika Sudah, taruh kode dibawah ini sebelum atau diatas kode <body>
kode nya:
<ul id="backMenu">


</ul>
<ul id="exampleMenu">
<li><a href="alamat url">Beranda</a></li>
<li><a href="alamat url">Blog</a></li>
<li><a href="alamat url">Favorit</a></li>
<li><a href="alamat url">Tentang saya</a></li>
<li><a href="alamat url">Kontak</a></li>

</ul>

7. Silahkan anda priview, apabila semua berjalan dengan sempurna barulah anda save Selamat Mencoba ...

Ket .. untuk Merubah warna ikon dll bisa di edit di bagian css nya .. kalau masih bingung bisa di tanya kan ,..

Rabu, 11 Mei 2011

membuat Recent comments menggunakkan script jquery

Yang kali ini yang saya bahas adalah cara membuat Recent comments menggunakkan script jquery untuk menampilkan komentar terbaru dari artikel posting blog kita, dan langsung saja ke cara pembuatannya ikuti langkah-langkah berikut:


1. Login blogger
2.Masuk ke menu Rancangan, Elemen Laman, Tambah Gadet, dan pilih HTML/Java Script
3.Simpan Kode berikut :

kode:
<script style="text/javascript" src="http://japarus.xtgem.com/blogspot/showrecentcomments.js">
</script>
<script style="text/javascript">
var numcomments = 5;
var showcommentdate = true;var
showposttitle = true;var
numchars = 100;var
standardstyling = true;
</script>
<script src="URLBLOGANDA/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>


simpan....

ket: URLBLOGANDA ganti dngn URL BLOG ANDA misal http://www.japarus.co.tv

dan selesai... ,,,,,,,,,

Minggu, 03 April 2011

jQuery Color Picker: Farbtastic

liat demo disini
# Login blogger
# Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :
/* ---------------
jQuery Color Picker: Farbtastic
---------------------------------- */
/**
* Farbtastic Color Picker 1.2

*/
.farbtastic {
position: relative;
}
.farbtastic * {
position: absolute;
cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
width: 195px;
height: 195px;
}
.farbtastic .color, .farbtastic .overlay {
top: 47px;
left: 47px;
width: 101px;
height: 101px;
}
.farbtastic .wheel {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTDvcucHmaKZMh-3MNQ7f0WY1WL-TdHDhD_DtztHV_1GDFVHcDQW4lXquu86uQIQcAoOIeMNX1x7bti1ylVUlLoOoC1pUsh2LRccQ74BFxzjGcduZdz3rWf0bu59TsSxRh83-3Tt-4HIc/s1600/wheel.png) no-repeat;
width: 195px;
height: 195px;
}
.farbtastic .overlay {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1OmVIR_Ku11pUzZclRw8SzkyNBmb9ml2Y52ShLlW1NQDeA5OUvvuEs8x_Iano7vu38PgxFw4axYL3wqUaMj2_Vc4-4r63rGMMv2tLibwwRMogWJAri6utkGh4v98PFiUaq1P1hUkVyWc/s1600/mask.png) no-repeat;
}
.farbtastic .marker {
width: 17px;
height: 17px;
margin: -8px 0 0 -8px;
overflow: hidden;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirasIwyxuD19W2cROJ41Ocmd_754OWGzBe-PFcFXqOYujrNqnNX2XWIyD1oH7AaGgCwIQzUhXZ3y1sqp9Qnwf2V-_4-1BRq1INz9zp4FHA6acjlmlzfZrLDMHOF9dFNXGyIAWU4st0MNE/s1600/marker.png) no-repeat;
}



selanjutnya simpan script berikut tepat diatas kode </head> :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://japarus.xtgem.com/warnagenerator.js"></script>
<link rel="stylesheet" href="farbtastic.css" type="text/css" />
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#demo').hide();
$('#picker').farbtastic('#color');
});
</script>

dan yang terakhir cara pemanggilannya pada Html :

bisa di widget html javascrip, bisa di postingan
<div id="demo" style="color: red; font-size: 1.4em;">
jQuery.js is not present. You must install jQuery in this folder for the demo to work.</div>

<form action="" style="width: 400px;">
<div class="form-item">
<label for="color">Color:</label><input id="color" name="color" type="text" value="#123456" /></div>
<div id="picker">
</div>
</form>


selesai

Tips Menggunakan link jQuery - jquery.1.3.2.min.js

dari sekian banyak javascript, jquery merupakan satu javascript yang paling banyak digunakan blogger. Beberapa desain memanfaatkan berbagai jenis jquery yang telah tersedia, namun yang terbanyak digunakan sebagai dasar pembuatan desain adah jquery 1.3.2.js atau jquery.1.3.2.min.js. Sekalipun edisi terbaru telah direlease dalam bentuk jquery.1.4.2.js, dengan penambahan beberapa fungsi baru yang belum ada di jquery.1.3.2.js, jquery yang luar biasa (1.3.2.js) ini tetaplah menjadi javascript terfavorit. Disamping beban yang lebih enteng, jquery.1.3.2.js sudah sangat memenuhi syarat untuk dikembangkan dalam usaha menciptakan berbagai desain baru pelengkap blog, terlebih untuk blog yang bersifat umum yang tidak memerlukan desain khusus sebagai pelengkap tampilan.

Saat kita menggunakan sebuah desain dengan jquery, kita harus memahami fungsi yang tercipta. Banyak desain lama dan baru juga menggunakan jquery.1.2.6.js misalnya. Banyak desain yang memanfaatkan jquery.1.2.6.js sebenarnya bisa berfungsi sama dengan menggantinya dengan jquery.1.3.2.js. Jadi ketika anda harus menambahkan jquery.1.2.6.js, sementara blog sudah memasang jquery.1.3.2.js atau jquery.1.3.2.min.js, maka kenapa pula harus menambahkan jquery.1.2.6.js. Penambahan jquery baru seperti di atas sebenarnya sudah tidak diperlukan lagi karena fungsi sudah tercover melalui jquery.1.3.2.js. Demikian juga saat sebuah desain baru menggunakan jquery.1.4.2.js. Akan lebih baik seandainya anda coba dulu dengan memanfaatkan jquery.1.3.2.js yang sudah dimanfaatkan/terpasang. Jika cukup dengan jquery.1.3.2.js dan desain berjalan sempurna, maka jquery baru tidak diperlukan lagi. Menambah jquery baru sama artinya dengan menambah beban tak perlu yang akan semakin memperberat beban dan loading blog. Hal-hal yang seperti ini teramat sering terjadi dan umumnya disebabkan masih terbatasnya pemahaman blogger terhadap kode HTML, atau javascript. Satu hal yang wajar dan dapat dimaklumi karena 99% blogger tumbuh dan berkembang dari basic pengetahuan diluar desain blog.

Beberapa catatan di bawah ini mungkin bisa anda manfaatkan ketika menggunakan jquery, terutama jquery.1.2.6.js, jquery.1.3.2.js, jquery.1.4.1.js dan jquery.1.4.2.js.

* jquery.js (tanpa min) dan jquery.min.js (menggunakan min), keduanya mempunyai kegunaan dan fungsi sama. Penggunaan "min" menandakan bahwa jquery tersebut telah di kompres (compress) hingga muatan atau bebannya telah terkurangi dengan tujuan untuk mempercepat waktu loading. Compress jquery dilakukan dengan menghilangkan beberapa keterangan dan spasi yang sebenarnya berfungsi untuk memudahkan pengguna saat membuat desain baru dengan memanfaatkan jquery. Kesimpulannya jika anda hanya sekedar pengguna lebih baik menggunakan jquery.min.js agar loading blog lebih cepat.
* Saat sebuah desain baru ingin anda gunakan, dimana desain tersebut menggunakan jquery.1.2.6.js (atau min), jquery.1.4.1.js (atau min), dan jquery.1.4.2.js (atau min), maka lebih baik coba dulu menggunakan jquery.1.3.2.min.js. Apabila desain bisa bekerja secara sempurna dengan jquery.1.3.2.min.js, maka jquery dalam desain baru tersebut dapat di cover dengan menggunakan jquery.1.3.2.min.js.
* Sebaliknya, bila ada sebuah desain baru hanya dapat berfungsi menggunakan jquery.1.4.2.js, maka sebaiknya seluruh desain yang menggunakan jquery.1.2.6.js, jquery.1.3.2.js atau jquery.1.4.1.js di coba dengan jquery.1.4.2.min.js. Apabila bisa berfungsi baik maka anda cukup gunakan jquery.1.4.2.min.js untuk meng-cover seluruh kebutuhan penggunaan jquery.
* Demi lancarnya (mengurangi trouble) penggunaan jquery, sebaiknya gunakan link:

klik



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


* Pasanglah link jquery di atas tag pembuka <head> atau di bawahnya dengan posisi paling atas dibandingkan javascript yang lain. Jadi setelah link jquery baru diikuti link-link javascript yang lain.

* Jika sudah cukup memahami cara pencarian kode html dalam template dan pemasangan kode di luar penggunaan "Add a Gadget", sebaiknya simpan link jquery di atas atau di bawah kode <head> karena jika sebuah desain menggunakan jquery sebagai dasar pembuatan desain maka script desain baru harus selalu berada di bawah link jquery. Jika jquery sudah berada di atas atau di bawah kode <head>, maka secara otomatis semua script yang dibuat untuk sebuah desain baru akan selalu berada di bawah jquery yang link-nya terpasang di bagian teratas blog (dekat <head>).


Semoga bermanfaat!

sumber google ..