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.


$(document).ready(function() {
$('a').filter(function() {
return this.hostname &amp;amp;amp;&amp;amp;amp; this.hostname !== location.hostname;
}).after(' <img src="images/external.png" alt="external link" />');
});

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:


$(document).ready(function() {
$('a').filter(function() {
return this.hostname &amp;amp;amp;&amp;amp;amp; this.hostname !== location.hostname;
}).after(' <img src="images/external.png" alt="external link" />')
.attr('target', '_blank');
});

Semoga bermanfaat

Demo dan Download

Referensi dan Posting Terkait

Berbagi itu indah...Share on Facebook2Share on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest0Digg this

18 comments

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

    1. #yaddi
      yap. 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

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

  3. mantapp pakk.. klo masih sempet dipake buat sidang kkp.. nanti saya pake.. hehe..
    ntar klo bapak yg nyidang nilai plus ya pak!! 🙂

  4. mantapp pakk.. klo masih sempet dipake buat sidang kkp.. nanti saya pake.. hehe..
    ntar klo bapak yg nyidang nilai plus ya pak!! :-);. All the best!!

  5. saya sudah coba cara diatas dan berhasil untuk file statis HTML. tapi kenapa tidak bisa saya terapkan untuk WordPress? padahal scriptnya sama persis?
    mohon petunjuknya 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *