Cara Membuat Link Eksternal Terbuka di Tab Baru - Penyu Biru

Cara Membuat Link Eksternal Terbuka di Tab Baru

Cara Membuat Eksternal link Terbuka di New Tab

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.


Artikel Cara Membuat Link Eksternal Terbuka di Tab Baru Selesai!

Demikian posting Penyu Biru pada kategori Tutorial kali ini. Jika kamu merasa tulisan saya tentang Cara Membuat Link Eksternal Terbuka di Tab Baru ini bermanfaat, mohon kesediaannya untuk meninggalkan komentar atau bagikan artikel ini ke media sosial 🙏

Berlangganan artikel terbaru via email :

Tampilkan Komentar
Sembunyikan Komentar

Belum ada komentar pada "Cara Membuat Link Eksternal Terbuka di Tab Baru"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel