Cara Membuat Link Eksternal Terbuka di Tab Baru

Kali ini saya akan membagikan trik cara membuat external link menjadi open in new tab alias menjadikan link keluar atau link eksternal akan terbuka di tab baru jika diklik.

Trik ini sangat sederhana. Kebetulan saya baru pasang untuk blog saya yang lain. Blog tersebut khusus menampilkan berita viral berupa foto dan media lainnya. Karena terhubung oleh safe link, saya bermaksud menambahkan script agar semua link yang keluar dari blog tersebut akan terbuka di tab baru.

Bukan tanpa alasan, link yang terbuka di tab baru akan membuat situs atau blog kamu tidak tertutup oleh link yang dibuka. Rugi dong nanti?

Sebenarnya untuk membuat sebuah link terbuka di tab baru, kamu cukup menambahkan atribut target="_blank" saja di setiap URL atau tautan. Tapi bagaimana kalau jumlah posting atau artikel kamu sudah ratusan atau bahkan ribuan? Tentu sangat melelahkan dan buang waktu jika harus edit satu per satu.

Solusinya adalah dengan memasang script khusus dimana akan membuat semua link, URL, atau tautan ke luar (external link) akan terbuka secara otomatis di tab baru tanpa harus menambahkan atribut target="_blank".

Cara ini sudah saya coba dan work baik pada tampilan desktop atau PC dan versi mobile lewat smartphone. Jadi Aman digunakan.

Cara pasang script open in new tab pada external link

Seperti biasa bukalah dashboard blog kamu lalu masuk ke menu Theme - Edit HTML.

Sekarang tambahkan kode di bawah ini sebelum </body> :

<script type='text/javascript'>
$(document).ready(function() {
$("a[href^='http://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);
$("a[href^='https://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);
});
</script>

Simpan lalu lihat hasilnya.

Jika script di atas tidak jalan, kemungkinan blog atau situs kamu belum terpasang jQuery. Solusinya adalah menambahkan fungsi pemanggilan jQuery melalui javascript.

Caranya, ganti kode di atas menjadi script di bawah ini. Kode diletakkan di tempat yang sama yakni sebelum </body> :

<script async='async' src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$("a[href^='http://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);
$("a[href^='https://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);
});
</script>

Sekarang coba lihat hasilnya. Jika masih tidak berhasil, tuliskan pesan pada kotak komentar yang tersedia di bawah ini.