Cara Menghilangkan Seleksi Text Pada Website Menggunakan CSS

Seperti yang kita ketahui fungsi dari kita menghilangkan seleksi text ini yaitu supaya isi dari artikel sebuah website tidak dapat di copy dan mencegah plagiat atau plagiarisme. Pada tutorial sebelumnya kita juga telah membuat Cara Menghilangkan Text Menggunakan Javascript, nah pada tutorial kali ini kita akan membuat Cara Menghilangkan Seleksi Text Pada Website Menggunakan CSS, cara nya sedikit berbeda namun fungsi nya hampir sama pada tutorial sebelumnya untuk menghilangkan seleksi pada text.

Pada tutorial Cara Menghilangkan Seleksi Text Pada Website Menggunakan CSS, pada file CSS yang akan kita buat nanti terdapat sebuah perintah yaitu user-select: none; nah perintah ini yang akan kita gunakan untuk menghilangkan seleksi pada text tersebut. Untuk membuat Menghilangkan Seleksi Text Pada Website Menggunakan CSS, pastikan teman-teman telah membuat contoh website sederhana terlebih dahulu untuk menempatkan perintah dari CSS yang akan kita buat nanti, dan jika teman-teman belum memiliki contennya teman-teman bisa simpan script dibawah ini dengan nama index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DUMET School</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
    <header>
        <h1>DUMET School</h1>
    </header>
	
    <menu>
    	<ul>
        	<li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
    </menu>
    
    <article>
    	<h2>Welcome</h2>
    	<div class="articleLeft">
        	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="articleRight">
        	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </article>
	
    <footer>
    	<p>DUMET School | © 2017</p>
    </footer>
</div>
</body>
</html>

Berikutnya kita akan membuat file CSS untuk mengatur layoutnya, silahkan teman-teman simpan script dibawah ini dengan nama style.css

* {padding:0; margin:0}
.container {width:800px; margin:auto}
header {color:#FFFFFF; padding:30px 20px; background-color:#567d9a;}
menu {background-color:#2df068; overflow:hidden}
menu a {text-decoration:none; padding:10px 20px; display:inline-block; transition:ease all 0.3s}
menu a:hover {background-color:#e91e63}
menu ul {list-style:none}
menu ul li {float:left}
article {overflow:hidden; padding:20px; background-color:#c5cae9;color:#333}
.articleLeft {width:370px; float:left}
.articleRight {width:370px; float:right}
footer {color:#FFFFFF; padding:15px 20px; background-color:#567d9a;}

Jika kita buka pada browser maka akan terlihat hasilnya seperti dibawah ini

Pada contoh website diatas text yang terdapat pada website tersebut masih dapat diseleksi dan masih dapat kita copy, kita akan menambahkan sebuah perintah user-select: none; pada CSS sehingga text nya tidak dapat diseleksi, untuk penempatan nya perintah dari CSS tersebut dapat kita gunakan dengan dua cara yang pertama internal CSS kita bisa menempat file CSS tersebut didalam satu file HTML cara nya yaitu teman-teman bisa meletakan script dibawah ini diantara taq <head>…</head>

<style type="text/css">
  body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
</style>

Atau teman-teman juga bisa meletakan script dibawah ini pada file css nya, dengan memanggil class atau tag yang ingin kita berikan style.

  body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

Kemudian silahkan di refresh atau reload website yang telah dibuka sebelumnya maka text yang terdapat pada website tersebut tidak dapat diseleksi.

Oke teman-teman sekian dulu tutorial saya kali ini tentang Cara Menghilangkan Seleksi Text Pada Website Menggunakan CSS, semoga bermanfaat.

Terimakasih.

Cara Menghilangkan Seleksi Text Pada Website Menggunakan CSS

Kategori