Blok Ads Block dengan jQuery

Bismillah. Alhamdulillah. Lama sudah blog ini tidak diisi dengan artikel baru, dan hari ini mudah-mudahan bisa konsisten untuk menulis artikel tip trik baru seputar dunia blog dan jQuery. Tanpa basa basi dan panjang lebar mengenai kevakuman penulis dalam menulis artikel diblog ini, kita langsung saja ke materi sesuai dengan judul artikel diatas. Sebenarnya, artikel ini merupakan versi lain dari jQuery Anti Ads Block yang pernah ditulis sebelumnya. Script yang digunakan pada artikel kali ini merupakan asli buatan Martin Angelov, dan penulis hanya melakukan perubahan kecil sebagai adaptasi dan sebagai penyempurnaan saja pada beberapa baris script yang ada dialamnya. jQuery Block Ads Block kali ini sangat sederhana dalam penggunaannya pada blog, berbeda dengan versi sebelumnya yang termasuk agak sulit untuk diterapkan, bahkan beberapa pengelola blog yang tidak hati-hati justru mengalami kegagalan 100% tanpa discount.

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.

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.

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...

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.

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.

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?

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.

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.

jQuery Decoder - Alamat Email

Bismillah. Alhamdulillah. Diantara sekian banyak profesi didunia maya, ada diantaranya yang bekerja untuk mengumpulkan alamat email dari berbagai halaman situs web. Profesi ini memang masih menjadi kontroversi karena sebagian para pengumpul alamat email ini tidak peduli kepada siapa mereka kemudian menjual sekumpulan alamat email yang sudah diperolehnya. Ketika sebuah perusahaan memperoleh sekumpulan alamat email ini, biasanya mereka gunakan untuk mengirimkan informasi tentang suatu produk yang mereka buat. Namun bagaimana kalau sekumpulan alamat email ini diterima oleh orang-orang yang berniat jahat, misal dengan mengirimkan email berupa informasi palsu untuk memancing target, kemudian target tergiur dengan iming-iming sejumlah uang, dan ujung-ujungnya tertipu. Apapun tujuannya, jika ada diantaranya yang memperkenalkan suatu produk atau informasi yang tidak melalui persetujuan pemilik email, maka hal ini sudah termasuk tindakan spamming. Kita sebagai blogger juga punya cara untuk meminimalisir spamming dan memperkecil pencurian alamat email oleh orang yang tidak bertanggung jawab, yaitu dengan metode encode alamat email.

Tambahkan target="_blank" Link Eksternal dengan jQuery

Artikel kali ini akan membahas tentang script jQuery yang sederhana saja. Maklum sedang dihinggapi rasa malas membuat demo yang cukup kompleks dan lagi sedang mempelajari Repository GitHub, karena rencananya kedepan untuk arsip-arsip artikel yang dibuat akan di simpan sebagian pada GitHub dengan tujuan memancing minat orang lain untuk ikut mengembangkannya dan memperbaiki kesalahan-kesalahan yang ada. Script jQuery kali ini mengenai cara menambahkan attribut target="_blank" pada setiap tag anchor link yang mengarah pada situs eksternal. Karena kadang kita cukup repot jika harus selalu menambahkan attribut target="_blank" pada tautan-tautan yang diarahkan pada situs diluar URL situs kita sendiri. Biasanya karena terlalu banyaknya tautan situs luar kita lupa menambahkan attribut target="_blank". Daripada repot-repot harus selalu menambahkan attribut target="_blank" maka kita buat semuanya menjadi otomatis melalui bantuan jQuery. jQuery akan melakukan penyaringan terhadap tautan yang mengarah keluar dan kemudian menambahkan attribut target="_blank" pada setiap tag anchor eksteral. Perpustakaan jQuery yang akan digunakan adalah .not(). Perpustakaan ini termasuk pada kategori perpustakaan penyaring (filter) dan pelintas (traversing).

jQuery Confirm Plugin

Pada artikel sebelumnya Blogger Tune-Up pernah membahas tentang Konfirmasi Klik Link dengan jQuery, namun tampilan kotak dialog konfirmasi tampak klasik, sehingga terasa kurang menarik untuk digunakan. Nah, artikel kali ini kita akan menggunakan plugin jQuery dan CSS untuk mengubah tampilan kotak dialog konfirmasi agar tampil lebih menarik. Plugin untuk pengganti kotak dialog konfirmasi ini sebenarnya di tulis oleh TutorialZine, saya hanya melakukan modifikasi kecil pada bagian centering elemen. Pada script plugin aslinya, memposisikan elemen agar tepat berada di tengah halaman masih menggunakan CSS, kemudian saya sisipkan jQuery Centering Elemen agar posisi elemen kotak dialog tepat berada ditengah secara otomatis tanpa pengaturan melalui CSS-nya. Hanya sebuah perubahan kecil... (Untuk mempelajarinya, lebih baik unduh terlebih dahulu paket jQuery Confirm Plugin)

jQuery Image Fader

Mari berkreasi lagi dengan script jQuery. Kali ini kita akan bermain-main dengan efek smooth fade (memudar) pada image. Efek jQuery ini bisa digunakan untuk berbagai keperluan, bisa untuk header, icon atau bagian-bagian lainnya yang berbasis gambar. Ketika kita menelusuri dunia maya, mungkin ada diantara sahabat blogger yang menemukan sebuah header atau icon dengan efek lembut ketika mouse hover. Animasi yang ditampilkan sangat lembut, seakan-akan gambar mengalami perubahan komposisi baik itu warnanya, bentuknya atau latarnya. Perubahan komposisi ini tidak tampak layaknya pergantian gambar slide namun gambar tampak benar-benar mengalami perubahan pada dirinya sendiri. Padahal, sebenarnya gambar tersebut memang diganti dengan gambar lain namun dengan proses pergantian yang sangat lembut (smooth), efek perubahan ini sering di sebut dengan efek fade pada jQuery (efek memudar ini selanjutnya kita sebut fade saja).

Konfirmasi Klik Link dengan jQuery

Fungsi ini ditulis ketika saya sedang mencoba mengembangkan sebuah plugin konfirmasi saat pengguna mengklik sebuah link. Berbagai metode sudah di coba namun hasilnya tetap saja tidak sesuai harapan. Ketika seorang pengguna mengklik salah satu link pada suatu halam website maka sebuah kotak dialog konfirmasi akan muncul untuk memastikan bahwa pengguna benar-benar ingin mengetahui isi dari link tersebut. Hal ini memang sederhana, namun saya tidak ingin menggunakan kode dari JavaSript murni, saya ingin melibatkan framework jQuery untuk membuat kotak dialog konfirmasi. Sedangkan sampai hari ini jQuery belum punya fungsi .confirm() pada perpustakaannya. Memang ada beberapa fungsi jQuery yang telah dikembangkan, namun link yang akan di tuju harus sudah didefiniskan di awal agar pengguna mengunjungi halaman yang tepat. Sedangkan saya tidak ingin mengdefinisikan link-nya terlebih dahulu, sederhananya kita tidak perlu tahu dan tidak perlu mendefiniskan dulu mana link yang akan dituju. Kita hanya perlu menentukan identitas link tanpa perlu menuliskan secara utuh link tersebut.

jQuery Fixed Floating Element

jQuery Fixed Floating Element biasanya digunakan untuk mengatur posisi elemen atau widget agar selalu dalam posisi tetap walau halaman di scroll ke atas atau ke bawah. Pada beberapa kasus, biasanya digunakan untuk sidebar, menu navigasi, tombol share, footer atau bahkan header. Hal ini dimanfaatkan oleh para blogger untuk memfokuskan sesuatu agar perhatian pembaca tertuju pada isi elemen atau widget tersebut. Sebenarnya cara ini telah banyak dibahas oleh para blogger, ada yang menggunakan CSS murni namun tidak sedikit juga yang menggunakan perpaduan CSS dan jQuery. Pada artikel kali ini kita akan mencoba memanipulasi elemen menggunakan jQuery.

jQuery Centering Elemen Vertikal Horisontal

Artikel kali ini akan membahas tentang cara memposisikan suatu elemen agar berada tepat di tengah halaman secara seimbang baik secara vertikal maupun horisontal menggunakan jQuery. Selain itu kita akan membandingkan antara centering elemen menggunakan CSS murni dengan centering elemen menggunakan jQuery. Setelah dipahami silahkan memilih mana cara yang terbaik untuk memposisikan suatu elemen pada bagian tengah halaman. Cara ini biasanya digunakan untuk menampilkan popout baik yang berisi gambar, peringatan atau pun iklan.

jQuery Image Preloader

jQuery Image Preloader di perkenalkan oleh Abhin Sharma pada situs net tuts+ dan merupakan salah satu plugin yang banyak digunakan pada situs-situs profesional. Berbeda dengan jQuery Lazyload yang pernah dibahas disini dan versi update disini. Jika di tilik dari fungsinya, sebenarnya plugin ini hanyalah tambahan untuk mempercantik penampilan gambar. Plugin jQuery Image Preloader berfungsi untuk memberikan efek delay (lambat) pada saat proses pemanggilan (load) gambar pada halaman situs, selama pemanggilan gambar belum sempurna maka lokasi gambar tersebut akan di gantikan dengan animasi loading. Setelah gambar tersebut siap ditampilkan (load 100%), animasi loading akan di sembunyikan dan gambar akan ditampilkan dengan efek fade yang lembut. Plugin ini akan memberikan kesan profesional pada blog dan menunjukan kepada pengunjung bahwa bagian yang terkecil sekalipun sangat diperhatikan sang pemilik blog. Bagaimana cara memanfaatkan plugin ini?

jQuery Author Threaded Comments Highlight

Setelah Blogger menambahkan fasilitas Threaded Comments, sangat sulit untuk membedakan antara komentar pengunjung dengan komentar author (penulis). Hal ini terjadi karena terjadi perubahan struktur dan kode yang digunakan antara komentar versi klasik dengan komentar versi threaded, namun bukan berarti tidak ada cara. Setelah Blogger Tune-Up meneliti kode-kode yang digunakan pada komentar versi threaded baik itu kode HTML maupun kode CSS-nya, maka cara-cara lama yang mengandalkan kode CSS sudah tidak bisa digunakan. Cara terbaik yang ditemukan Blogger Tune-Up adalah dengan melibatkan jQuery untuk memberikan sentuhan berbeda antara komentar pengunjung dengan komentar penulis/author, baik perbedaan warna latar, warna tulisan atau menambahkan background gambar. Mari kita telusuri...

Menggunakan jQuery .on() dan .off()

Pada tanggal 3 November 2011, jQuery merilis versi 1.7^[1] dengan menambahkan dua cara baru untuk menyisipkan penanganan event (event handler) .on() dan .off(). Ini mungkin saja bukan perubahan besar bagi jQuery untuk sebuah rilis baru, namun hal ini merupakan hal yang tetap menarik untuk dibahas. Dua penanganan event tersebut merupakan hal terbaik untuk menyatukan beberapa penangan event yang akan membantu kita dalam menulis kode jQuery yang lebih rapi dan efisien kedepannya.

Progress Animation - jQuery Image Rotator

Blogger Tune-Up beberapa hari ini disibukan dengan pekerjaan yang menurut orang lain mungkin biasa-biasa saja tapi bagi penulis sangatlah sulit. Penulis sedang mengotak-atik kode template Blogger versi HTML5 untuk membuat template index video yang diambil dari YouTube, Vimeo dan MetaCafe namun karena nyubi akhirnya pusing sendiri. Disaat stress tingkat benua ini kemudian hiburan dengan berkunjung pada beberapa situs, sedang asyik-asyiknya berselancar tiba-tiba laptop kesayangan tertutup jendela perangkat lunak yang tidak dikenali, dan perangkat lunak ini bernama Trojan.