jQuery CDN Failover

Bismillah. Alhamdulillah. CDN atau Content Distribution Network (atau ada juga yang menyebutnya Content Delivery Network) seperti pernah dibahas pada artikel sebelumnya, bahwa jQuery sebagai salah satu framework javascript yang paling populer dan banyak digunakan membuat beberapa situs besar merasa perlu untuk menyediakan salinan file utamanya. Salinan ini sama persis dengan file asli yang tersimpan pada file server jQuery. Hal ini memberikan kemudahan kepada para penggunanya untuk memanfaatkan salinan-salinan tersebut, sehingga kita tidak perlu untuk menyimpannya pada file server milik sendiri. Terutama memberikan keuntungan besar bagi para pengguna hosting berbayar yang memiliki limit bandwidth akses.

Deskripsi

CDN Failover adalah metode pengalihan lokasi framework jQuery dari satu host menuju ke host alternatif (cadangan). Metode failover sangat bermanfaat ketika host utama mengalami kendala akses baik itu karena limit bandwidth atau karena memang benar-benar mengalami masalah. Jika kita tidak menggunakan metode pengalihan (failover) ketika host utama mengalami kendala maka hal tersebut akan mempengaruhi kondisi situs yang kita kelola, apalagi jika situs tersebut menggunakan jQuery Ajax, jelas situs akan down total atau tidak bisa diakses. Hal ini sangat merugikan dan akan mempengaruhi kenyamanan pengunjung situs, ujung-ujungnya para pengunjung enggan kembali lagi untuk menulusuri situs. Mencegah hal tersebut maka kita perlu menyediakan cadangan framework agar masalah down host utama bisa teratasi. CDN Failover adalah cara terbaik untuk mengatasi masalah diatas.

Lokasi CDN jQuery

Untuk menggunakan metode CDN Failover berarti kita membutuhkan dua lokasi penyimpanan framework. Satu lokasi (link) digunakan sebagai link utama dan satu lokasi digunakan sebagai cadangan ketika host utama mengalami masalah. Bagi para pengguna hosting berbayar maka bisa menggunakan skenario; lokasi framework utama diambil dari situs penyedia CDN dan lokasi framework cadangan ditempatkan pada filehosting milik sendiri. Keuntungan skenario tersebut akan mampu mengirit trafik bandwidth ke filehosting sendiri, namun ketika CDN utama mengalami masalah (down) barulah lokasi cadangan (filehost milik sendiri) diakses. Dibawah ini beberapa situs besar penyedia CDN jQuery yang bisa anda manfaatkan. Beberapa situs dibawah ini merupakan rekomendasi para desainer web, diantaranya:

[1] Google (Sangat Baik)

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js

[2] Microsoft (Baik)

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js

[3] CDNJS (Sedang)

http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js

[4] jQuery (Kurang)

http://code.jquery.com/jquery.min.js
http://code.jquery.com/jquery.js

[5] Yandex (Sangat Kurang)

http://yandex.st/jquery/1.7.2/jquery.js
http://yandex.st/jquery/1.7.2/jquery.min.js

CDN jQuery diatas merupakan alternatif untuk metode failover. Blogger Tune Up pun melakukan tes sendiri terhadap kecepatan akses (load) dari masing-masing lokasi CDN tersebut dengan hasil akhir tes sebagai berikut:

• CDN Google rata-rata waktu load 228ms
• CDN jQuery rata-rata waktu load 439ms
• CDN-JS rata-rata waktu load 340ms
• CDN Yandex rata-rata waktu load 575ms
• CDN Microsoft rata-rata waktu load 334ms

Namun, kemungkinan akan berbeda hasil akhir jika anda melakukan test load dari wilayah lain, hal ini karena dipengaruhi banyak faktor. Ada kemungkinan untuk wilayah Indonesia, CDN Yandex memiliki kecepatan akses sangat jelek, namun besar kemungkinan menjadi lebih baik jika diakses dari wilayah diluar Indonesia. (Mungkin perlu dilakukan pooling internasional)

Integrasi jQuery CDN Failover

Dibawah ini akan dijelaskan beberapa alternatif penggunaan metode CDN Failover. Silahkan anda memilih salah satunya yang dianggap paling mudah untuk diterapkan pada situs yang anda kelola. Secara garis besar ada dua cara metode CDN Failover, yaitu:

Direct CDN Failover (CDN Failover Langsung)

Direct CDN Failover adalah metode penulisan script load failover (pengalihan) lokasi framework secara langsung pada situs. Biasanya menggunakan statement javascript if else untuk failover-nya. Ketika halaman diload maka script akan melakukan pemeriksaan keadaan, "apakah framework jQuery dari CDN utama berhasil diload? Jika ternyata framework CDN utama tidak berhasil diload, maka link lokasi utama dialihkan ke link lokasi cadangan". Dibawah ini beberapa metode direct CDN failover:

CDN Failover Metode 1

Script dibawah ini merupakan yang metode failover yang paling sederhana. Script akan melakukan pemeriksaan ketersediaan framework, jika ternyata framework tidak berhasil di-load, maka lokasi framework dialihkan.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"> 
if (jQuery) {  
 // jika jQuery berhasil di-load maka fungsi disini akan dijalankan...
} else {
 // jika jQuery gagal di-load, maka framework akan dialihkan ke lokal...
 document.write('script type="text/javascript" src="/local/jquery-1.7.2.min.js"><\/script>');
}
</script>

CDN Failover Metode 2

Metode ke-2 ini hampir mirip dengan metode ke-1, perbedaannya hanya pada statement pemeriksaan keadaan. Script hanya akan melakukan pengalihan jika keadaan halaman tidak mampu me-load framework, jika berhasil maka script tidak akan menjalankan perintah pengalihan lokasi framework.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"> 
if (typeof jQuery == 'undefined') {  
    // jika jQuery gagal di-load, maka framework akan dialihkan ke lokal...
 document.write('script type="text/javascript" src="/local/jquery-1.7.2.min.js"><\/script>'); 
} else {
    // jika jQuery berhasil di-load maka fungsi disini akan dijalankan...
}
</script>

CDN Failover Metode 3

Metode ke-3 ini merupakan metode yang banyak digunakan oleh situs-situs jejaring sosial media dalam memanggil framework-nya. Metode ini sebenarnya merupakan pengembangan dari CDN Failover metode ke-2.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">  
 if (typeof jQuery === 'undefined') {  
    var e = document.createElement('script');  
    e.src = '/local/jquery-1.7.2.min.js';  
    e.type='text/javascript';  
    document.getElementsByTagName("head")[0].appendChild(e);  
 }
</script>

Indirect CDN Failover (CDN Failover Tidak Langsung)

Indirect CDN Failover adalah metode pengalihan CDN framework jQuery dengan memanfaatkan framework lain dalam pemeriksaan kondisinya. Berarti halaman membutuhkan framework lain untuk memeriksa keadaan framework jQuery. Metode seperti ini banyak dimanfaatkan dan digabungkan dengan DOM Event Listener atau sering disebut juga Lazy Load framework. (Hiks... Mulai membingungkan... Saran penulis, baca artikelnya malam hari jadi bisa sambil ngopi...)

Menggunakan framework lain untuk memeriksa kondisi framework jQuery sangat bermanfaat dalam meningkatkan waktu respon halaman. Metode Direct CDN Failover mempunyai kelemahan dalam hal waktu respon. Maksudnya, ketika CDN utama mengalami delay yang cukup lama dalam penyediaan perpustakaan jQuery maka halaman juga akan menunggu hingga perpustakaan berhasil dimuat dengan sempurna. Jika load CDN memiliki respon yang sangat lama, maka waktu load halaman situs juga akan relatif lebih lama. Lazy Load framework digunakan untuk mengatasi masalah delay respon.

Framework lain (anggaplah framework A) digunakan selain untuk CDN failover (pengalihan) juga digunakan untuk Lazy Load (pemeriksaan delay respon) framework. Ketika CDN jQuery tersedia namun ternyata memiliki respon yang sangat lambat, maka framework A akan mengalihkan framework jQuery tersebut pada CDN cadangan yang telah disiapkan. Sebuah metode yang tidak bisa dilakukan oleh Direct CDN Failover.

Dibawah ini beberapa framework lain yang dapat digunakan sebagai CDN Failover dan Lazy Load Framework, diantaranya:

Modernizr

Modernizr merupakan framework yang sedang hangat-hangatnya dibicarakan karena kemampuannya dalam menyederhanakan fungsi CSS3 dan HTML5. Baru-baru ini para developer Modernizr memasukan fungsi YepNope pada perpustakaan Modernizr. (Dibahas lengkap pada artikel terpisah)

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
<script type="text/javascript">
Modernizr.load([
 {
  load: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
  complete: function () {
   if (!window.jQuery) {
    Modernizr.load('/local/jquery-1.7.2.min.js');
   }
  }
 }
]);
</script>

LABjs

Framework LABjs merupakan script loader cikal bakal dari berbagai framework lain dalam menangani dan memanajemen CDN Failover maupun Lazy Load Framework, bahkan YepNope diciptakan karena inspirasi dari LABjs. (Dibahas lengkap pada artikel terpisah)

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
<script type="text/javascript">
$LAB.script("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js").wait(function () {
    if (typeof window.jQuery === "undefined") {
        $LAB.script("/local/jquery-1.7.2.min.js");
    }
});
</script>

Kesimpulan

Dari beberapa metode jQuery CDN Failover diatas, kita bisa memilah salah satu metode yang dianggap cocok dengan karakter situs yang kita kelola. Sedangkan untuk CDN Failover dengan metode Indirect CDN Failover akan dibahas secara rinci pada artikel terpisah. Metode diatas hanya gambaran sepintas saja walau sebenarnya bisa digunakan, namun mungkin belum maksimal dalam penggunaannya dan fungsinya. Atau bisa juga digunakan sebagai pancingan bagi anda yang ingin mengembangkan lebih rinci sesuai dengan pemahaman anda. Sampai ketemu dipembahasan artikel berikutnya, dan Happy Blogging :)

jQuery

jQuery .submit() & Google Custom Search Engine

Bismillah. Alhamdulillah. Bagaimana dengan artikel sebelumnya tentang 'Membuat dan Memasang Google Custom Search Engine'? Mudah-mudahan telah berhasil dipasang pada blog anda. Kelemahan dari cara tersebut adalah ketika kita mengganti kata kunci (keyword) pada form input maka halaman hasil pencarian akan di-load (di panggil) ulang, dan reload halaman ini terjadi setiap mengganti kata kunci. Hal ini tentunya memperlambat proses pencarian dan kadang membuat kesal saat seseorang telah mencapai lelah untuk mencari sesuatu di internet. Bagaimana caranya agar halaman tidak di reload saat kita mengganti kata kunci lainnya, namun hasil pencarian tetap ditampilkan pada halaman tersebut? Disinilah kita membutuhkan bantuan script jQuery. jQuery .submit() yang akan mengambil alih event handler saat seseorang meng-klik tombol submit.

Demo jQuery Blogger Custom Searchn Engine

Deskripsi

Pada artikel sebelumnya, kita telah membahas tentang integrasi Google Custom Search Engine pada Blogger, namun bahasan materinya terlalu praktis bahkan nyaris tidak ada pemahaman materi yang lebih luas. Artikel tersebut justru hanya akan menjadi materi (copy paste) yang sangat sulit untuk dikembangkan lebih lanjut. Saya hanya berharap, dari setiap artikel yang diterbitkan, janganlah hanya tips trik yang instan tanpa mampu dipahami dengan baik namun lebih jauh anda mengembangkan sendiri sesuai imajinasi atau mungkin lebih sempurna. Mari kita sama-sama pelajari dan pahami.

jQuery .submit()

.submit() adalah metode lain atau metode yang lebih praktis untuk .bind('submit', handler) dalam variasi pertama, dan .trigger('submit') dalam variasi ketiga. Event submit akan dikirimkan ke sebuah elemen ketika pengguna mencoba untuk mengirimkan (submit) formulir (form). Form akan berhasil dikirimkan dengan meng-klik eksplisit <input type="submit">, <input type="image">, atau <button type="submit">, atau dengan menekan tombol Enter jika elemen form memiliki focus.

Harus diperhatikan pula bahwa event pengiriman formulir juga tergantung pada browser. Beberapa browser ada yang mampu mengirimkan formulir hanya dengan menekan tombol Enter jika input formulir berisi satu kolom teks, atau formulir bisa terkirim jika menekan tombol submit. Interface tidaklah harus bergantung pada perilaku tertentu, kecuali hal ini memang memaksa harus dengan mengamati event penekanan tombol untuk tombol Enter.

Sebagai contoh, perhatikan kode HTML dibawah ini:

<form id="target" action="tujuan.html">
 <input type="text" value="Ini hanya percobaan"/>
 <input type="submit" value="Kirim"/>
</form>
<div id="lain">
 Pemicu Lain
</div>

Event handler dibawah terlibat ke dalam form:

$('#target').submit(function() {
 alert('Handler untuk .submit() terpanggil');
 return false;
});

Ketika form (formulir) dikirimkan (submit), pesan akan tampil dengan isi "Handler untuk .submit() terpanggil". Hal ini terjadi sebelum pengiriman form yang sebenarnya, maksudnya seperti ini (sambil dibuka demonya disini):

Ketika kita klik tombol submit (<input type="submit" value="Kirim"/>) untuk mengirimkan input text (<input type="text" value="Ini hanya percobaan"/>) dari form dengan id #target ke halaman tujuan (action="tujuan.html") maka input text tidak akan dikirimkan ke URL tujuan tetapi langsung diambil alih (handle) oleh jQuery .submit() dengan memanfaatkan fungsi .preventDefault(). Atau jika terjadi kesalahan fungsi maka akan dikembalikan pada handle sebelumnya (return false;). Fungsi .preventDefault() sering digunakan untuk menghentikan (pada kasus tertentu dapat mengambil alih) sebuah event agar tidak langsung disampaikan pada tujuan. Contoh penggunaan fungsi .preventDefault() ada pada artikel sebelumnya. [1], [2], [3]. Jika kita menggunakan fungsi event .submit() maka event .preventDefault() sudah termasuk didalamnya tanpa harus dituliskan pada kode. (Lumayan membingungkan... Ngopi dulu...)

Atau, kita juga dapat memanfaatkan pemicu event secara manual ketika elemen lain diklik, contoh script jQuery-nya seperti dibawah ini:

$('#lain').click(function() {
  $('#target').submit();
});

Setelah code diatas dieksekusi, kemudian kita klik pada "Pemicu Lain", hal ini juga akan menampilkan pesan yang sama, yaitu "Handler untuk .submit() terpanggil". Lihat demonya disini. Ingat! Jika tanpa kode jQuery diatas, maka ketika kita klik tombol submit (<input type="submit" value="Kirim"/>) maka browser akan menuju dan membuka halaman URL tujuan (action="tujuan.html"). (Mudah-mudahan ada lampu listrik menyala diatas kepala... Cling...)

Mekanisme Kerja Google Custom Search Engine

Setelah memahami fungsi dari event jQuery .submit(), sekarang kita akan mencoba memahami bagaimana Google Custom Search Engine bekerja. Perhatikan gambar dibawah ini:

Ketika kita membuat sebuah mesin telusur sendiri menggunakan fasilitas Google Custom Search Engine, maka proses index halaman demi halaman blog kita akan segera dimulai. Google Custom Search Engine akan melakukan pengumpulan data pada blog kita secara bertahap dan sesuai edisi yang digunakan. (Untuk Edisi gratis, jumlah index halaman terbatas). Ketika seseorang memasukan sebuah kata kunci (keyword) pada Input Form kemudian mengirimkannya (submit) pada Google API CSE, maka Google API CSE akan mengambil data dari index server Google CSE. Setelah ditemukan kecocokan dengan kata kunci yang dimasukan pada Input Form, Google API CSE akan mengambilnya dari server Google CSE dan kemudian mengirimkan hasil pengambilan data tersebut ke Halaman Hasil Pencarian.

jQuery Google Custom Search Engine

jQuery .submit() sudah dipahami, dan mekanisme kerja Google Custom Search Engine juga sudah dipahami, waktunya kita memodifikasi script bawaan Google Custom Search Engine. Pada artikel sebelumnya kita sudah mengetahui bahwa script dari Form Input dan Google Custom Search Engine seperti dibawah ini:

Kode Form Input

<form id="searchform" action="/p/pencarian.html">
 <input id="searchq" name="q" type="search" placeholder="Cari..."/>
 <input class="searchbutton" name="sa" type="submit" value="Go" />
</form>

Kode Google API Custom Search Engine

google.load("search", "1", {
 language: "id",
 style : google.loader.themes.V2_DEFAULT
});
google.setOnLoadCallback(function () {
    var c = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
    c.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var a = new google.search.DrawOptions;
    a.enableSearchResultsOnly();
    c.draw("cse", a);
    for (var a = {}, e = window.location.search.substr(1).split("&"), d = 0; d < e.length; d++) {
        var b = e[d].split("="),
            f = decodeURIComponent(b[0]);
        a[f] = b[1] ? decodeURIComponent(b[1].replace(/\+/g, " ")) : b[1]
    }
    a.q && c.execute(a.q, null, {
        oq: a.oq,
        aq: a.aq,
        aqi: a.aqi,
        aql: a.aql,
        gs_sm: a.gs_sm,
        gs_upl: a.gs_upl
    })
}, !0);

Hasil Perpaduan

Dibawah ini kode hasil perpaduan antara Google API CSE dengan jQuery .submit(). Saya tidak akan lagi menjelaskan secara detail, silahkan dipelajari untuk dipahami. Berikut hasil perpaduan kodenya:

$(function () {
    $("#searchform").submit(function () {
        var b = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
        b.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var a = new google.search.DrawOptions;
        a.enableSearchResultsOnly();
        b.draw("cse", a);
        (a = $("#searchq").val()) && b.execute(a);
        return !1
    })
});

Keterangan:

Pada dasarnya kita hanya mengalihkan proses load dan mengganti proses eksekusi kode Google API CSE. Pada mulanya load dilakukan dengan:

google.setOnLoadCallback

kemudian di ganti dengan:

$("#searchform").submit

ID #searchform diambil dari ID form (Jika memahami penjelasan sebelumnya, pasti paham fungsi event ini)

Kemudian mengganti eksekusi yang pada mulanya seperti dibawah ini:

for (var a = {}, e = window.location.search.substr(1).split("&"), d = 0; d < e.length; d++) {
 var b = e[d].split("="),
  f = decodeURIComponent(b[0]);
 a[f] = b[1] ? decodeURIComponent(b[1].replace(/\+/g, " ")) : b[1]
}
a.q && c.execute(a.q, null, {
 oq: a.oq,
 aq: a.aq,
 aqi: a.aqi,
 aql: a.aql,
 gs_sm: a.gs_sm,
 gs_upl: a.gs_upl
})

menjadi seperti dibawah ini:

(a = $("#searchq").val()) && b.execute(a);
return !1

Namun hati-hati, saya telah melakukan perubahan nama variabel, dengan tujuan untuk membedakan, mana script Google API CSE yang asli, dan mana script Google API CSE hasil perpaduan dengan jQuery. Script hasil perpaduan ini memang harus diperhatikan dan dibandingkan dengan hati-hati.

Conditional Tag

Sudah dibahas diatas bahwa ketika kita menggunakan jQuery .submit() maka URL tujuan tidak akan dibuka oleh browser karena fungsi submit form diambil alih oleh jQuery. Ini akan memunculkan masalah ketika halaman hasil pencarian sedang tidak dibuka, maka keyword apapun yang kita masukan pada input form itu tidak akan menghasilkan apa-apa. Google API CSE tidak akan pernah memproses perintah apapun dari form jika halaman hasil pencarian sedang tidak dibuka. Jika demikian berarti kita membutuhkan suatu kondisi.

Kondisi ini akan mengatur kapan jQuery .submit() harus diload atau dieksekusi. Pada saat halaman yang sedang dibuka bukanlah halaman hasil pencarian maka input form masih menggunakan script Google API CSE aslinya, namun ketika halaman hasil pencarian sedang dibuka, maka jQuery .submit() juga telah dieksekusi dan siap untuk digunakan.

Solusi dari masalah ini adalah dengan menggunakan conditional tag, seperti contoh dibawah ini:

<b:if cond='data:blog.url == &quot;/p/pencarian.html&quot;'>
... Script jQuery Google API CSE ...
</b:if>

Bagaimana conditional tag ini bekerja? Silahkan baca disini.

Integrasi Pada Blog

Masih bingung? Mungkin harus mencoba dulu baru memahaminya. Kode jQuery Google API CSE dibawah ini silahkan digunakan pada blog anda. Ikuti langkahnya:

Langkah 1
Buka template blog anda
Langkah 2
Cari kode dibawah ini:

</body>

Langkah 3
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 2:

<b:if cond='data:blog.url == &quot;/p/pencarian.html&quot;'>
<script type='text/javascript'>
//<![CDATA[
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
$(function () {
    $("#searchform").submit(function () {
        var b = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
        b.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var a = new google.search.DrawOptions;
        a.enableSearchResultsOnly();
        b.draw("cse", a);
        (a = $("#searchq").val()) && b.execute(a);
        return !1
    })
});
//]]>
</script>
</b:if>

Langkah 4
Simpan Template

Keterangan:

• Kode Google API CSE yang telah dimasukan sebelumnya jangan dibuang, karena kita membutuhkan loadernya.
• Ganti URL /p/pencarian.html sesuai dengan URL halaman hasil pencarian anda.
• Buang framwork jQuery jika blog anda telah memasang framework jQuery.
• Samakan atau ubah ID #searchform pada jQuery sesuai dengan ID Form Input anda (misal ID form input; <form id="searchform").
• Jangan lupa untuk mengganti 012345678901234567890:mdrcctmncrt sesuai dengan kode yang anda peroleh dari Google CSE.
• Samakan atau ubah ID #searchq pada jQuery sesuai dengan ID Input anda (misal ID Input; <input id="searchq" name="q")

Kesimpulan

Mudah bukan? Dari pembahasan diatas mudah-mudahan anda memahami bagaimana cara kerja jQuery .submit() dan Google API CSE dengan baik, sehingga kedepannya anda bisa melakukan modifikasi dan perbaikan yang lebih baik lagi dari pada apa yang sudah dibahas di atas. Sampai ketemu dipembahasan berikutnya (Rencananya membuat Blogger Search Ajax API). Happy Blogging :)

jQuery Widget

Plugin jQuery Image Maps

Bismillah. Alhamdulillah. Berhenti sejenak dalam mempelajari Facebook API dan kembali ke dunia jQuery. Beberapa saat yang lalu Blogger Tune-Up pernah membahas tentang penggunaan tag HTML Maps Area Coords. Pada artikel kali ini Blogger Tune-Up mencoba menyederhanakan fungsi tag HTML Maps Area Coords dengan menulis sebuah plugin jQuery. Plugin ini memudahkan kita dalam memasukan koordinat XY kedalam peta. Ditambahkan beberapa tambahan mark (penanda) dan tooltip agar tampilan menjadi lebih bagus dan menarik. Bagaimana menggunakannya? Lanjutkan...

Fork Plugin jQuery Image Maps

Demo Plugin jQuery Image Maps

Unduh Plugin jQuery Image Maps

Deksripsi

jQuery Image Maps digunakan sebagai metode lain dalam mengganti fungsi-fungsi tag HTML Maps Area Coords. Kode jQuery utama yang digunakan dalam membuat plugin Image Maps adalah jQuery.data(). jQuery.data() akan melakukan pemeriksaan data pada koordinat XY yang dimasukan kedalam peta. Sehingga memudahkan kita dalam menentukan titik koordinat XY. Berbeda halnya dengan tag Coords yang mengharuskan kita menentukan titik koordinat XY lebih dari satu untuk sebuah area, dengan jQuery Image Maps kita cukup memasukan satu titik koordinat XY. Pada saat halaman diload sebuah markah atau penanda ditambahkan pada area peta dengan bentuk yang bisa disesuaikan, kita bisa menggunakan border atau icon sebagai penunjuk lokasi pada map, satu hal yang tidak bisa diterapkan pada tag HTML Maps Area Coords. Pada saat mouse hover atau berada diatas markah, sebuah tooltip yang berisi informasi keluar diatas atau dibawah markah. Posisi dan efek tooltips bisa kita atur sesuai dengan keinginan. Luas area maps atau peta secara otomatis akan menyesuaikan dengan luas (panjang dan lebar) gambar sehingga kita tidak perlu menentukan luas area map.

Kekurangan dan Kelebihan

Plugin jQuery Image Maps ini jelaslah masih mengandung banyak kekurangan, anda bisa saja kemudian memodifikasi dan menambahkan fungsi-fungsi baru untuk menghasilkan tampilan yang lebih sempurna. Beberapa kekurangannya adalah:

• Tidak menggunakan tag HTML Maps Area Coords sesuai standar W3C, sehingga ada kemungkinan tidak lolos validasi (silahkan periksa sendiri).
• Untuk membuat area polygon masih rumit, karena masih mengandalkan kode CSS3.
• Baru diperiksa menggunakan framework jQuery versi 1.7.2 sehingga ada kemungkinan tidak bekerja normal pada versi sebelumnya (silahkan periksa sendiri).
• Pada IE 8 tampilan tooltips tidak sempurna namun itu karena IE 8 belum mampu merender CSS3 dengan sempurna. Bukan kesalahan pada plugin.
• Jika menemukan kelemahan, bug atau perbaikan lain silahkan tinggalkan pada komentar.

Sedangkan beberapa kelebihannya diantaranya:

• Cukup satu titik koordinat XY untuk menentukan suatu area pada peta dengan luas yang bisa kita atur dengan mudah pada kode CSS.
• Integrasi antara gambar dengan peta dilakukan secara otomatis oleh Plugin.
• Area koordinat dalam peta bisa diberi mark atau penanda sesuai dengan yang kita inginkan. Bisa menggunakan rectangle, circle, rounded, polygon atau pun image (icon).
• Dilengkapi tooltip yang akan keluar ketika mouse hover pada markah atau penanda.
• Ukuran file plugin sangat kecil hanya 950 byte (versi minified).
• Silahkan temukan sendiri kelebihan lainnya.

Skenario HTML

Dibawah ini adalah kode HTML yang digunakan sebagai area peta:

<div id="peta">

 <img width="620" height="346" src="peta.jpg" alt="Peta"/>
 
 <!-- Awal Area Satu -->
 <div class="penanda atas" data-posx="255" data-posy="70">
  <!-- Awal Isi Tooltips -->
  <h2>iMac</h2>   
  <ul>
   <li><b>Harga:</b> Rp 24.000.000</li>
   <li><b>Tahun Produksi:</b> 2020</li>
  </ul>
  <!-- Akhir Isi Tooltips -->
 </div>
 <!-- Akhir Area Satu -->
 
 <!-- Area Dua dan seterusnya -->
 
</div>

Hal yang harus diperhatikan pada skenario HTML ini adalah:

• src pada tag img digunakan sebagai peta.
• Ukuran gambar akan lebih baik ditentukan dengan width dan height, tetapi tidak menggunakan properti juga tidak apa-apa.
• Tag alt pada gambar tidak berpengaruh pada plugin.
• class="penanda": hukumnya wajib, karena class ini akan diakses oleh plugin. Sedangkan class=" atas" digunakan untuk menentukan posisi tooltip, jika dikosongkan (misal; class="penanda") maka tooltip akan muncul dibawah mark atau penanda. Jika ditambahkan class "atas" (misal; class="penanda atas") maka tooltip akan muncul pada bagian atas penanda.
• data-posx="255": ganti nilai 255 sesuai dengan koordinat X pada gambar yang akan digunakan sebagai area.
• data-posy="70": ganti nilai 70 sesuai dengan koordinat Y pada gambar yang akan digunakan sebagai area peta.
• data-posx dan data-posy tidak boleh diganti, karena plugin akan mengambil nilai koordinat XY dari sini.
• Untuk menentukan titik koordinat XY peta silahkan merujuk pada artikel sebelumnya tentang HTML Maps Area Coords, hanya saja cukup mengambil satu titik koordinat XY untuk setiap areanya.
• Sedangkan tag yang berada didalam <div class="penanda" data-posx="" data-posy=""> adalah informasi yang akan muncul pada bagian tooltips. Anda bisa saja mengisinya dengan informasi yang sesuai dengan area pada peta.

Skenario CSS

Dibawah ini adalah skenario CSS yang digunakan untuk menentukan area penanda dan tooltips:

#peta {
 position: relative;
 margin: 20px auto;
 border: 1px solid #ccc;
}

.penanda {
 display: none;
}

.area {
 width: 32px;
 height: 32px;
 position: absolute;
}

.buble-up, .buble-down {
 background: url(../img/mark.png) no-repeat 0 0;
}

.buble-down {
 background-position: 0 -32px;
}

.buble {
 display: none;
 width: 200px;
 cursor: pointer;
 text-shadow: 0 1px 0 #fff;
 position: absolute;
 top: 10px;
 left: 50%;
 z-index: 999;
 margin-left: -115px;
 padding:15px;
 color: #222;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 background-color: #dce9f9;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
 background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
 background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
 background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
 background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
 background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
 -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
 -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
 box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
 border: 1px solid #ccc;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);  
}

.buble::after {
 content: '';
 position: absolute;
 top: -10px;
 left: 50%;
 margin-left: -10px;
 border-bottom: 10px solid #ebf3fc;
 border-left: 10px solid transparent;
 border-right :10px solid transparent;
}

.buble-down .buble {
 bottom: 12px;
 top: auto;
}

.buble-down .buble::after {
 bottom: -10px;
 top: auto;
 border-bottom: 0;
 border-top: 10px solid #dce9f9;
}

.buble h2 {
 font: bold 1.3em 'Trebuchet MS', Tahoma, Arial;
 margin: 0 0 10px;
 text-align: center;
}

.buble ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

Kode diatas tidak akan dijelaskan mendetail, jadi silahkan dipelajari sendiri. Namun ada bagian yang bisa anda modifikasi untuk menentukan bentuk atau jenis penanda, yaitu:

.area {
 width: 32px;
 height: 32px;
 position: absolute;
}

.buble-up, .buble-down {
 background: url(../img/mark.png) no-repeat 0 0;
}

.buble-down {
 background-position: 0 -32px;
}

Silahkan kode diatas dimodifikasi sesuai dengan kebutuhan.

Skenario jQuery

Secara default skenario jQuery ditulis seperti dibawah ini:

$('#peta').imgMaps();

#peta diambil dari area yang akan digunakan sebagai peta. Perhatikan skenario HTML yang menggunakan id="peta". Anda bisa saja mengganti #peta sesuai dengan keinginan namun perhatikan bahwa id tersebut digunakan sebagai id area peta.

Secara lengkap kode jQuery ditulis seperti dibawah ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
<script type='text/javascript' src='URL/jquery.imgmaps.min.js'/>
<script>
$(document).ready(function(){
 $('#peta').imgMaps();
});
</script>

Silahkan letakan kode diatas pada bagian atas tag </head> atau tag </body> pada halaman situs anda. Sedangkan untuk konfirgurasi tambahan anda bisa melakukan modifikasi kode jQuery menjadi seperti ini:

$('#peta').imgMaps({
 speed: 250,
 titik: 'penanda'
});

• speed digunakan untuk menentukan kecepatan tampil tooltips, semakin kecil nilainya semakin cepat tampilannya. Efek yang digunakan adalah efek fade.
• titik digunakan untuk menentukan class penanda, perhatikan class="penanda" pada skenario HTML diatas.

Kesimpulan

Plugin jQuery Image Maps bermanfaat bagi anda yang biasanya membuat situs sebagai sarana jual beli online. Anda akan dengan mudah untuk menentukan titik lokasi agen atau area dealer dari toko anda. Jika merasa tidak puas dengan fungsi plugin jQuery ini, silahkan lakukan modifikasi agar plugin ini bekerja sesuai dengan keinginan anda. Jika anda tidak keberatan, silahkan kirim informasi kepada author apabila ditemukan bug, perbaikan atau pengembangan pada plugin ini. Selamat mencoba dan semoga berhasil. Happy Blogging :)

jQuery

jQuery Modal Popup - Form Newsletter

Bismillah. Alhamdulillah. Pada saat kita berkunjung pada suatu situs, sering kita dihadapkan dengan kotak popup yang meminta kita untuk berlangganan Newsletter (berita terbaru yang dikirim via email), dengan memasukan alamat email dan kemudian kita diberi sebuah panduan berupa eBooks sebagai ucapan terima kasih karena telah berlangganan. Nah, pada artikel kali ini kita akan membahas tentang pembuatan Popup Form Signup Newsletter tersebut.

Demo jQuery Modal Popup - Form Newsletter

Download jQuery Modal Popup - Form Newsletter

Deskripsi

Pada saat pengunjung membuka halaman kita maka cookie akan memeriksa, apakah browser yang membuka halaman situs kita sudah menyimpan cookie? Jika belum maka Form Newsletter akan ditampilkan, namun jika browser telah menyimpan cookie yang artinya telah pernah berlangganan maka Form Newsletter tidak ditampilkan. Pada saat Form Newsletter ditampilkan maka semua halaman situs akan ditutup overlay sampai pengunjung melakukan aksi "Close" atau "Submit" pada Form. Jika pengunjung hanya melakukan aksi "Close" maka cookie tidak akan menyimpan data apapun, sehingga saat pengunjung tersebut membuka situs kita lagi dilain waktu maka Form Newsletter akan ditampilkan lagi.

Untuk membuat Form Newsletter ini kita membutuhkan 3 buah plugin jQuery, yaitu:

1. In-Field Label jQuery Plugin yang dibuat oleh Doug Neiner. Plugin ini digunakan untuk mengatur label pada input, agar ketika cursor aktif maka label akan disembunyikan. (plugin tambahan dan tidak terlalu penting)
2. jQuery Modal Popup Plugin yang dibuat oleh Bjoern Klinggaard. Ini plugin yang digunakan untuk menampilkan dan mengatur popup. Plugin ini diberi nama jQuery bPopup dan kita akan menggunakan Versi 0.4.1. Untuk versi terbaru silahkan kunjungi situs pembuatnya.
3. jQuery Cookie yang dibuat oleh Klaus Hartl. Plugin ini yang mengatur penulisan, pengecekan dan penghapusan cookie pada browser pengunjung.

Skenario HTML

Seperti biasa, untuk membuat sebuah elemen maka kita memerlukan sebuah kontener yang disimpan pada halaman HTML. Dibawah ini adalah kode HTML yang digunakan untuk membuat tampilan dari Popup Form Newsletter

<div id="jq-popup" style="display:none; background-color: #2C7BB3;"> 
<div class="pClose exit-button"></div>
<p>
 <h1>Berita Gembira: Dapatkan Panduan 10 langkah untuk menjadi jutawan Internet!</h1>
 <p>Jangan lewatkan untuk berlangganan informasi dari Blogger Tune-Up!</p>
 <form method="post" id="newsletter-signup-form" action="URL Proses">
  <fieldset>
   <div id="newsletter" class="clear">
    <p class="inline-label">
     <label class="pInline inline-label" onclick='if (this.value == "Sign up now") { this.value = ""; }' for="email-address">Masukan Alamat Email Anda</label>
     <input type="text" id="email-address" name="email" value="" />
    </p>
    <input type="submit" id="newsletter-submit" class="go-signup" value="Dapatkan Panduan Gratis"/>
   </div>
  </fieldset>
 </form>
 <p class="not-ready">Mungkin lain waktu? Baiklah, Kenapa tidak berlangganan <a href="http://feeds.feedburner.com/BloggerTune-up">RSS Feed</a></p>
</p>
</div>

Bagian terpenting dari Form Newsletter diatas adalah sebagai berikut:

• id="jq-popup" : Ini bagian yang akan kita registrasikan pada plugin. Jika anda menggantinya maka ganti pula pada skenario jQuery-nya. (Sebaiknya jangan diubah jika belum memahaminya)
• class="pClose exit-button" : Bagian pClose sebaiknya jangan diganti karena bagian ini akan diakses oleh Plugin jQuery bPopup.
• id="newsletter-signup-form" : Bagian ini yang akan diregistrasikan pada jQuery Cookie.
• action="URL Proses" : Gantilan URL Proses dengan alamat URL yang telah anda siapkan untuk memproses data input dari form.
• class="pInline inline-label" : Bagian ini juga akan diakses oleh plugin jQuery bPopup dan jQuery In-Field Label,jadi biarkan seperti itu.
• Sedangkan bagian-bagian lain silahkan sesuaikan dengan imajinasi dan kebutuhan anda.

Skenario CSS

Skenario CSS dibawah ini digunakan untuk memberikan sentuhan menarik pada form newsletter. Jika anda mengerti tentang bahasa CSS, silahkan manipulasi sesuai dengan imajinasi anda. (Ma'af tidak bisa menjelaskan baris perbaris...)

#jq-popup h1 {
 font-family: Arial,Helvetica,sans-serif;
 font-size: 1.75em;
 line-height: 1.375em;
 margin: 0 0 0.5em;
 font-weight: 700;
 color: #FEFEFE;
}
#jq-popup .hidden {
 display: none;
 visibility: hidden;
}
#jq-popup input[type="button"], #jq-popup input[type="submit"], #jq-popup button {
 cursor: auto;
}
#jq-popup select, #jq-popup input, #jq-popup textarea, #jq-popup button {
 font: 99% sans-serif;
}

#jq-popup p.inline-label {
 position:relative; color:#000000;
}
#jq-popup label.inline-label {
 position:absolute; 
 top:22px; 
 left:15px; 
 text-shadow: none;
}
#jq-popup {
 width: 500px;
 padding:20px;
 background: #2c7bb3;
 border: 5px solid #fafafa;
 color: #fefefe;
 font-family: Helvetica,Arial,sans-serif;
 font-size: 14px;
 line-height: 1.5em;
 text-shadow: 0 1px 1px #444;
 box-shadow: 0 0 10px #000, 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset, 0 0 1px rgba(0, 0, 0, 0.4), 0px 16px 14px -10px rgba(0, 0, 0, 0.5);;
 -webkit-box-shadow: 0 0 10px #000, 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset, 0 0 1px rgba(0, 0, 0, 0.4), 0px 16px 14px -10px rgba(0, 0, 0, 0.5);;
 -moz-box-shadow: 0 0 10px #000, 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset, 0 0 1px rgba(0, 0, 0, 0.4), 0px 16px 14px -10px rgba(0, 0, 0, 0.5);
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
}
#jq-popup form fieldset {
 border: none;
}
#jq-popup p {
 margin: 0px;
}
#jq-popup a, #jq-popup a:visited {
 color: #fff;
}
#jq-popup #email-address {
 font-size: 16px;
 width: 474px;
 border: 3px solid #cecece;
 padding: 10px;
 margin: 10px 0;
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
} 
#jq-popup #newsletter-submit {
 float: right;
 display: block;
 color: #fff;
 text-shadow: 0 1px 1px rgba(0,0,0,0.45);
 font-weight: 700;
 background: #d08032 url(img/button-gradient.png) 0 50% repeat-x;
 border: 1px solid #d08032;
 padding: 7px;
 text-align: center;
 margin-bottom: 10px;
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
}
#jq-popup #newsletter-submit:hover {
 background: #d05032 url(button-gradient.png) 0 50% repeat-x;
 border-color: #d05032;
}
#jq-popup .exit-button {
 display: block;
 position: absolute;
 top: -15px;
 right: -15px;
 width: 25px;
 height: 25px;
 background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/s800/jquery.imageZoom.png) no-repeat;
}
#jq-popup .exit-button:hover { 
 cursor:pointer;
}
#jq-popup .exit-phrase {
 margin: 15px 0 0 0;
 float: right;
}

Skenario jQuery

Perhatikan skenario jQuery dibawah ini agar kita mampu melakukan modifikasi fungsi sesuai kebutuhan dan imajinasi.

jQuery(document).ready(function () {
 // Menghubungkan Cookie dengan aksi tombol submit
 jQuery("#newsletter-signup-form").submit(function () {
  jQuery.cookie("popup_seen_", '1', {
   expires: 30,
   path: "/"
  });
 });
 // Membuat Popup
 if (jQuery.cookie('popup_seen_') != 1)
 jQuery('#jq-popup').bPopup({
  cookieClose: true,
  cookieExpire: 30,
  modalColor: "#000",
  modalClose: false,
  vStart: 100,
  closeClass: "pClose",
  delay: 1000,
  follow: false,
  inlineClass: "pInline",
  inlineLabel: true,
  escClose: true
 });
});

Skenario jQuery diatas dibagi menjadi 2 blok, yaitu:
Penulisan Cookie

jQuery("#newsletter-signup-form").submit(function () {
 jQuery.cookie("popup_seen_", '1', {
  expires: 30,
  path: "/"
 });
});

Jika pengunjung melakukan submit dengan identitas tombol #newsletter-signup-form maka jQuery Plugin akan menuliskan cookie dengan nama popup_seen_ dengan nilai (value) 1. Cookie ini akan berakhir pada 30 hari kedepan (expires: 30) dan cookie ini berlaku pada semua halaman situs (path: "/").

Pengecekan Cookie dan Pembuatan Form Newsletter

if (jQuery.cookie('popup_seen_') != 1)

Pemeriksaan cookie. Jika cookie bernama popup_seen_ tidak sama dengan 1 maka...

jQuery('#jq-popup').bPopup({

Form Newsletter dengan identitas #jq-popup akan dibuat

cookieClose: true,

Jika bernilai true maka cookie akan ditulis ketika tombol Close diklik. Jika bernilai false maka cookie tidak akan ditulis ketika tombol close diklik.

cookieExpire: 30,

Cookie akan berlaku selama 30 hari kedepan

modalColor: "#000",

Untuk menentukan warna Overlay atau warna latar dari form

modalClose: false,

Jika bernilai false maka ketika overlay/latar di klik maka form tidak akan ditutup. Jika bernilai true maka form akan ditutup ketika overlay/latar diklik.

vStart: 100,

Vertical Start atau jarak form dari atas. Ubah nilai untuk menentukan posisi form saat diload secara vertikal.

closeClass: "pClose",

Ketika tombol dengan class pClose diklik, maka form akan ditutup.

delay: 1000,

Jeda waktu tampil form dimulai saat halaman diload. Idealnya 5000 milidetik.

follow: false,

Jika bernilai false maka form tidak akan mengikuti pergerakan halaman ketika discroll. Jika bernilai true maka form akan selalu berada ditengah halaman ketika pengujung melakukan scroll halaman.

inlineClass: "pInline",

Class pInline digunakan untuk menampilkan label yang akan diakses juga oleh plugin jQuery In-Field Label

inlineLabel: true,

Jika bernilai true maka label akan ditampilkan. Jika bernilai false maka label (Masukan Alamat Email Anda) tidak akan ditampilkan.

escClose: true

Jika bernilai true maka ketika pengunjung menekan tombol Esc maka form akan ditutup. Jika benilai false maka tombol Esc tidak berpengaruh pada form.

});

Fungsi pembuatan Popup ditutup

Total Skenario

Lalu bagaimana integrasi pada Blogger? Pastikan anda berada pada Template - Edit HTML kemudian tempat bagian-bagian dibawah ini.

[1] Tempatkan kode dibawah ini diatas tag </head>:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
<script src='https://raw.github.com/hendriono/Blogger-Plugins/master/js/jquery.infieldlabel.js'/>
<script src='https://raw.github.com/hendriono/Blogger-Plugins/master/js/jquery.bpopup.js'/>
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js'/>
<script type="text/javascript">//<![CDATA[
jQuery(document).ready(function () {
 // Menghubungkan Cookie dengan aksi tombol submit
 jQuery("#newsletter-signup-form").submit(function () {
  jQuery.cookie("popup_seen_", '1', {
   expires: 30,
   path: "/"
  });
 });
 // Membuat Popup
 if (jQuery.cookie('popup_seen_') != 1)
 jQuery('#jq-popup').bPopup({
  cookieClose: true,
  cookieExpire: 30,
  modalColor: "#000",
  modalClose: false,
  vStart: 100,
  closeClass: "pClose",
  delay: 1000,
  follow: false,
  inlineClass: "pInline",
  inlineLabel: true,
  escClose: true
 });
});
//]]></script>

[2] Tempatkan kode CSS (Skenario CSS) diatas kode ]]></b:skin>
[3] Tempatkan kode HTML (Skenario HTML) diatas kode </body>

Kesimpulan

Kode diatas hanya dijelaskan secara praktis dan sederhana. Jika anda merasa tidak puas dengan penjelasan diatas silahkan lakukan ekplorasi pada situs pembuat dari plugin-plugin yang sudah disebutkan diatas. Semua kembali kepada imajinasi anda. Selamat mencoba dan semoga berhasil. Happy Blogging :)

jQuery

Plugin jQuery Menu Klik Kanan

Bismillah. Alhamdulillah. Satu plugin jQuery selesai ditulis walau dalam kondisi masih banyak sekali kekurangan. Plugin jQuery ini digunakan untuk mengubah menu browser saat melakukan klik kanan mouse pada suatu halaman. Pada mulanya fungsi ini digunakan untuk men-non-aktikan klik kanan dengan tujuan meminimalisir tindakan Copy Paste artikel. Namun sepertinya sangat disayangkan kalau hanya sebuah alert (peringatan) yang muncul pada saat klik kanan di area halaman. Lalu munculah ide untuk mengganti alert tersebut dengan menu. Script ini merupakan comotan dari berbagai script jQuery yang ada, yah maklumlah, saya hanya blogger bodoh yang tidak lebih pintar dari pembacanya.

Fork Plugin jQuery Right-Click

Demo Plugin jQuery Right-Click

Download Plugin jQuery Right-Click

Deskripsi

Plugin jQuery Right-Click Menu atau Plugin jQuery Menu Klik Kanan berfungsi untuk mengganti menu bawaan browser dengan menu baru yang bisa kita tentukan. Menu ini akan muncul ketika kita klik kanan pada mouse disuatu area halaman web tertentu yang sudah kita tentukan. Jadi kita bisa menentukan area-area tertentu untuk menampilkan menu buatan sendiri, sedangkan diarea yang tidak kita tentukan, ketika dilakukan klik kanan mouse maka menu default browser-lah yang akan ditampilkan. Plugin ini ditulis mengikuti kaidah framework jQuery versi 1.7, ini berarti pula bahwa plugin jQuery Right-Clik Menu tidak akan bekerja jika kita memasang framework jQuery dibawah versi 1.7 pada halaman situs. Script Plugin jQuery ini tidak lagi menggunakan .bind() tapi sudah menggunakan .on() sebagai penggantinya sesuai dengan perubahan yang dilakukan sejak jQuery versi 1.7. Memanfaatkan "contextmenu" untuk mengganti menu default bawaan browser.

Ingatlah! Plugin jQuery Right-Click tidak bekerja pada framework jQuery dibawah versi 1.7

Skenario HTML

Pada dasarnya menu yang ditampilkan ditempatkan dalam posisi bebas saja. Anda mau menempatkan pada widget, atau ditempatkan diatas tag </body> atau dibawah tag <body> menu tersebut akan tetap bisa di tampilkan. Jadi tidak ada lokasi khusus untuk menempatkan menu tersebut. Perhatikan kode HTML dibawah ini:

Kode HTML untuk Area Klik Kanan

Dibawah ini hanyalah kode penjelasan tentang area yang akan di-set sebagai area yang menampilkan menu saat di-klik kanan.

<div id="areaKlik" class="item">
 <p>Area widget, artikel atau apalah disini...<p/>
</div>

Kode diatas tidak usah dimasukan kedalam blog anda. Kode HTML ini berhubungan dengan penentuan area pada Skenario jQuery. Lebih baik baca dulu hingga tuntas artikel ini.

Kode HTML untuk Menu Klik Kanan

Dibawah ini adalah kode yang digunakan untuk membuat menu yang akan ditampilkan.

<div id="menuKanan">
 <ul>
  <li><a class="facebook" href="#">Share on Facebook</a></li>
  <li><a class="twitter" href="#">Share on Twitter</a></li>
  <li><a class="delicious" href="#">Share on Delicious</a></li>
  <li><a class="stumble" href="#">Share on StumbleUpon</a></li>
  <li><a class="reddit" href="#">Share on ReddIt</a></li>
  <li><a class="digg" href="#">Share on Digg</a></li>
 </ul>
</div>
<div id="latarMenu"></div>

Area ini adalah area wajib yang harus dimasukan kedalam halaman blog anda (baik didalam template maupun didalam widget). Perhatikan dengan baik kode diatas yang terdiri dari 2 id, yaitu:

• <div id="menuKanan">...</div> : Ini adalah area menu yang akan ditampilkan ketika melakukan klik kanan pada area yang sudah ditentukan. Silahkan ubah dan atur-atur sesuai kebutuhan namun jangan membuang id-nya, karena id="menuKanan" merupakan yang diintegrasikan kedalam plugin jQuery. ID ini hilang maka hilang pula menu klik kanan.
• <div id="latarMenu"></div> : Ini adalah area latar, area yang bisa kita set untuk ditampilkan atau dibuat transparan saja. id="latarMenu" tidak boleh dibuang karena area ini digunakan untuk menutup menu saat mouse kiri di klik pada area diluar menu. Saat menu aktif maka area diluar menu adalah area id="latarMenu".

Skenario CSS

Kode CSS dibawah ini tidak akan dijelaskan secara detail, silahkan unduh file yang telah sediakan kemudian modifikasi file CSS ini sesuai dengan kebutuhan dan imajinasi anda. Namun yang terpenting pada kode CSS dibawah ini adalah properti #latarMenu dan #menuKanan (lebih baik tidak diubah jika belum paham tentang CSS).

#latarMenu {
 position:absolute;
 left:0;
 top:0;
 z-index:9000;
 display:block;
 background-color:#000000; /* Warna Latar Dibelakang Menu */
 opacity:0;
}
#menuKanan {
 position:absolute;
 display:none;
 z-index:9999;
 background:#212121; /* Warna Latar Menu */
 border:1px solid #302F2F;
 width:220px; /* Lebar Menu */
 height:215px; /* Tinggi Menu */
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 -o-border-radius:5px;
 border-radius:5px;
 -moz-box-shadow:0 0 2px #000;
 -webkit-box-shadow:0 0 2px #000;
 -o-box-shadow:0 0 2px #000;
 border-box-shadow:0 0 2px #000;
}

Skenario jQuery

Kode dibawah ini untuk mengaktifkan fungsi Plugin jQuery Right-Click. Untuk menggunakan plugin ini, pastikan website anda (periksa diantara tag head) menggunakan framework jQuery versi 1.7 keatas seperti dibawah ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Masukan plugin Plugin jQuery Right-Click dibawah framework jQuery, misal seperti dibawah ini:

<script src=".../jquery.klikanan.min.js"></script>

Sampai disini plugin masih belum aktif, kita perlu melakukan beberapa settingan. Silahkan teruskan membaca...

Setting jQuery Right-Click

Untuk mengaktifkan plugin jQuery Klik Kanan, secara default settingan ditulis seperti dibawah ini:

$('#areaKlik').klikanan();

Atau lebih detailnya:

<script type="text/javascript">
$(function () {
 $('#areaKlik').klikanan();
});
</script>

Berikut fungsi yang bisa kita gunakan untuk mengeset jQuery Menu Klik Kanan, yaitu:

$('#areaKlik').klikanan({
 speed: 400,
 overlay: false
});

• speed: 400 = speed digunakan untuk menentukan seberapa cepat menu klik kanan ditampilkan. Secara default bernilai 400.
• overlay: false = overlay digunakan untuk menentukan latar dari menu, jika bernilai "false" maka latar (overlay) tidak diaktifkan. Secara default bernilai "true" berarti overlay diaktifkan.
• #areaKlik = ini adalah id dari area yang akan digunakan untuk menampilkan menu saat halaman di klik kanan. Sangat berhubungan erat dengan Skenario HTML (Lihat Skenario HTML). #areaKlik merupakan id yang menunjuk langsung kepada id="areaKlik", itu berarti anda diperbolehkan mengubah target area menu klik kanan.

Misal; Blogger secara default memiliki area artikel dengan class entry-content (silahkan cek pada template blogger dan cari kode class='post-body entry-content'). Jika anda ingin area artikel tersebut merupakan area menu klik kanan maka tulislah fungsi plugin-nya seperti dibawah ini:

$('.entry-content').klikanan({
 speed: 400,
 overlay: false
});

atau lebih lengkapnya:

<script type="text/javascript">
$(function () {
 $('.entry-content').klikanan({
  speed: 400,
  overlay: false
 });
});
</script>

Kesimpulan

Plugin jQuery Right-Click Menu mungkin saja mengandung bug karena kesalahan fungsi atau kesalahan penulisan, maka dari itu kontribusi, kritik, dan saran anda setelah penggunaan plugin ini sangat diharapkan untuk perbaikan lebih lanjut. Plugin ini baru dites pada browser Firefox 12 (Win), Chrome 19.0.1084.52 m (Win), dan Safari 5.1.4 (Win). Plugin ini bersifat bebas untuk digunakan, dimodifikasi dan dikembangkan baik untuk kepentingan eksperimen atau untuk digunakan pada situs komersil.

Selamat mencoba, berkarya dan semoga berhasil. Happy Blogging :)

jQuery

Ubah Nama Navigasi Halaman Artikel

Bismillah. Alhamdulillah. Navigasi halaman per artikel biasanya ditampilkan dengan keterangan "Posting Lebih Baru" untuk berpindah halaman pada artikel yang terbaru, dan "Posting Lama" untuk berpindah halaman pada artikel yang lebih lama. Beberapa blogger kemudian menggantinya dengan gambar panah atau gambar lainnya yang mewakili navigasi halaman per artikel. Sedangkan jika kita perhatikan pada platform CMS (misal; Wordpress) navigasi halaman per artikel biasanya berisi judul artikel. Bisakah pengguna Blogger mengubah "Posting Lebih Baru" dan "Posting Lama" dengan judul artikel?

Demo jQuery Navigation Item

Skenario (X)HTML Navigasi Halaman Per Artikel

Dibawah ini adalah kode (X)HTML dari Blogger, namun tidak akan dijelaskan baris perbaris. Kita hanya akan mengambil bagian pentingnya saja yang punya peranan pada navigasi halaman artikel. Perhatikan kode (X)HTML dibawah ini:

<b:includable id='nextprev'>
 <div class='blog-pager' id='blog-pager'>
  
  <b:if cond='data:newerPageUrl'>
   <span id='blog-pager-newer-link'>
    <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
     <data:newerPageTitle/>
    </a>
   </span>
  </b:if>

  <b:if cond='data:olderPageUrl'>
   <span id='blog-pager-older-link'>
    <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
     <data:olderPageTitle/>
    </a>
   </span>
  </b:if>

  <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

  <b:if cond='data:mobileLinkUrl'>
   <div class='blog-mobile-link'>
    <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
   </div>
  </b:if>
  
 </div>
 <div class='clear'/>
</b:includable>

Diantara sekumpulan kode (X)HTML navigasi halaman artikel diatas kita hanya akan mengambil 2 kode yang kemudian dimanipulasi agar mampu menampilkan judul artikel, yaitu:

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' ...><data:newerPageTitle/></a>

Kode diatas terdiri dari fungsi:

• class='blog-pager-newer-link' : ini merupakan style CSS yang digunakan untuk mengatur link 'Posting Lebih Baru' baik berupa pengaturan warna, tombol atau gambar background.
• expr:href='data:newerPageUrl' : ini berisi URL 'Posting Lebih Baru' yang kemudian nanti akan diambil URL-nya melalui feed dan dimanfaatkan sebagai tag Anchor Link Judul Artikel pengganti 'Posting Lebih Baru'.
• data:newerPageTitle : kode inilah yang menampilkan kalimat 'Posting Lebih Baru' dan kode ini pula nanti yang akan diganti dengan judul artikel.

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' ...><data:olderPageTitle/></a>

• class='blog-pager-older-link' : ini merupakan style CSS yang digunakan untuk mengatur link 'Posting Lama' baik berupa pengaturan warna, tombol atau gambar background.
• expr:href='data:olderPageUrl' : ini berisi URL 'Posting Lama' yang kemudian nanti akan diambil URL-nya melalui feed dan dimanfaatkan sebagai tag Anchor Link Judul Artikel pengganti 'Posting Lama'.
• data:olderPageTitle : kode inilah yang menampilkan kalimat 'Posting Lama' dan kode ini pula nanti yang akan diganti dengan judul artikel. (Beberapa blogger kemudian mengganti kode ini dengan gambar misal <img src="img/navbaru.png"/>)

Skenario JSON dan jQuery

Dibawah ini adalah script JSON dan jQuery yang digunakan untuk memanipulasi navigasi halaman artikel/item. Namun tidak dijelaskan secara detail, silahkan anda jelaskan dan tulis sendiri pada artikel anda, dan saya akan mencantumkannya sebagai referensi. Jangan lupa tinggalkan informasi ketika anda selesai menerbitkan artikel tentang penjelasan script JSON dan jQuery dibawah ini.

/*!
 * jQuery Blogger Item Navigation 1.0
 * http://modification-blog.blogspot.com/
 * Copyleft 2012, Blogger Tune-Up
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * Date: Mon May 28 14:54:29 2012 -0500
 */
var JudNav = {};
//Fungsi pengambilan judul artikel melalui feed
function ambilJudNav(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
        var judul = json.feed.entry[i];
        var data = "";
        for (var k = 0; k < judul.link.length; k++) {
            if (judul.link[k].rel == 'alternate') {
                data = judul.link[k].href;
                break
            }
        }
        if (data != "") JudNav[data] = judul.title.$t
    }
}
//Fungsi penulisan sekumpulan judul feed dengan mengambilnya dari fungsi sebelumnya 'ambilJudNav'
document.write('<script type="text/javascript" src="http://' + window.location.hostname + '/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=ambilJudNav"></' + 'script>');
//Fungsi Pengambilan Anchor, Pengecekan URL dan Penggantian beberapa simbol
function JudulURL(anchor) {
    var linkurl = anchor.match(/\/([^\/_]+)(_.*)?\.html/);
    if (linkurl) {
        linkurl = linkurl[1].replace(/-/g, " ");
        linkurl = linkurl[0].toUpperCase() + linkurl.slice(1);
        if (linkurl.length > 28) linkurl = linkurl.replace(/ [^ ]+$/, "...")
    }
    return linkurl
}
//Mengganti 'Posting Lama' dan 'Posting Lebih Baru' dengan fungsi jQuery saat halaman di-load
$(window).load(function () {
    window.setTimeout(function () {
        var anchor = $("a.blog-pager-newer-link").attr("href");
        if (anchor) {
            var judul = JudNav[anchor];
            if (!judul) judul = JudulURL(anchor);
            if (judul) $("a.blog-pager-newer-link").html(judul)
        }
  anchor = $("a.blog-pager-older-link").attr("href");
        if (anchor) {
            var judul = JudNav[anchor];
            if (!judul) judul = JudulURL(anchor);
            if (judul) $("a.blog-pager-older-link").html(judul)
        }
    }, 500)
});

Integrasi Pada Blog

Dibawah ini integrasi script JSON jQuery pada template Blogger.
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Template - Edit HTML - Lanjutkan"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan (Copy Paste) kode dibawah ini tepat diatas kode pada langkah 4:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='https://raw.github.com/hendriono/Blogger-Plugins/master/js/jquery.navitem.min.js'/>

Perhatian: Jika sudah pernah memasang framework jQuery maka kode baris pertama tidak perlu dimasukan.
Langkah 5
Klik tombol "Simpan Template" dan preview blog anda

Update Script jQuery tanpa Script JSON

Taufik Nurrohman menjelaskan bahwa script diatas cukup membebani load halaman blog dengan analisis pemanggilan feed sebanyak 500 artikel. Dan terima kasih untuk Mas Ireng yang kemudian memberikan solusi terbaiknya dengan membuang script JSON dan hanya menggunakan script jQuery untuk meload URL dan judul artikel. Script dibawah ini adalah solusi atas masalah kelemahan load feed JSON. Pada bagian "Integrasi Pada Blog" langkah 4 silahkan ganti kode menjadi seperti dibawah ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    var newerLink = $('a.blog-pager-newer-link').attr('href');
 $('a.blog-pager-newer-link').load(newerLink + ' .post-title:first', function () {
        var newerLinkTitle = $('a.blog-pager-newer-link').text();
  $('a.blog-pager-newer-link').text('← ' + newerLinkTitle);
    });
    var olderLink = $('a.blog-pager-older-link').attr('href');
 $('a.blog-pager-older-link').load(olderLink + ' .post-title:first', function () {
        var olderLinkTitle = $('a.blog-pager-older-link').text();
  $('a.blog-pager-older-link').text(olderLinkTitle + ' →');
    });
});
//]]>
</script>

Kesimpulan

Script ini tidaklah begitu penting untuk digunakan, namun jika ingin tampil beda, tidak ada salahnya diterapkan. Kode yang ditulis tidaklah terlalu banyak sehingga tidak terlalu membebani load halaman blog. Jika dalam penerapan terjadi kegagalan ada kemungkinan terjadi bentrok script pada blog anda. Periksa dengan hati-hati... Dan silahkan modifikasi script diatas sesuai dengan kebutuhan atau mungkin ingin mengembangkannya lebih bagus lagi sesuai karakter diri. Jika merasa lebih nyaman dengan menggunakan hosting file sendiri, silahkan unduh script-nya pada link dibawah ini dan upload pada web hosting miliki sendiri.

jQuery Blogger Item Navigation

jQuery Blogger Item Navigation Minified

Selamat mencoba, berkarya dan semoga berhasil. Happy Blogging :)

(X)HTML jQuery

jQuery Overlay Sederhana

Bismillah. Disela-sela kesibukan dunia teknik, Alhamdulillah masih sempat menulis artikel sederhana ini. Artikel kali ini akan membahas cara membuat efek overlay sederhana dengan jQuery. Namun tidak akan dijelaskan secara detail karena sepertinya terlalu panjang jika harus ditulis detail. Pada script yang disertakan diberikan penjelasan-penjelasan penting walau tidak detail, jadi silahkan dianalisis sendiri. Fungsi script overlay ini sebenarnya hanya secuil kode yang tersedia pada efek-efek overlay hebat (misal; colorbox, nivozoom, prettyPhoto, dll). Maka dari itu jangan membandingkan dengan plugin-plugin tersebut.

Demo dan Unduh jQuery Simple Overlay

Deskripsi

Ketika kita klik pada salah satu gambar yang memiliki keterangan tombol perbesar (icon +) maka gambar akan ditampilkan dengan efek luntur (fade) dalam ukuran besar beserta keterangan, sedangkan seluruh halaman ditutup dengan latar hitam transparan. Ketika tombol tutup (icon X) di klik dan atau latar hitam transparan diklik dan atau tombol ESC pada keyboard di tekan maka gambar disembunyikan dengan efek luntur (fade). Latar hitam transparan berfungsi untuk memfokus gambar dan artikel yang di tampilkan pada layar. Layar hitam transparan yang menutupi seluruh halaman sering disebut overlay. Untuk memahami bahasan berikutnya sebaiknya anda unduh terlebih dahulu file demo.

Skenario HTML

Skenario HTML dibawah ini terdiri dari 1 kontener, kontener ini berisi 3 area utama. Perhatikan kode HTML dibawah ini:

<div class="feat-overlay">

 <!-- Area Item 1-->
 <div class="item">
  <a class="bingkai" rel="overlay-1" href="#"><span class="perbesar"></span></a>
  <div class="thumb">
   <img height="147" border="0" width="217" alt="" src="gbr/banjarsari-s.jpg">
  </div>
  <h4>Judul Item</h4>
  <p>Keterangan Gambar Pendek</p>
 </div>
 
 <!-- Area Overlay Tersembunyi 1-->
 <div style="display: none;" id="overlay-1">
  <img height="383" border="0" width="585" alt="" alt="" src="gbr/banjarsari.jpg">
  <h5>Judul Overlay</h5>
  <p>Keterangan Gambar Panjang</p>
 </div>
 
 <!-- Area Item 2, 3, 4, dst -->
 <!-- Area Overlay Tersembunyi 2, 3, 4, dst -->
 
 <!-- Area Untuk Menampilkan Overlay Tersembunyi -->
 <a href="#" id="latar"></a>
 <div class="info-overlay">
  <a href="#" class="tutup"></a>
  <div class="txt">
   <h5>loading...</h5>
  </div>
 </div>

</div>

• feat-overlay adalah kontener dari seluruh overlay yang akan dibuat.
• item merupakan wadah yang berisi gambar thumbnail dan penggalan keterangan. Jumlah wadah item ini tidak terbatas, anda bisa membuatnya sebanyak mungkin, namun hal yang terpenting adalah tag rel. Tag rel tidak boleh sama, harus unik. Misal disana tertulis overlay-1 maka berikutnya anda bisa menggunakan overlay-2, overlay-3 dan seterusnya.
• overlay-1 adalah wadah dari area informasi lengkap overlay yang disembunyikan pada saat halaman di-load. Didalamnya berisi gambar dalam ukuran besar dan informasi secara lengkap. Tag id overlay-1 juga harus unik, karena ini terkait langsung dengan tag rel item. Misal, pada item tertulis rel="overlay-1" maka informasi lengkapnya tersedia pada id="overlay-1", maka yang berikutnya ditulis; rel="overlay-2" (pada item) dan id="overlay=2" (pada area informasi lengkap) dan seterusnya.
• Informasi lengkap yang tersimpan pada id="overlay-1" dan seterusnya, akan ditampilkan saat gambar di klik pada satu area saja, yaitu area info-overlay. Area info-overlay adalah lokasi untuk menampilkan semua informasi lengkap (gambar besar dan keterengan lengkap) overlay-1, overlay-2 dan seterusnya. Namun wadah ini hanya cuku ditulis satu kali saja.

Skenario CSS

Kode CSS dibawah ini hanya terdiri dari 2 bagian utama, yaitu bagian list item dan bagian overlay. List item berfungsi untuk mengatur bagian-bagian item (gambar thumbnail, judul, teks pendek dan tombol perbesar), informasi lengkap (frame, gambar besar, judul dan teks lengkap). Sedangkan bagian overlay berisi tentang pengaturan latar (warna, area dan opacity), informasi lengkap (frame, teks lengkap, gambar besar dan tombol tutup). Secara detail silahkan dipelajari sendiri (ma'af kepanjangan jika dijabarkan).

/* List Item */
.feat-overlay {
 width: 725px;
 margin: 0 auto;
}
.feat-overlay .item {
 position: relative;
 float: left;
 width: 249px;
 padding-bottom: 15px;
}
.feat-overlay .item.last {
 width: 225px;
}
.feat-overlay span.perbesar {
 background: transparent url(../img/enlarge.png) no-repeat top left;
 position: absolute;
 z-index: 3;
 top: 133px;
 left: 201px;
 width: 22px;
 height: 22px;
 z-index: 8;
}
.feat-overlay a.perbesar {
 background: transparent url(../img/enlarge.png) no-repeat top left;
 position: absolute;
 z-index: 3;
 top: 133px;
 left: 201px;
 width: 22px;
 height: 22px;
 z-index: 8;
}
.feat-overlay a:hover span.perbesar, .feat-overlay a.perbesar:hover {
 background-position: 0 -26px;
}
.feat-overlay .item .thumb {
 width: 217px;
 height: 147px;
 overflow: hidden;
 margin-bottom: 9px;
 position: relative;
}
.feat-overlay .item .bingkai {
 background: transparent url(../img/bg-item.png) no-repeat top left;
 position: absolute;
 z-index: 2;
 top: 0;
 left: 0;
 width: 217px;
 height: 147px;
}
.feat-overlay .item h4 {
 width: 213px;
 font-size: 14px;
 line-height: 16px;
 font-weight: bold;
 padding: 0 2px 4px 0;
}
.feat-overlay .item p {
 line-height: 16px;
 width: 213px;
 padding-left: 2px;
}
.clear {
 clear: both;
 font-size: 1px;
 line-height: 0;
 margin: 0;
 padding: 0;
}

/* Overlay */
#latar {
 position: fixed;
 z-index: 15;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: black;
 opacity: 0;
 visibility: hidden;
}
.info-overlay {
 background: transparent url(../img/bg-overlay.png) no-repeat top left;
 z-index: 20;
 position: fixed;
 margin: auto;
 left: 0;
 right: 0;
 bottom: 0;
 top: 0;
 width: 872px;
 height: 435px;
 opacity: 0;
 visibility: hidden;
 *position: absolute;
 *zoom: 1;
 *visibility: visible;
 *display: none;
}
.info-overlay .overlay-img {
 float: left;
 width: 585px;
 height: 383px;
 margin: 26px 20px 0 26px;
 *display: inline;
 *zoom: 1;
 *position: relative;
}
.info-overlay .txt {
 position: relative;
 z-index: 1;
}
.info-overlay .txt img {
 float: left;
 width: 585px;
 height: 383px;
 margin: 26px 20px 0 26px;
 *display: inline;
 *zoom: 1;
 *position: relative;
}
.info-overlay .txt h5 {
 font: 14px/16px Helvetica, Arial, sans-serif;
 color: #404040;
 width: 210px;
 margin: 34px 0 6px 0;
 font-weight: bold;
 float: left;
}
.info-overlay .txt p {
 width: 210px;
 line-height: 16px;
 float: left;
}
.info-overlay a.tutup {
 background: transparent url(../img/close.png) no-repeat top left;
 position: absolute;
 z-index: 1;
 top: 1px;
 right: 0px;
 width: 29px;
 height: 30px;
 z-index: 2;
}
.info-overlay a.tutup:hover {
 background-position: 0 -32px;
}
* html #latar {
 position: absolute;
 height: expression(document.body.offsetHeight);
 filter: alpha(opacity=0);
}

Skenario jQuery

Script dibawah ini digunakan untuk mengatur fungsi overlay. Ketika gambar di klik $(.item a).click maka overlay diaktifkan dan informasi lengkap juga ditampilkan. Ketika #latar, tombol tutup di klik dan atau tombol ESC di tekan maka overlay disembunyikan. Begitulah garis besar fungsi script jQuerynya. Mengenai secara lengkap, silahkan jabarkan sendiri... (ge males...)

$(document).ready(function(){
 
 var bukaOverlay = false;
 
 // tampilkan overlay
 $('.item a').each(function(){
  $(this).click(function(){
   bukaOverlay = true;
   
   if ($.browser.msie) {
    // menampilkan overlay dengan efek luntur (fade)
    var posisi = $('.feat-overlay').offset();
    $('.info-overlay').css('left', (posisi.left+44) + 'px');
    $('.info-overlay').css('top', (posisi.top-10) + 'px');
    $('#latar').css('visibility', 'visible');
    $('#latar').animate({ opacity:"0.8" }, 200, function() { 
     $('.info-overlay').css('display', 'block');
    });
   } else {
    $('#latar').css('visibility', 'visible');
    $('.info-overlay').css('visibility', 'visible');
    $('#latar').animate({ opacity:"0.8" }, 100, function() { 
     $('.info-overlay').animate( { opacity:"1" }, { queue:false, duration:200 } )
    });
   }
   
   // ubah isi overlay jika tersedia
   if($( '#' + $(this).attr('rel') ) != null){
    $('.txt').html( $( '#' + $(this).attr('rel') ).html() );
   }
   return false;
  });
 });
 
 // tutup overlay dengan event klik dan tombol ESC
 $('#latar').click(function(e) {
  e.preventDefault();
  tutupOverlay();
 });
 
 $('.info-overlay .tutup').click(function(e) {
  e.preventDefault();
  tutupOverlay();
 });
 
 $(document).keyup(function(event) {
  if ((event.keyCode == 27) && (bukaOverlay)) {
   tutupOverlay();
  }
 });
 
});

// membuat fungsi tutup overlay
function tutupOverlay() {
 bukaOverlay = false;
 if ($.browser.msie) {
  $('.info-overlay').css('display', 'none');
  $('#latar').animate({ opacity:"0" }, 200, function() { 
   $('#latar').css('visibility', 'hidden');
  });
 } else {
  $('.info-overlay').animate({ opacity:"0" }, 200, function() { 
   $('#latar').animate({ opacity:"0" }, 100, function() { 
    $('#latar').css('visibility', 'hidden');
    $('.info-overlay').css('visibility', 'hidden');
   });
  });
 }
}

Kesimpulan

jQuery overlay sederhana (jQuery Simple Overlay) ini memang sangat sederhana, karena bukanlah sebuah plugin yang kompleks. Dan anda bisa saja kemudian menyusun ulang script diatas untuk dibuat plugin yang lebih sederhana. Mengenai fungsi-fungsinya mari kita diskusikan pada kotak komentar atau pada fan page Blogger Tune-Up. Penggunaan overlay diatas bisa disesuaikan dengan keperluan anda, bisa untuk halaman depan blog atau halaman portofolio. Selanjutnya silahkan berkreasi dengan script diatas, anda bebas memodifikasinya sesuai dengan kebutuhan. Selamat mencoba, belajar dan obrak-abrik script. Semoga berhasil. Akhirnya kata Happy Blogging :)

jQuery

Text Editor Script Code Populer

Bismillah. Alhamdulillah. Setelah melakukan polling mengenai Text Editor Script Code yang paling sering digunakan oleh para web desainer dan script coder didunia maya, dibawah ini akan disampaikan hasil dari pengambilan suara tersebut. Hasil polling ini bukan berarti mewakili suara secara global, namun lebih bersifat lokal untuk wilayah Indonesia saja. Dan hasil polling ini bukan berarti mempengaruhi atau mengharuskan anda berganti text editor yang sudah biasa anda gunakan. Ini hanya sebuah gambaran secara umum, mengenai cocok dan tidak cocok dengan hasil polling ini, semua kembali kepada kebiasaan anda dalam menggunakan text editor. Text Editor dengan peringkat teratas bukan berarti text editor yang paling sempurna, hanya kebetulan Text Editor tersebut ternyata lebih banyak digunakan oleh para web desainer dan script coder yang tentunya dengan beberapa alasan yang akan sedikit diulas. Dibawah ini peringkat Text Editor hasil polling yang diurutkan dari peringkat 1 hingga yang paling jarang digunakan.

1. Notepad++ (Freeware)

Ini Text Editor paling populer yang banyak digunakan oleh web desainer dan web developer terutama di Indonesia. Namun sayang Text Editor ini hanya diperuntukan bagi mereka yang menggunakan Sistem Operasi Microsoft. Sedangkan untuk pengguna keluarga Unix (X Windows) Notepad++ tidak tersedia. Text Editor ini menjadi populer karena memiliki interface yang userfriendly, menu yang sederhana, gratis, dan memiliki kemampuan mengenali banyak sekali bahasa pemrogramman, serta terintegrasi syntax highlighter. Didukung banyak sekali plugin yang juga disediakan secara gratis, membuat Notepad++ mampu menjadi favorit. Dan saya juga termasuk paling sering menggunakan Notepad++ untuk menulis, termasuk menulis artikel ini.

2. gEdit (Opensource)

Peringkat ke-2 ditempati gEdit. Ini pertanda baik bagi perkembangan Opensource Indonesia. Jika gEdit mendapat posisi ke-dua berarti para web desainer dan web developer Indonesia sudah banyak yang beralih dari sistem operasi Microsoft ke sistem operasi sumber terbuka (Opensource) yaitu Linux. gEdit awalnya dikembangkan untuk keluarga Unix dan tersedia bagi para pengguna sistem operasi Linux namun sekarang sudah tersedia untuk semua sistem operasi. gEdit menjadi dikenal dan terkenal karena merupakan text editor default yang disertakan pada beberapa sistem operasi keluarga Linux. Terutama bagi para pengguna Ubuntu, gEdit layaknya Notepad pada Microsoft. Selain interface yang userfriendly, sederhana, gratis, sumber terbuka, juga mampu mengenali banyak bahasa pemrograman serta terintegrasi syntax highlighter sehingga memudahkan dalam penulisan kode-kode. Sebelum saya mengenal gVim, gEdit merupakan yang paling sering digunakan.

3. Dreamweaver (Berbayar)

Tidak bisa dipungkiri, bahwa text editor ini sangat hebat walau berbayar. Banyak sekali para web desainer dan web developer professional menggunakan perangkat lunak yang satu ini. Mengenai harga sepertinya saya tidak perlu mencantumkannya karena jika ditelusuri dengan jujur, masih sedikit yang rela merogoh dompetnya untuk membeli lisensi Dreamweaver buatan perusahaan Adobe ini. Walaupun mahal, tetap saja text editor ini merupakan yang populer digunakan. Interface yang sangat modern, mendukung berbagai bahasa pemrograman, didukung syntaxhighter, plugin yang melimpah, live preview dan masih banyak keunggulan lainnya jika dibandingkan dengan text editor yang sudah dibahas dan akan dibahas berikutnya. Dreamweaver hanya tersedia untuk sistem operasi Microsoft dan Macintosh. Wajar Dreamweaver sangat hebat, toh kita harus mengeluarkan dana ekstra untuk dapat menggunakan Dreamweaver. Kecuali anda mengambil jalur tak terlihat alias siluman.

4. Vim (Opensource)

Text Editor yang satu ini masih jarang digunakan di Indonesia, karena memang termasuk cukup sulit untuk digunakan. Bagi anda yang terbiasa dengan Notepad++ dan gEdit mungkin akan kerepotan saat awal-awal menggunakannya, hal ini karena gVim sangat minim penggunaan mouse bahkan bagi para pecinta Vim, text editor ini digunakan hampir tanpa mouse. gVim merupakan versi GUI hasil pengembangan dari Vim yang pada awalnya hanya tersedia untuk komputer Amiga (1991). Namun jika kita menelusuri Vim pada tingkatan global, justru Vim-lah yang paling banyak digunakan oleh para web desainer dan web developer. gVim layaknya Notepad++ dan gEdit, tersedia secara gratis, melimpah plugin, didukung syntax highlighter, dan yang sangat menarik bagi saya secara pribadi, Vim tersedia untuk semua sistem operasi, baik itu pengguna sistem operasi Microsoft, Linux, XOS (Macintosh), dan sistem operasi turunan keluarga unix lainnya. Dengan ini kita tidak perlu berganti text editor ketika berganti sistem operasi.

5. TextMate (Berbayar)

Secara pribadi saya belum pernah merasakan text editor eksklusif ini. Karena TextMate hanya tersedia untuk pengguna sistem operasi XWindows (Macintosh) yang tentunya hanya orang-orang tertentu saja yang memiliki komputer sekelas Macintosh ini. Dan saya sepertinya tidak bisa panjang lebar membahas TextMate, karena sama sekali diluar kemampuan (maklum Blogger kampungan kelas kere). Jika anda telusuri video di Youtube tentang TextMate maka anda akan menemukan nuansa eksklusif pada TextMate. Jika saya mau jujur, TextMate ini berhubungan dengan masalah gengsi. Video-video tutorial TextMate disuguhkan dengan kualitas gambar yang hebat, penyampaian yang sangat professional dan entahlah saya harus menulis apa lagi...

6. Emacs (Opensource)

Sebelum era kebangkitan Gnome pada Linux, inilah text editor default Linux yang dikembangkan dibawah bendera GNU. Emacs merupakan text editor senior (1976) sebelum posisinya perlahan namun pasti tergeser oleh gEdit. Namun sampai hari ini Emacs masih banyak digunakan oleh mereka yang sangat peduli dengan perkembangan Linux dan sistem operasi sumber terbuka. Dan mungkin saja, Emacs pernah digunakan untuk menulis kode-kode sumber gEdit. Emacs padamulanya memang menjadi text editor default linux layaknya notepad pada Microsoft, namun sekarang tersedia untuk pengguna Windows. Untuk para pengguna Windows bisa mengunduh XEmacs yang khusus dikembangkan sebagai text editor multiplatform.

7. E-TextEditor (Berbayar)

Katanya sih, E-TextEditor adalah saudara kembar TextMate yang dibuat khusus bagi para pengguna sistem operasi Microsoft yang ingin merasakan hebatnya TextMate. Situsnya meng-klaim bahwa E-TextEditor memiliki tampilan dan kemampuan yang hampir sama dengan TextMate. Jika memang demikian, maka E-TextEditor termasuk kategori bagus. Namun menjadi kurang populer karena mengharuskan penggunanya membayar lisensi yang tidak murah. Kehebatan E-TextEditor tertutup oleh harga, sehingga membuat para web desainer dan web developer lebih memilih Dreamweaver. Walau demikian, tetap saja E-TextEditor merupakan text editor bagus bagi para penggunannya.

8. Aptana (Freeware)

Ini text editor pendatang baru yang mulai menapaki hati para web desainer dan web developer. Kehebatan Aptana mulai banyak dibicarakan. Ketersediaannya yang gratis, kemampuannya yang diatas rata-rata text editor gratisan membuat Aptana mulai ditelusuri kehebatannya. Namun jika anda memiliki spesifikasi komputer yang kurang mumpuni, mungkin segera lakukan upgrade perangkat keras, karena Aptana cukup menguras resource komputer. Aptana baru tersedia untuk semua sistem operasi.

9. Bluefish (Opensource)

Sebenarnya text editor yang satu ini termasuk kategori bagus, hampir memiliki kemampuan sama dengan text editor yang sudah disebutkan diatas. Memiliki tampilan yang sederhana, gratis, sumber terbuka, didukung syntax higlighter, dan mendukung banyak bahasa pemrograman. Tersedia untuk para pengguna sistem operasi Linux dan sistem operasi lainnya. Entah kenapa Bluefish kurang populer daripada yang lain, mungkin karena tidak disertakan dalam repository sistem operasi Linux sehingga Bluefish kurang dikenal jika dibandingkan dengan gEdit. Bluefish digunakan oleh mereka yang merasa tidak puas dengan kemampuan gEdit. Sepintas, tampilan Bluefish hampir mendekati Dreamweaver saat masih dibawah manajemen Macromedia.

10. PSPad (Freeware)

PSPad merupakan text editor yang mungkin anda baru saja mengetahuinya sekarang. PSPad kurang begitu populer bagi kalangan penulis kode lokal, mungkin karena kemampuannya masih dibawah Notepad++ sehingga banyak para penulis kode yang hanya mencobanya dan kemudian membuangnya lagi. Padahal PSPad memiliki tampilan yang hampir mirip dengan text editor lainnya serta memiliki kemampuan yang hampir sama pula. Namun entahlah, toh buktinya tidak begitu dikenal.

11. Intype (Freeware)

Ini mungkin TextEditor yang masih termasuk berumur muda, sehingga kurang begitu dikenal. Namun jika melihat perkembangannya, Intype termasuk pesat karena dibeberapa forum, text editor ini telah banyak dibahas dan didiskusikan. Bagi para pengguna sistem operasi windows, Intype bisa dijadikan text editor alternatif. Selain mendukung banyak bahasa pemrograman, userfriendly, portable, didukung syntax highlighter, dan termasuk kategori irit resource komputer. Mungkin setelah artikel ini diterbitkan banyak yang kemudian penasaran untuk mencobannya dan menjadi kecanduan. Kalau sudah ketagihan jangan lupa tinggalkan informasinya pada komentar ya?

Text Editor Populer Lainnya

Text Editor dibawah ini tidak akan dibahas detail, jadi silahkan mencobanya sendiri.
12. skEdit (Mac - Berbayar)
13. TextPad (Win - Berbayar)
14. UltraEdit (Semua OS - Berbayar)
15. Programmer’s Notepad (Win - Gratis)
16. Panic Coda (Mac - Berbayar)
17. SubEthaEdit (Mac - Berbayar)
18. Komodo Edit (Semua OS - Gratis Berbayar)
19. Eclipse (Java - Gratis)
20. HTML-Kit (Win - Gratis Berbayar)
21. Scriptly (Win - Gratis)
22. BBEdit (Mac - Berbayar)
23. Screem (Linux - Gratis)
24. CSSEdit (Mac - Berbayar)
25. Arachnophilia (Java - Gratis)
26. CoffeeCup HTML Editor (Win - Berbayar)
27. Smultron (Mac - Gratis)
28. EditPlus (Win - Berbayar)
29. EmEditor (Win - Berbayar)
30. PageSpinner (Mac - Berbayar)
31. HateML Pro (Win - Gratis)
32. Adobe HomeSite (Mac Win - Berbayar)
33. NoteTab (Win - Berbayar)
34. jEdit (Java - Gratis)
35. Quanta Plus (Linux - Gratis)
36. Taco HTML Edit (Mac - Berbayar)
37. TSW WebCoder (Win - Berbayar)
38. PhpED (Win - Berbayar)
39. HippoEDIT (Win - Berbayar)
40. VEdit (Win - Berbayar)

Kesimpulan

Dari semua text editor yang sudah dibahas diatas, janganlah sampai mempengaruhi anda dalam menggunakan text editor yang selama ini sudah digunakan. Karena berganti peralatan itu berarti mengambil resiko untuk belajar lagi, kecuali anda memiliki banyak waktu untuk mempelajarinya. Jika anda sudah mantap dengan salah satu text editor diatas walaupun memiliki peringkat dibawah maka tetaplah gunakan text editor tersebut, karena yang ditunggu oleh orang lain adalah karyanya, bukan seberapa hebat text editor dan seberapa mahal text editor tersebut. Sehebat dan semahal apapun text editor yang anda gunakan jika tidak memiliki ilmunya dan tidak menguasai peralatannya tetap tidak akan mampu menghasilkan sesuatu yang berharga. Tetaplah pada jalur anda untuk tetap berkarya, janganlah berganti kebiasaan jika itu menyulitkan anda dalam berkarya. Happy Blogging :)

(X)HTML jQuery Tools