Cara Menghilangkan Seleksi Text Pada Website Menggunakan CSS
Seperti yang kita ketahui guna dari kita menghilangkan seleksi text ini yaitu supaya isi dari artikel sebuah blog tak dapat di copy dan mencegah plagiat atau plagiarisme. Di panduan sebelumnya kita pun telah merancang Cara Menghilangkan Text Menggunakan Javascript, nah di panduan kali ini kita akan merancang Cara Menghilangkan Seleksi Text Di Blog Menggunakan CSS, cara nya sedikit berbeda namun guna nya hampir sama di panduan sebelumnya bagi menghilangkan seleksi di text.
Di panduan Cara Menghilangkan Seleksi Text Di Blog Menggunakan CSS, di file CSS yang akan kita bikin nanti terdapat sebuah petunjuk yaitu user-select: none; nah petunjuk ini yang akan kita gunakan bagi menghilangkan seleksi di text tersebut. Bagi merancang Menghilangkan Seleksi Text Di Blog Menggunakan CSS, pastikan teman-teman telah merancang contoh blog sederhana terlebih dahulu bagi menempatkan petunjuk dari CSS yang akan kita bikin nanti, dan bila teman-teman belum mempunyai contennya teman-teman dapat simpan script dibawah ini dengan nama index.html
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Source Code Aplikasi</title>
<link href=style.css rel=stylesheet type=text/css/>
</head>
<body>
<div class=container>
<header>
<h1>Source Code Aplikasi</h1>
</header>
<fitur>
<ul>
<li><a href=#>Home</a></li>
<li><a href=#>About Us</a></li>
</ul>
</fitur>
<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 sistem aplikasi 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 sistem aplikasi like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</article>
<footer>
<p>Source Code Aplikasi | © 2017</p>
</footer>
</div>
</body>
</html>
Berikutnya kita akan merancang file CSS bagi 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;}
fitur {background-color:#2df068; overflow:hidden}
fitur a {text-decoration:none; padding:10px 20px; display:inline-block; transition:ease all 0.3s}
fitur a:hover {background-color:#e91e63}
fitur ul {list-style:none}
fitur 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;}
Seandainya kita buka di browser karenanya akan terlihat hasilnya seperti dibawah ini
Di contoh blog diatas text yang terdapat di blog tersebut masih dapat diseleksi dan masih dapat kita copy, kita akan menambahkan sebuah petunjuk user-select: none; di CSS sehingga text nya tak dapat diseleksi, bagi penempatan nya petunjuk dari CSS tersebut dapat kita gunakan dengan dua cara yang pertama-tama internal CSS kita dapat menempat file CSS tersebut didalam satu file HTML cara nya yaitu teman-teman dapat 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 pun dapat meletakan script dibawah ini di 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 blog yang telah dibuka sebelumnya karenanya text yang terdapat di blog tersebut tak dapat diseleksi.
Oke teman-teman demikian dulu panduan saya kali ini mengenai Cara Menghilangkan Seleksi Text Di Blog Menggunakan CSS, semoga bermanfaat.
Terimakasih.
Sumber https://kursuswebsite.org
