Membuat Semua Link Eksternal Terbuka di Window Baru Otomatis (Jquery)

Kita sering memakai fitur membuka link di window gres pada interface link Blogger ketika menciptakan post, atau menambahkan atribut link (hyperlink) target="_blank". Untuk beberapa langkah manual, tentu ini bukan masalah. Tapi bila anda sudah mempunyai banyak link eksternal, baik di bab post maupun bab lain, contohnya widget, footer, dll, tentu pekerjaan edit menjadi hal yang memakan waktu lama. Selain itu, link eksternal yang terbuka di window sama akan meningkatkan bounce rate, sehingga dapat mengurangi banyak penilaian, terutama ranking alexa.

Script ini cukup sederhana, berupa jquery, yang difungsikan untuk melaksanakan cek link eksternal di dalam sebuah halaman website lalu menginjeksikan target="_blank" pada setiap link eksternal yang ditemukan pada halaman tersebut. Kaprikornus bekerjsama script ini tidak hanya bekerja di Blogger, namun dapat di aneka macam platform website/blog, contohnya WordPress (meski anda akan menemui plugin homogen dengan mudah).

Cara Menambahkan Script Pembuka Link Eksternal Otomatis

Cukup ikuti beberapa langkah sederhana ini:

1. Seperti biasanya, bila anda sudah mempunyai jquery source code, abaikan script pada bab pertama dan eksklusif copy script yang kedua. Jika belum, copy keduanya dan letakkan secara berurutan. Jika tidak yakin apakah anda sudah mempunyai jquery source code, cari di dalam template dengan keyword jquery dan lihat apakah sudah mempunyai source code sejenis.

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

 (abaikan script di atas bila 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> (cara mencari kode di template editor Blogger)

4. Letakkan script yang sudah dicopy tepat di atas </head>.

5. Save template and done!

Anda dapat cek link eksternal pada blog yang belum mempunyai atribut target="_blank", atau coba buat link eksternal gres tanpa atribut target. Cek apakah script bekerja.

Catatan Singkat: Bagaimana Script Bekerja & Info Tambahan

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 homogen yang memakai secured connection protocol, contohnya WordPress dan aneka macam platform website yang dihosting sendiri.

Conditional tag (if) dipakai untuk mengajukan persyaratan/cek kedua protocol tersebut, dan bila nilainya sama dengan -1, maka link yang harus dicari (disyaratkan) ialah 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, alasannya ialah value -1 berarti ialah link yang tidak berada di host yang sama (link yang tidak menuju website/blog anda), maka value 1 berarti sebaliknya (nilai positif), yaitu bila 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 gres (meski aku tidak menyarankan), tidak perlu memakai script demikian, cukup gunakan tag base targettting berikut dan letakkan di dalam tag head (sebelum </head>):

<base target="_blank"/>

Simak selengkapnya dalam cara menciptakan link terbuka di window/tab baru.

That's it, and have a nice blogging, fellow brothers and sisters ;)

© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.

Tweet

Subscribe to receive free email updates: