02 August 2023

Memahami Tata Cara Mendisable Tautan Link dengan CSS

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Memahami Tata Cara Mendisable Tautan Link dengan CSS
DISABLE tautan link dengan CSS adalah memberikan link ke arah website yang tentu saja tidak ada URLnya atau sudah tidak aktif. Dikala kita membuat sebuah artikel, kita bisa memberikan rekomendasi ke website yang bersangkutan dengan sebuah link, dan link itu tidak aktif. Tidak selamanya sebuah link (tautan) di artikel tersedia untuk dapat diklik.

Memang terkadang, ketika membuat artikel tutorial, kita mesti menulis contoh alamat web (URL) semisal, dan kita mungkin akan menulis URL yang tidak sebenarnya atau URL palsu (URL yang mengarah ke laman web yang tidak ada). Kita tentu tidak berharap visitor mengklik URL itu. URL web palsu hanya dimaksudkan untuk memberi kejelasan terkait artikel tutorial yang telah kita buat.



Dan ketika kita menggunakan sebuah CMS website dan kemudian mengetik URL palsu, maka keadaanya adalah web browser akan menampilkan (rendering, red) sebagai link aktif. Bila URL palsu diklik, laman web dari url palsu tidak akan ditemukan dan dianggap sebagai link rusak. Dari sisi SEO, bila kita mempunyai banyak link rusak, maka akan memberi dampak buruk pada website karena tentu saja itu akan menurunkan ranking web kita di Search Engine Google.

Supaya para visitor tidak dapat mengklik link itu, maka kita bisa mendisable / menonaktifkan link (tautan) dengan CSS. Didalam bahasa pemrograman CSS, kita menggunakan property pointer-events dengan nilai none. Property CSS pointer-events digunakan untuk menentukan apakah elemen di laman web harus merespon pada event klik atau tidak. Dengan nilai none, elemen di laman web tidak merespon event klik.



Dibawah ini adalah salah satu contoh kode sederhana cara menonaktifkan link (tautan) dengan CSS :

<!DOCTYPE html> 
<html> 
<head> 
<title>Mendisable Link dengan CSS</title> 
<style type="text/css"> 
   .link-tidak-aktif { 
      pointer-events: none; 
      cursor: default;
   }
</style> 
</head> 
<body>

<h2>www.alifacode.com</h2>

<p>Contoh sederhana dari Tutorial ini adalah : <a href="www.alifacode.com" class="link-tidak-aktif">alifacode.com</a> adalah sebuah web tentang Tutorial BLog yang Unik dan Gampang Dipahami. Silakan kunjungi artikel yang ada pada kami dan praktekkan.</p>

</body> 
</html>


Berikut adalah rendering menggunakan browser Mozilla Firefox :



Catatan :
Link alifacode.com tidak bisa diklik ke URL-nya.


Lanjutan dari kemarin cukup membuat kita tambah ilmu khan teman-teman. Memang ada kalanya jika sudah terasa bosan dengan melihat berbagai kode yang ada di depan mata kita. Rehat dulu sejenak. Luangkan waktu untuk refreshing, sehingga otak kita akan cukup istirahat dan nanti atau besok siap untuk menyerap ilmu baru. Seandainya tidak diistirahatkan, bagaimana coba? malah bisa jadi otak kita akan menjadi blank atau kosong dan akan sulit mencerna dan menyerap satu ilmu khasanah baru.

Dalam ungkapan pujangga termashur, "Ada dua tipe orang di dunia ini. Mereka yang mempunyai mimpi besar, dan mereka yang bangun untuk mewujudkannya." Gapailah cita-cita setinggi langit. Hadapi masa depan dengan bekal ilmu yang bermanfaat. Niscaya kalian akan memperoleh upah yang setimpal. Lakukan semua mimpi terbaikmu menjadi realita kehidupanmu. Semangat yuk. Salam Blogger.

Bagikan ke teman-teman kamu
Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Memahami Tata Cara Mendisable Tautan Link dengan CSS . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon