Cara membuat link sekali klik membuka dua alamat url

Link atau tautan di halaman web secara normal berisi satu alamat url, bahkan ketika diklik pun hanya akan menuju ke satu alamat.

Tapi, pernahkah kamu mendapati sebuah link berisi 2 alamat url?

Contohnya, ketika kamu mengklik satu link di suatu halaman web atau blog, kemudian kamu mendapati browser malah membuka 2 alamat url dan bahkan keduanya menuju ke 2 alamat halaman yang berbeda.

Iya, itu adalah sebuah trik menyisipkan 2 alamat url di satu link atau boleh juga diartikan sebagai menyatukan 2 link dalam 1 link dan keduanya aktif.

Apabila tertarik untuk membuatnya, maka Blogizty akan beritahukan cara beserta penjelasannya karena trik ini terdiri dari berbagai cara yang berbeda tergantung dari tag element yang digunakan sebagai media link.

Sebelumnya, simak terlebih dahulu kelebihan dan kekurangannya supaya kamu memiliki tujuan dalam menggunakannya.

Kelebihannya

• Trik ini dapat membuat link menjadi terlihat sederhana, yang artinya kita tak harus membuat 2 link secara berturut-turut.

• Dapat menyembunyikan link iklan. Itu karena trik ini menggunakan attribute href dan onclick, sehingga apabila kamu ingin menyematkan url iklan maka cukup simpan di tautan kedua yaitu pada attribute onclick.

  Alasannya adalah seperti pada postingan ini : Cara modifikasi link supaya tidak bisa dibuka di tab baru yaitu alamat url yang disematkan di tag a akan muncul ketika link disorot mouse komputer, sebaliknya tidak pada onclick.

Kekurangannya

• Trik ini tidak akan berfungsi dengan baik apabila pengunjung menonaktifkan fitur pop up atau jendela munculan di browser mereka. Itu karena trik ini akan secara otomatis membuka link kedua di tab baru.

• Alamat url yang disisipkan di attribute onclick akan sulit dirayapi oleh robot perayapan mesin pencarian. Maka dari itu, jangan salah dalam hal menempatkannya.

• Beberapa pengunjung blog mungkin tidak menyukai jendela munculan pop up sehingga akan lebih baik untuk tidak terlalu banyak menggunakan trik ini.

Penjelasan di atas merupakan kelebihan dan kekurangan yang paling utama. Selebihnya, kamu akan mendapati hal yang berbeda tergantung dari situasi dan kondisi.

Okay, apabila sudah paham dan berniat untuk menggunakan trik ini maka lihat kode HTML dan cara menggunakannya di bawah ini.

Dua alamat url dalam 1 link pada tag a

Untuk cara penggunaannya, lebih baik pada artikel saja daripada di tempat lain di blog. Jadi ketika kamu membuat artikel dan akan menyisipkan link, maka gunakan trik ini pada penulisan Tampilan HTML.

Link normal

<a href="https://blogizty.blogspot.com">Ini adalah link dengan 1 alamat url</a>

Link modifikasi - 1 link dengan 2 alamat url

Ini akan membuka satu tautan di tab saat ini dan satu tautan lainnya di tab baru.

<a href="https://blogizty.blogspot.com" onclick="window.open('https://google.com/search?q=blogizty')">Ini adalah link dengan 2 alamat url</a>

Sedangkan ini akan membuka satu tautan di tab saat ini, satu tautan lainnya di tab baru, dan satu tautan lainnya lagi di tab baru, sehingga akan terdapat 3 tab yang terbuka.

<a target="_blank" href="https://blogizty.blogspot.com" onclick="window.open('https://google.com/search?q=blogizty')">Ini adalah link dengan 2 alamat url</a>

Contohnya akan menjadi seperti ini :

Ini adalah link dengan 2 alamat url dan akan membuka 3 tab di browser

Dua alamat url dalam 1 link pada tag lain

Berbeda dengan trik yang digunakan pada tag a. Untuk tag lain, attribute yang digunakan adalah onclick dan onmouseup sehingga kedua alamat akan benar-benar tersembunyi dari sorotan mouse komputer, dan ini akan diabaikan oleh robot perayap.

Tak hanya itu, jika pada tag a, warna tulisan link akan mengikuti warna link yang telah diatur pada CSS bawaan template, sedangkan pada tag lain tidak. Sebagai gantinya, warna link akan mengikuti warna teks body atau post-body.

Cursor atau penunjuk ketika link disorot mouse komputer akan menunjukkan nilai default dari tag tersebut yang biasanya adalah text, tidak seperti tag a yang biasanya secara default menunjukkan pointer.

Selain itu, pada tag lain ini hanya bisa membuka maksimal 2 tab saja, tidak seperti pada tag a yang bisa membuka tab hingga maksimal 3.

Blogizty akan berikan contoh penggunaannya pada tag span saja agar lebih mudah dipahami

Link normal

<span onclick="location.href='https://blogizty.blogspot.com'">Ini adalah link dengan 1 alamat url pada tag span</span>

Link modifikasi - 1 link dengan 2 alamat url

<span onclick="location.href='https://blogizty.blogspot.com'" onmouseup="window.open('https://google.com/search?q=blogizty')">Ini adalah link dengan 2 alamat url pada tag span</span>

Contohnya akan menjadi seperti ini :

Ini adalah link dengan 2 alamat url pada tag span dan akan membuka 2 tab di browser

Mengatur warna teks dan cursor link pada tag lain

Tampak dengan jelas seperti ditunjukkan pada contoh di atas bahwa jika link disematkan pada tag selain a dengan menggunakan Mouse Event, maka warna teks akan mengikuti warna body atau post-body.

Bahkan ketika disorot oleh mouse komputer, cursor tidak akan menunjukkan pointer. Sehingga ini akan membingungkan pengunjung dalam membedakan apakah itu link atau hanya teks biasa karena paragraf sama sekali tidak menunjukkan bahwa itu merupakan sebuah link.

Untuk itu, kita perlu melakukan sedikit pengaturan melalui CSS dengan terlebih dahulu menambahkan attribute class pada tag tersebut dengan nama mylink.

<span class="mylink" onclick="location.href='https://blogizty.blogspot.com'" onmouseup="window.open('https://google.com/search?q=blogizty')">Ini adalah link dengan 2 alamat url pada tag span</span>

Setelah itu, kita atur CSS untuk selector mylink.

.mylink {color:#cc0000;cursor:pointer}
.mylink:hover,.mylink:focus {color:#ff0000}

Hasilnya akan menjadi seperti ini :

Ini adalah link dengan 2 alamat url pada tag span dan akan membuka 2 tab di browser

Atau boleh juga menggunakan teknik inline seperti di bawah ini karena hasilnya sama saja, hanya ini termasuk syntax yang buruk.

<span class="mylink" style="color:#cc0000;cursor:pointer" onmouseover="this.style.color='#ff0000'"  onmouseleave="this.style.color='#cc0000'" onclick="location.href='https://blogizty.blogspot.com'" onmouseup="window.open('https://google.com/search?q=blogizty')">Ini adalah link dengan 2 alamat url pada tag span dan akan membuka 2 tab di browser</span>

Semoga dapat dipahami

©Blogizty