Home » HTML-CSS Tricks » Cara Membuat Link Terbuka di Window/Tab Baru dan Variasinya

Cara Membuat Link Terbuka di Window/Tab Baru dan Variasinya

Membuat link terbuka di window/tab baru adalah hal penting, yaitu agar visitor tetap memiliki akses terhadap page referral di mana dia menemukan link baru untuk di-klik. Selain itu, bagi pemilik blog/website hal ini juga menguntungkan karena visitor tidak segera meninggalkan halaman blog/website karena adanya window baru yang harus dibuka.

Selain itu, posting artikel yang tengah dibaca oleh visitor juga tidak menghilang tergantikan oleh halaman baru dari link yg di-klik oleh visitor. Visitor tetap dapat membaca artikel hingga selesai sambil melihat referensi link yg terdapat di dalam posting. Sebagai contoh klik link ini. Link yg saya referensikan menuju halaman yg terbuka melalui window baru. Anda masih memiliki halaman ini untuk kembali dilihat dan dibaca.

Berikut tag yang saya gunakan untuk link tersebut:

<a href="http://buka-rahasia.blogspot.com/2011/02/auto-publish-kontenartikel-blog-ke.html" target="_blank">klik link ini</a>

Kode target="_blank" adalah perintah kepada browser untuk membuka link di window baru. Dalam beberapa bentuk lain, ada juga yang menggunakan kode target="blank"atau target='_blank', dan semuanya bekerja alias efeknya sama.

Dasar tag sebagai perintah untuk membuka window baru dari sebuah link adalah target dan target="_self" adalah perintah dasar untuk membuka link di window yang sama. Secara default, halaman-halaman web biasanya telah memiliki perintah ini secara otomatis, sehingga tidak perlu ditambahkan lagi. Kode ini secara khusus digunakan untuk halaman yang memiliki frame-frame.

Jika link di dalam konten/posting anda banyak dan anda ingin agar window/tab baru yang dibuka oleh pengunjung tidak terlalu banyak, anda dapat memberikan kode perintah target="output" di dalam link-link agar terbuka di window baru yang sama (remote window). Sebagai contoh klik link-link di bawah ini:

Ini kode yang dipakai untuk link-link diatas:

<a href="http://buka-rahasia.blogspot.com/2011/06/cara-membuat-list-html-menu-sederhana.html" target="output">Link contoh 1</a>

<a href="http://buka-rahasia.blogspot.com/2011/01/cara-mengubah-warna-teks-comment-di.html" target="output">Link contoh 2</a>

<a href="http://buka-rahasia.blogspot.com/2010/12/8-alasan-mengapa-kita-harus-menggunakan.html" target="output">Link contoh 3</a>

Untuk membuat semua link yang ada di dalam blog/website terbuka di window baru secara otomatis, sisipkan kode <base target='_blank'/> atau <base target="_blank"> diantara <head> dan </head> di dalam template HTML. Ganti _blank dengan output jika ingin semua link di blog/website terbuka di window baru yang sama.

Note:
Untuk edit link di posting, masuk ke edit HTML

Blogger/Blogspot Wordpress

Cara Membuat Link Terbuka di Window/Tab Baru dan Variasinya
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.

<a href="http://buka-rahasia.blogspot.com/2011/01/membuat-link-terbuka-di-windowtab-baru.html">Cara Membuat Link Terbuka di Window/Tab Baru dan Variasinya</a>

55 Comment(s):

RENO-Planet Ultraman™ said...: wah mantap nih caranya. maaf mas mo nanya..gmn caranya klo pengen link yg ada di postingan aja yg "open new tab"?
thx b 4; Saturday, 11 June, 2011
Unknown said...: wah, sayangnya kalo untuk posting/post body, link2 nya tidak bisa dibuka secara otomatis dengan perintah tertentu, bro. karena base target hanya berlaku sebagai perintah general di bagian head saja. jika ingin semua link di posting terbuka di window baru, maka harus menambahkan secara manual dengan menambahkan atribut target pada tag a nya seperti contoh di atas. secara otomatis bisa dilakukan justru pada link2 yang absolut aturannya, misal label, arsip, link list, menu, dll. jika nanti butuh, akan saya bikin posting ttg itu.; Sunday, 12 June, 2011
RENO-Planet Ultraman™ said...: oh gitu.. wah makasih penjelasannya yah sob.
klo ada waktu sudinya mampir ke blog saya.. makasih. :D; Monday, 13 June, 2011
neweby said...: gak bisa gan
malah error

Not Found
Error 404

knapa ya ga please help; Friday, 22 July, 2011
Unknown said...: error 404 ga ada hubungannya dengan open in new tab, kemungkinan anda salah menuliskan url-nya atau tulisan target-nya... silakan dicek lagi y; Friday, 22 July, 2011
like bali said...: trim info nya sangat berguna untuk saya salam like bali; Wednesday, 27 July, 2011
Unknown said...: Thanks buat tutorialnya... kunjungi juga blog saya ya... :) see you!; Saturday, 30 July, 2011
Unknown said...: kalo ingin di window baru langsung, gunakan target="new". okay; Wednesday, 03 August, 2011
Atep said...: Bisa gk dibikin secara otomatis??? Misalkan kita bikin link di posting tanpa atribut apa", tp pngen bs dibk di tab baru..!!! Misal pk script ato gmana.. mohon bantuanynya ea...; Thursday, 18 August, 2011
Unknown said...: kalo pengen semua link terbuka secara otomatis, tinggal pasang aja base target="blank" seperti yg sudah disampaikan caranya d atas. nantinya senua link akan terbuka otomatis di tab baru tanpa menambahkan atribut lagi.; Thursday, 18 August, 2011
AsyArieL Gate said...: mantap bro.......!!; Sunday, 04 December, 2011
All About Information said...: Kalo semua link di blog harus dibuka ke tab baru kyaknya terlalu ribet,, masih mending beberapa link di dalam postingan atau yng penting jangan semua link..

nice info gan :)
tingyu pery much :D; Wednesday, 28 December, 2011
Huzna Souvenir said...: thanks mas atas tutorialnya, sangat berguna buat saya yang masih belajar blog ini; Wednesday, 28 December, 2011
Roddeno said...: Keren,,maksih triknya..jadi open in new tab deh.; Saturday, 28 January, 2012
Anonymous said...: izin copas y, buat blajar2. cz gx bsa online trus. makasi :); Monday, 20 February, 2012
Unknown said...: mungkin agar lebih mudah bisa menggunakan script
<base target="_blank"> dan taruh script tersebut sebelum kode </head>

just share
more tutorial, software, programming, tips dan trik komputer, linux. visit and follow my blog
http://notebase.blogspot.com; Wednesday, 29 February, 2012
Restu Nugroho said...: thank's tipsnya kaka,,,; Saturday, 10 March, 2012
manadoparabola said...: Thank mas..lama ku cari nemu juga trik biar link ke buka di tab ato jendela baru.

salam,
manado-parabola.blogspot.com; Sunday, 11 March, 2012
Barsok Cibay said...: saya masih belum mengerti nie sob cara edit CSS nya langsung di website nya ato gmna gan .,?; Tuesday, 13 March, 2012
Huzna Souvenir said...: akhirnya ketemu juga tutorial ini, sangat bermanfaat bagi pemula seperti saya, thanks atas sharingnya kawan........; Sunday, 25 March, 2012
andi said...: thanks, dicoba; Monday, 02 April, 2012
Info Bisnis said...: Kalau link di sidebar gimana mas bro..?; Tuesday, 24 April, 2012
sugeng wijaya said...: Boleh juga ide nya mas; Wednesday, 16 May, 2012
D.Priyanto said...: mas mau tanya kalo membuka halaman baru tapi kita masih di halaman semula gimana ya? kan biasanya kalo membuka tab baru, maka tab yang aktif kan jadi tab yang baru terbuka, biar tab yang aktif tetep di tab semula bisa ga?; Monday, 21 May, 2012
Syafri waldi said...: gan..,saya mau buat agar beberapa postingan saya muncul dari sub menu yang sudah saya buat..bukan tampil di home...gimana caranya ya...? thanks...; Wednesday, 23 May, 2012
Lampu Led Murah said...: Luar Biasa Mantaf man...; Wednesday, 23 May, 2012
Dickson said...: Thanks for the sharing...
Bermanfaat sekali..; Monday, 28 May, 2012
Simawar Enterprise said...: maaf boss untuk label Featured Posts & Tutorials,yang tulisan tambahannya untuk SEO juga ya?..
Tapi mata ku agak pusing boss.
Salam blogger...blog ini penuh ilmu.
Good luck; Sunday, 03 June, 2012
IDherbal said...: Thx artikelnya sangat membantu saya,,; Wednesday, 20 June, 2012
telaga ngebel said...: mantap kang baru belajar ini saya... tentang link dan label. he'ee terimakasih; Sunday, 24 June, 2012
Mu'jizatillah said...: makasih infonya..^^
sangat bermanfaat..; Monday, 02 July, 2012
el diablo said...: ada 2 tuh HTML-nya sob,yg mana kita pke??; Wednesday, 11 July, 2012
piper comex said...: mantab sekali blog nya...saya banyak belajar dari blog Agan. kami tunggu kunjungan baliknya, terima kasih; Sunday, 29 July, 2012
Lathif Sama said...: Thanks om.. atas tutornya; Wednesday, 01 August, 2012
Maz Free Backlink said...: Makasih tipsnya sob,ane coba praktekan di blogku,berhasil.
Salam.; Monday, 20 August, 2012
pras said...: mkasih gan infonya bermanfaat bgt; Wednesday, 22 August, 2012
Blogger Kalimantan Selatan said...: Makasih banyak ya om,,

Salam kenal,

btw di tutor atas ada sedikiiit keliru tuh kalimatnya ^_^; Thursday, 20 September, 2012
irwan efendi said...: Mudah kok cara buat semua link terbuka pada tab baru, silahkan kunjungi.........; Friday, 21 September, 2012
plasabunda1 said...: Terima kasih ...
Mudah2an bantuan penjelasannya menjadi manfaat bagi yang lainnya yang masih awam seperti kami. Penjelasannya mantap, sehingga saya yang gaptek aja mudah memahaminya...sukses buat anda.; Saturday, 29 September, 2012
bunda said...: terima kasih..
hehe bingung mau menghilangkan otomatis buka ke tab baru..
akhirnya nemu scriptnya juga..; Sunday, 07 October, 2012
PRETY DEWI SISILIA said...: This comment has been removed by the author.; Thursday, 18 October, 2012
Anonymous said...: thank gan, trus klo misalnya di button juga bisa ta gan.... apa pake scrip lain.
cz aq mo gunain pada button tp gak pernah berhasil pake _blank ini.; Tuesday, 23 October, 2012
Unknown said...: terus kalo buka linknya 5 detik setelah itu dan terus mengulang di tab yang baru gman?; Wednesday, 05 December, 2012
Deby Irawan said...: Ini yang saya perlukan. Makasih om,,; Saturday, 05 January, 2013
Warna Warni Wawasan said...: Mas, saya ingin tanya. saya pny kode di html dan ingin disisipi "target" dari imagenya, bagaimana caranya??
ini kode saya:

.twitter {
background-image:url("http://i39.tinypic.com/30w71xi.jpg");
background-repeat:no-repeat;
height:118px;
margin:0 0 12px;
width:635px;
}; Saturday, 04 May, 2013
Unknown said...: Itu CSS. Yang mesti anda beri atribut target adalah html linknya <a ...... target="_blank href=".....; Saturday, 04 May, 2013
Anonymous said...: makasih om postingannya sangat membantu.. :); Tuesday, 22 October, 2013
Candra andika said...: Mantab infonya, langsung ane praktekkan, langsung jadi. Makasih gan...; Thursday, 07 November, 2013
Anonymous said...: thnks gan infonya.. tapi kalo buat open tab di banner refferal bidvertiser kok gak bisa ya??; Friday, 20 December, 2013
Unknown said...: Mkasih mas atas sarannya...
sangat berguna untuk ane yang newbie masalah ginian..

sukses slalu mas :D; Thursday, 26 December, 2013
hizwar said...: makasih master tutorrialnya sangat membantu; Saturday, 30 August, 2014
Sayur walug said...: Mantaaab infonya; Wednesday, 17 September, 2014
Unknown said...: thanks gan, sangat membantu bagi saya yang pemula; Thursday, 15 January, 2015
Unknown said...: Tks gan; Wednesday, 25 February, 2015
La Makkuraga said...: Thanks infonya, sangat membantu. Akhirnya bisa tetep dengerin radio online di web sendiri sambil ngintip link2 favorit... :); Thursday, 30 July, 2015