Entri yang Diunggulkan

Program Trial 90 Hari Affinity Ada Lagi

Tampilkan postingan dengan label Tutorial jQuery. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial jQuery. Tampilkan semua postingan
12 Mei 2014

Cara Modifikasi Mailto untuk Menghindari Spammer

12 Mei 2014  Iskandar Dzulkarnain  2 komentar
Biasanya banyak pemilik website secara terang-terangan menuliskan alamat email-nya. Namun, tahukah kamu bahwa dengan cara tersebut sangat membuka peluang untuk dimanfaatkan oleh spammer. Entah menggunakan mesin apa, spammer ini bisa meng-grab seluruh alamat email yang ditulis secara gamblang.

Beberapa orang sadar akan bahaya ini lalu menuliskannya dengan agak bervariasi, namun tetap membuat orang awam paham. Berikut ini adalah salah satu contoh penulisannya: hai [at] iskael [dot] com. Dengan cara seperti itu, setidaknya memberikan tindakan penanggulangan dari spammer.

Baca juga: Jasa Pembuatan Email Kustom

Masalahnya tidak berhenti di sana, ada kasus bagaimana apabila alamat email itu diletakkan dalam sebuah ikon. Tentu saja hal yang harus dilakukan adalah dengan memberikan kode mailto:mail@domain.com. Nah, ini juga merupakan celah yang harus ditutup. Hal inilah yang membuat saya berpikir bagaimana cara modifikasi mailto untuk menghindari penyalahgunaan oleh spammer.

Cara Modifikasi Mailto untuk Menghindari Spammer

Berikut ini adalah kode yang saya buat untuk memodifikasi mailto. Saya menggunakan jQuery untuk mempermudah memahami bagaimana cara kerjanya. Silakan kamu klik tab Result untuk menikmati fungsinya.

$('a').click(function(){
  $('a').attr('href','mailto:hai@iskael.com');
});
See the Pen ugCAn by Iskandar Dzulkarnain (@iskael) on CodePen.

Tampilan Popup Setelah Mengeklik (Firefox)

Ketika diklik, maka secara otomatis akan menambahkan atribut href bernilai mailto alamat email saya. Namun ketika tidak diklik, maka nilai dari atribut href adalah #. Hal ini setidaknya mengelabui mesin grab karena hanya pengeklik natural yang bisa tahu alamat emailnya. Mudah, 'kan? Selamat mencoba :)
Selengkapnya
6 Jan 2014

Tip Agar Blog Tidak Dicopas

6 Jan 2014  Iskandar Dzulkarnain  25 komentar
Bosan dengan blog yang selalu dicopas orang lain? Tentu saja ini adalah hal yang menyebalkan. Sudah susah menulis dengan baik, dengan menghabiskan sekitar waktu satu jam lebih, ternyata berakhir dicopas dengan orang lain. Memilukan memang.

Nah, kali ini Iskael berbagi tip tentang cara agar tulisan blog kita tidak dicopas oleh orang lain. Hanya dengan menambahkan beberapa kode JavaScript, hal itu selesai. Memang hal ini tidak 100% membuat blog kita aman dari tindakan pencopasan, namun ini tetap lumayan ampuh untuk membuat copaser pemula kapok. Jal ini terbukti dengan banyaknya copaser yang mengeluh tidak bisa copas konten blog ini.

Demo Konten yang Tidak Bisa Dicopas

Normalnya, browser pasti mengaktifkan JavaScript. Jika tidak, maka secara otomatis pengunjung tersebut tidak akan bisa komentar di blog dengan mesin Blogger. Nah, sisi inilah yang Iskael manfaatkan untuk menanggulangi copaser yang nakal. Berikut ini adalah demonya.

See the Pen Labhk by Iskandar Dzulkarnain (@iskael) on CodePen

Coba kamu klik kanan di bagian yang berwarna putih. Ada peringatan, kan? Coba klik di area yang abu-abu. Tidak terjadi apa-apa. Begitulah caranya agar membuat script anti-copas tersebut tertarget pada area tertentu.

Script Anti-copas

Jika kamu ingin menggunakannya juga, salin kode yang berada di tab "HTML" CodePen di atas. Salin bagian:

<!-- Awal Script Anti-copas -->
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'>
    </script>
    <script>
      $(document).ready(function(){
        $('.entry-content').bind('contextmenu cut copy paste',function(e){
          alert('Hayooo ... mau ngapain? :P');
          e.preventDefault();
          window.clipboardData.clearData();
        });
      });
    </script>
<!-- Akhir Script Anti-copas -->


Lalu tempel di template Blogger-mu sebelum kode </head>. Mudah bukan? Silakan mencoba :)

Tip: hilangkan kode "alert('Hayooo ... mau ngapain? :P');" untuk menghindari browser memblokir JavaScript karena dua kali alert.

Update: Cara Sederhana Anti-copas dengan JavaScript

Setelah saya berburu cara yang paling efektif adalah dengan menambahkan sedikit kode JavaScript di bagian <body>. Berikut ini adalah kodenya:

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

Dengan kode di atas, secara otomatis akan men-disable seluruh isi konten (body) untuk disalin, ditempel, maupun klik kanan. Misalkan kamu ingin membatasi bagian yang tidak bisa disalin, letakkan kode tersebut bukan di <body>, namun di tag tujuan kamu.
Selengkapnya
19 Sep 2013

Cara Mudah Membuat Spoiler Kaskus dengan jQuery

19 Sep 2013  Iskandar Dzulkarnain  16 komentar
Penggunaan spoiler pada thread di forum sangatlah lumrah. Biasanya kamu jumpai di Kaskus atau forum lainnya. Kali ini saya membuat tiruan spoiler yang ada di Kaskus dengan sedikit gaya Iskael. Ternyata membuat spoiler seperti yang ada di Kaskus tidaklah sulit. Cukup dengan sedikit pengetahuan tentang cara menggunakan jQuery, kamu juga bisa membuat spoiler dengan gaya kamu sendiri. Penasaran bukan dengan spoiler ala Kaskus bikinanku? Berikut ulasannya.


Spoiler ala Kaskus dengan jQuery

Seperti biasanya, coding saya lakukan di CodePen agar kamu mudah mengunduh maupun memanipulasinya. Kamu bisa melihat spoiler ala Kaskus bikinan saya di bawah ini. Klik "show" untuk mengeluarkan isi dari spoiler. Klik "hide" untuk menyembunyikannya kembali.

See the Pen mvtwG by Iskandar Dzulkarnain (@iskael) on CodePen

Mudah bukan? Kamu juga bisa membuatnya. Jangan lupa untuk menautkan pustaka jQuery untuk menjalankan kode jQuery yang dibutuhkan untuk membuat spoiler ini. Jika kamu masih bingung bagaimana cara menautkannya, kamu bisa membaca entri Iskael sebelumnya yang membahas mengenai masalah ini.
Selengkapnya
20 Agu 2013

Cara Menampilkan/ Menyembunyikan DIV dengan jQuery

20 Agu 2013  Iskandar Dzulkarnain  6 komentar
Terkadang dalam membuat situs, kamu akan menjumpai kasus di mana kamu ingin menyembunyikan sebuah DIV atau elemen HTML lainnya, lalu dengan mengeklik sebuah tombol, DIV yang tersembunyi itu muncul; atau sebaliknya. Teknologi CSS (hingga CSS3) untuk menangani hal ini tidak bisa, kecuali dimanipulasi sedemikian rupa. Itu adalah hal yang menyulitkan dan tidak efisien.

Hal yang paling lumrah dilakukan oleh web developer saat ini untuk menangani kasus ini adalah dengan menggunakan jQuery. Mengapa menggunakan jQuery? Bukankah dengan JavaScript biasa sudah bisa? Betul, dengan JavaScript biasa saja sudah mampu untuk menampilkan/menyembunyikan sebuah DIV. Hanya saja, kamu akan menemukan kesulitan nantinya jika banyak bagian di situs yang kamu bangun menggunakan fitur tampil/sembunyi ini.

jQuery memang datang dengan banyak kemudahan. Hampir sebagian besar situs yang ada saat ini, pasti menggunakan jQuery; entah itu jQuery, jQuery UI, maupun jQuery Mobile. Hingga saat ini, jQuery sudah sampai versi 1.10.2. Kamu bisa mengeceknya langsung di situs jQuery.com.

Cara Memasang jQuery

Cara memasang jQuery layaknya memasang JavaScript. Kamu hanya perlu memasang tautan ke jQuery yang kamu sediakan untuk situsmu. Biasanya jQuery langsung diambil dari situs resminya. Misalkan di bawah ini adalah tatanan kode situsmu, taruhlah jQuery di dalam tag HTML <head>. Berikut contohnya:

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

... isi body ...

</body>
</html>


Mudah bukan? Setelah itu hal yang perlu dilakukan adalah menggunakan jQuery dengan tepat.

Cara Menggunakan jQuery

Biasanya dalam menggunakan jQuery dimulai dengan <script> dan diakhiri dengan </script>. Untuk kasus kali ini, aku akan membuat DIV sederhana untuk mendemonstrasikan bagaimana cara menampilkan/menyembunyikan DIV dengan jQuery. Berikut ini adalah demo yang aku buat menggunakan editor online CodePen.

See the Pen pLBrJ by Iskandar Dzulkarnain (@iskael) on CodePen


Bagaimana mudah bukan? Berikut adalah penjelasan singkat mengenai demo yang aku buat.

.click()

Ini digunakan untuk event click. Apabila kamu mengeklik sebuah DIV lalu melakukan sebuah event, gunakan .click() ini.

.hide()

Ini digunakan untuk menyembunyikan element HTML.

.show()

Ini digunakan untuk menampilkan element HTML yang tersembunyi sebelumnya.

.toggle()

Ini digunakan untuk membalik keadaan. Misalkan dari sembunyi ke tampil, atau sebaliknya.

slow

Parameter slow digunakan untuk memberikan animasi pada transisi .hide() dan .show().

Mudah bukan? Semua akan terasa mudah jika kamu langsung mempraktikkannya :)

Bonus: Menampilkan/Menyembunyikan DIV menggunakan Slide

Berbeda dengan sebelumnya, kali ini aku mendemokan menggunakan slide, yaitu: slideUp (hide), slideDown(show), dan slideToggle(toggle).

See the Pen wHtmn by Iskandar Dzulkarnain (@iskael) on CodePen
Selengkapnya