Membuat Icon External Link secara Otomatis dengan jQuery
Beberapa waktu lalu saya membuat artikel mengenai membuat animasi sederhana pada menu dengan jQuery. Salah satu pengunjung bertanya mengenai bagaimana mendeteksi external link (link yang mengarah ke luar situs kita) dan secara otomatis menambahkan icon tertentu, atau mengganti dengan style tertentu.
Yang dimaksud oleh pengunjung tersebut tentunya seperti yang ditunjukkan di situs-situs seperti Wikipedia, dimana jika terdapat link yang mengarah ke selain situs wikipedia, maka di sebelah kanan dari link tersebut akan ditampilkan icon 
. Hal tersebut sangat berguna bagi pengunjung, yaitu sebagai informasi bahwa link berasal dari luar situs utama.
Lalu bagaimana caranya?
Tentunya akan sangat repot jika kita buat secara manual, yaitu setiap kita akan menampilkan external link maka kita sertakan image juga dengan tag <img>. Nah, kali ini kita akan membuatnya secara otomatis dengan bantuan JQuery. Teknik dasarnya adalah dengan cara memfilter link dengan tujuan yang tidak sama dengan alamat dari situs kita. Jika ditemukan, maka tambahkan icon di belakangnya. Kita akan menggunakan fungsi after() dari jQuery untuk menambahkan (insert) perintah HTML di belakang link.
[source language="javascript"]
$(document).ready(function() {
$(‘a’).filter(function() {
return this.hostname &amp;&amp; this.hostname !== location.hostname;
}).after(‘ 
‘);
});
[/source]
Penjelasan:
Perintah jQuery di atas secara umum akan melakukan filter ke semua link yang berada di halaman. Kemudian hostname (value dari atribut href) dalam link tersebut akan dibandingkan dengan hostname dari halaman. Jika tidak sama, maka itu berarti link tersebut merupakan external link (menuju ke halaman yang berbeda dengan halaman), dan selanjutnya dengan fungsi after() ditambahkan perintah HTML untuk menampilkan image (icon) .
Dan dengan sedikit modifikasi kita juga dapat membuat link tersebut terbuka di window baru jika link tersebut merupakan external link. Kita tinggal menambahkan atribut target dengan value “_blank“. Berikut ini contoh sourcenya:
[source language="javascript"]
$(document).ready(function() {
$(‘a’).filter(function() {
return this.hostname &amp;&amp; this.hostname !== location.hostname;
}).after(‘ ‘)
.attr(‘target’, ‘_blank’);
});
[/source]
Semoga bermanfaat
Demo dan Download
- Lihat demo program.
- Download source program.
- Download artikel dalam PDF.
Referensi dan Posting Terkait
- Karl Swedberg, Quick Tip: Dynamically add an icon for external links, 19 Agustus 2008
- Achmad Solichin, Efek Animasi Sederhana pada Menu dengan jQuery, 2 Februari 2009
- Achmad Solichin, JQuery untuk Orang Awam, 20 Januari 2009
Popularity: 39% [?]
Situs yang menyajikan informasi, tutorial praktis dan buku gratis di bidang teknologi informasi, komputer dan internet berbahasa Indonesia secara gratis untuk semua.
February 12th, 2009 at 02:18
Pertamax…he…he…he.. terima kasih atas artikel ini, ternyata ini jawaban dari komentar saya. terima kasih
yaddi’s last blog post..Mengenal Layout
February 12th, 2009 at 02:30
Setelah saya baca dengan seksama, ternyata script ini menambahkan sebuah icon setelah link.menurut saya, alangkah baiknya jika link tersebut diberi background berupa icon atau diberi style berbeda. dengan demikian icon dan linknya merupakan satu bagian.
tapi tidak apa-apa, artikelini sangat bermanfaat, terima kasih banyak. mungkin sebaiknya saya mendownload buku jQuery mas achmad, dan mempelajarinya lebih lanjut.
yaddi’s last blog post..Mengenal Layout
February 12th, 2009 at 05:27
#yaddiyap. saya sengaja menyederhanakan teknik dengan tidak membuat style. dari artikel tersebut, dapat dikembangkan dengan mengganti perintah .after() dengan perintah .addClass(nama-class-css). terima kasih atas komentarnya
February 12th, 2009 at 14:55
wow, JQuery lage….belajar PHP dulu ah, br JQuery. Otak lum kuad…
February 13th, 2009 at 11:13
perlu dipraktekkan nih
cipzto’s last blog post..Build your online shop
February 14th, 2009 at 15:26
sptnya dgn css plus rel=”external” jg bisa ya..cmiiwMarch 11th, 2009 at 01:29
Pak…maaf nih pak keluar dari topik
cuma mau nanya
kami mau upload tugas PASI ke elearning.achmatim.net kok ga bisa ya???
tolong dibantu cara uploadnya
terima kasih
March 29th, 2009 at 01:08
whoah.. lom kesampaian buat belajar ini.. hix hix hix.. T_T .. next time.. hihihi , keren pak! :-bdridhoyp’s last blog post..Kampanye Earth Hour 2009
April 2nd, 2009 at 08:19
oke lah achmatim atau nasi tim nich???rahul’s last blog post..10 Keajaiban Geologis di dunia
May 10th, 2009 at 05:31
sebenarnya ini juga bisa di lakukan dengan css aja koq bang.. hehehe…May 26th, 2009 at 12:54
Mantap pak.. lanjutkannn.. patut dicobi nihJuly 24th, 2009 at 11:41
Makasih infonya. Menarik ni..August 19th, 2009 at 14:56
mantapp pakk.. klo masih sempet dipake buat sidang kkp.. nanti saya pake.. hehe..
ntar klo bapak yg nyidang nilai plus ya pak!!
August 28th, 2009 at 19:59
mantapp pakk.. klo masih sempet dipake buat sidang kkp.. nanti saya pake.. hehe..
;. All the best!!ntar klo bapak yg nyidang nilai plus ya pak!!