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

otomatis buka link eksternal di window baru!
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, dll, 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.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
 (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> (cara mencari kode di template editor Blogger)

4. Letakkan script yang sudah dicopy 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.

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 sejenis yang menggunakan secured connection protocol, misalnya WordPress dan berbagai platform website yang dihosting 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 targettting berikut dan letakkan di dalam tag head (sebelum </head>):
<base target="_blank"/>
Simak selengkapnya dalam cara membuat 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.

Membuat Semua Link Eksternal Terbuka di Window Baru Otomatis (Jquery)
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 16 Comment(s):

Admin said...

Mkasih info link eksternal terbuka di window barunya Mas, langsung diterapkan nch, karena kadang lupa waktu membuat link pada edit post untuk mencentang terbuka di window barunya..

Khairunnisa Ast said...

Wah, berguna banget nih. Khusus untuk link eksternal.

Unknown said...

dengan cara ini pengunjung akan tetap berada di bog kita meskipun membuka link lain :D

Unknown said...

artikel tutorial yang menarik nih

you said...

Kalo untuk diarea tertentu gimana ya..

Unknown said...

@All: thanks and selamat mencoba

@wahyu: butuh penambahan conditional tag (if dan else) yang cukup rumit, ke depan akan saya share kalo sudah sempat meramunya, hehe

Unknown said...

menyimak gan, nanti dipraktekkan di blog saya

Hamba Allah said...

Terima kasih infonya gan . . praktek dulu yaah!

Anonymous said...

terimakasih tutorialnya, saya kopi script nya, ya, nanti saya coba , semoga berhasil, makasiiih

Unknown said...

Infonya keren!, tapi kapan-kapan aja praktekinnya :p

Kunjungi kembali yah :)

Kang Mousir said...

cuman pakai jquery doang, mungkin bisa dipakai class/id biar munculnya di area tertentu

Almamater Jakarta said...

ilmu baru nih, thanks gan share nya :D

Bima A. said...

Thank gan sudah saya gunakan berguna banget untuk external link agar link blog kita tetap di tab pertama :D

Agung Ngurah said...

Tidak disarankan untuk link internal dibuka pada window baru apa ada pengaruhnya pada alexa dan bounce rate Mas Ahmad Khoirul Azmi ? Terima kasih atas tutorial barunya.

Unknown said...

Bukan, bukan masalah alexa atau bounce rate, tapi semua link internal yang terbuka di window baru aka melelahkan user dan bikin bingung karena semua seperti itu, misalnya link di menu, sebaiknya terbuka di window yang sama, kecuali beberapa link.

Anonymous said...

theks sob atas infonya dan ilmunya,

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap