Begini Cara Membuat Link Eksternal Terbuka di Jquery

Soal yang satu ini, bagi banyak pemula mungkin belum begitu memahami tentang link eksternal, jquery, atau istilah-istilah yang masih asing lainnya, termasuk saya pada awal-awalnya. Padahal, sebenarnya di dalam blogger, kita sering menggunakan fitur membuka link di window baru pada interface link Blogger saat membuat post, atau menambahkan atribut link (hyperlink) target="_blank".

Untuk beberapa langkah manual, tentu ini bukan masalah. Tapi, jika Anda sudah memiliki banyak link eksternal, baik di bagian post maupun bagian lain, misalnya widget, footer, dan lain sebagainya, tentu pekerjaan edit menjadi hal yang memakan waktu lama. Selain itu, link eksternal yang terbuka di window sama akan meningkatkan bounce rate, sehingga bisa mengurangi banyak penilaian, terutama ranking alexa.

Script ini cukup sederhana, berupa jquery, yang difungsikan untuk melakukan cek link eksternal di dalam sebuah halaman website kemudian menginjeksikan target="_blank" pada setiap link eksternal yang ditemukan pada halaman tersebut. Jadi sebenarnya script ini tidak hanya bekerja di Blogger, namun bisa di berbagai platform website/blog, misalnya WordPress, meski anda akan menemui plugin sejenis dengan mudah.

Cara menambahkan script pembuka link eksternal otomatis, cukup ikuti beberapa langkah sederhana ini:

1. Seperti biasanya, jika Anda sudah memiliki jquery source code, abaikan script pada bagian pertama dan langsung copy script yang kedua. Jika belum, copy keduanya dan letakkan secara berurutan. Jika tidak yakin apakah Anda sudah memiliki jquery source code, cari di dalam template dengan keyword jquery dan lihat apakah sudah memiliki source code sejenis atau belum.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

Catatan: Abaikan script di atas jika sudah punya yang sejenis.


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

2. Buka dashboard Blogger > Template > Edit HTML
3. Cari </head>
4. Letakkan script yang sudah di copy tepat di atas </head>.
5. Save template, and done.

Anda bisa cek link eksternal pada blog yang belum memiliki atribut target="_blank", atau coba buat link eksternal baru tanpa atribut target. Cek apakah script bekerja.

Jika Anda memperhatikan script, disitu ada perintah cek dua kali, yaitu pada link berawalan http:// dan https:// (secure connection protocol), artinya script juga bekerja pada host dan link esternal sejenis yang menggunakan secured connection protocol, misalnya WordPress dan berbagai platform website yang di hosting sendiri.

Conditional tag (if) digunakan untuk mengajukan persyaratan/cek kedua protocol tersebut, dan jika nilainya sama dengan -1, maka link yang harus dicari (disyaratkan) adalah link yang tidak berada di dalam host yang sama (bukan link yg menuju website/blog anda), alias bersifat eksternal (External Links).

Setelah link-link sesuai persyaratan ditemukan, maka disisipkan/diinjeksikan atribut target="_blank" [{$(this).attr("target","_blank")}].

Logikanya, karena value -1 berarti adalah link yang tidak berada di host yang sama (link yang tidak menuju website/blog anda), maka value 1 berarti sebaliknya (nilai positif), yaitu jika diubah dari -1 ke 1, maka semua link internal anda akan terbuka di window baru.

Jika anda menginginkan semua link, baik internal maupun eksternal terbuka di window baru (meski saya tidak menyarankan), tidak perlu menggunakan script demikian, cukup gunakan tag base targetting berikut dan letakkan di dalam tag head, tepatnya sebelum </head>:

<base target="_blank"/>

Kemudian save. Selesai!

Sekian artikel dari saya, dan untuk lebih jelasnya langsung tanyakan pada ahli seahli-ahlinya biar lebih faham. Semoga bermanfaat!

Share on Google Plus

About Unknown