Kartu Link (Link Card)
Agar mengerti maksud link card atau kartu tautan ini, silahkan scroll ke bagian bawah postingan ini dan arahkan kursor dibagian link sebelumnya/selanjutnya. Perhatikan, bahwa link tersebut meliputi seluruh body elemen (container-nya). Jadi untuk mengklik tautannya tidak harus tepat pada teks nya. Itulah yang dimaksud dengan Kartu tautan (link card)
Cara membuat kartu tautan
Untuk membuat link card hanya dibutuhkan 2 elemen utama yaitu :
1. Kontainer luar atau body link.
2. Link.
Jadi komponen utamanya hanya 2 elemen itu saja. Sehingga jika didalam body masih terdapat lapisan elemen lainnya tidak menjadi masalah. Kuncinya berada di body / kontainer terluar dan link nya.
Script kartu link
Agar seluruh body / kontainer link dapat di-klik dibagian manapun selama masih dalam body-nya gunakan script dibawah ini.
var cards = document.querySelectorAll(".classBody");
for (var i=0; i<cards.length; i++) {
cards[i].addEventListener('click', function(e) {
var link = this.querySelector(".classLink");
link.click();
}, false);
}Copy script tersebut dan letakkan diatas tag </body>. Sebelumnya copy-paste dulu tag script-nya dibawah ini jika belum ada
<script>//<![CDATA[
//paste script tersebut disini.
//]]></script>Agar scriptnya bisa mengeksekusi target dengan tepat, berikan atribut class pada body dan link-nya.
Dibawah ini contoh kode HTML link card yang sesuai dengan class yang ada di script
<div class='classBody'>
<a href='https://url-tautan.html'>Teks Tautan</a>
</div>
<style>
.classBody {
width: 200px;
padding: 20px;
margin:10px auto;
text-align: center;
border: 1px solid #ddd;
border-radius: 10px;
transition: linear 0.4s;
cursor:pointer;
}
.classBody a{
display: block
}
.classBody:hover{background:rgb(0 0 0 / 20%);box-shadow: 1px 2px 3px #eee;}
</style>Hasilnya akan seperti ini :