Menonaktifkan Fungsi Copy Paste Pada Area Tertentu

Menonaktifkan Fungsi Copy Paste Pada Area Tertentu - Salah satu hal yang tidak disukai oleh para blogger adalah artikel COPY PASTE, namun bukan artikel hasil copy paste yang akan saya bahas dipertemuan kali ini, melainkan banyaknya keluhan dari mereka, karena salah satu atau beberapa artikel mereka telah dicuri oleh para COPASER yang tidak bertanggung jawab dengan meng-Copy ulang muatan artikel dengan fungsi Copy Paste, dan mendesain sedikit tampilannya yang seolah-olah postingan tersebut adalah hasil karya mereka.
Apakah hal seperti ini harus kita biarkan? (hmm...jawab sendiri ya).

Akan tetapi banyak juga yang berpendapat dengan mengatakan seperti ini:

Buat saya, jika beberapa atau salah satu artikel saya telah ada yang copy paste, saya merasa senang dan bangga, itu berarti tulisan saya menarik buat mereka, mungkin artikel saya bermanfaat baginya, makanya di copy paste.

Namun tidak sedikit juga yang tidak suka jika artikelnya di copy paste, sehingga banyak diantara mereka menonaktifkan fungsi copy paste dengan memanipulasi sistem KLIK KANAN menggunakan perintah javascript seperti ini:

if (typeof document.onselectstart!="undefined") {
   document.onselectstart=new Function ("return false");
}
else{
    document.onmousedown=new Function ("return false");
  document.onmouseup=new Function ("return true");
}

maka semua tampilan postingan Anda tidak akan dapat di Copy Paste.

DESAIN TAMPILAN -
➣ JavaScript Sistem Klik Dan Hover Pada Text Area
➣ Mengetahui Batas Akhir Gulungan Layar Dengan JavaScript
➣ Membuat Tampilan Popular Post Dengan Slideshow



Nah..!! pertanyaannya, bagaimana jika blog tersebut membahas seputar tutorial blog dengan penyajian materi tentang kode-kode HTML seperti CSS, JavaScript, jQuery dan lain sebagainya, yang sudah pasti Anda perintahkan untuk meng-copy kode-kode tersebut untuk ditempatkan pada area tertentu. Dengan cerita inspirasi diatas, kali ini SAHABAT BLOGGER 77 akan memberikan Trik Terbaik tentang Cara Mudah Menonaktifkan Fungsi Copy Paste Pada Area Tertentu, sehingga dengan ini Anda dapat tentukan artikel mana yang akan Anda ijinkan untuk di Copy, dan mana yang tidak di ijinkan dengan CSS berikut:

Temukan kode ]]></b:skin>
Selanjutnya Copy kode berikut, dan letakkan diatasnya.

//* no copy paste consep area with css
css design: inputcode="sb77-nocopy code","sahabat blogger 77"
ex. show : tag pre code
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani
*//
.sb77-nocopy code {
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;}

.sb77-nocopy .sahabatblogger77 {
   background-color: rgba(146,96,91,0.3);
   -webkit-transform: translateX(-800px);
   -moz-transform: translateX(-800px);
   -o-transform: translateX(-800px);
   -ms-transform: translateX(-800px);
   transform: translateX(-800px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;}

.sb77-nocopy:hover .sahabatblogger77 {
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);}

.sb77-nocopy:hover code {
   -webkit-transform: translateX(800px);
   -moz-transform: translateX(800px);
   -o-transform: translateX(800px);
   -ms-transform: translateX(800px);
   transform: translateX(800px);}

.sb77-nocopy:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;}

.sb77-code {
   font:normal 12px/14px Courier,Monospace;
   width:550px;
   overflow: hidden;
   position: relative;
   text-align: left;
   cursor: default;
   background: #333;
   padding:10px 15px;
   color:#ccc;
   border-left:8px solid #080;
   border-top:6px double #fff;
   margin:-6em 0 0 0;}

.sb77-code .sahabatblogger77,.sb77-code .content {
   width: 580px;
   top:0;left:0;right:0;bottom:0;
   position: absolute;
   overflow: hidden;}

.sb77-code h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font: bold 18px/normal Arial, Sans Serif;
   padding: 10px;
   background: rgba(106, 168, 79, 0.7);
   margin: 15px 0 0 0;
   border-top: 2px solid #080;
   border-bottom: 2px solid #080;}

.text-box {
   background:#080;position:relative;
   padding:10px;color:white;
   font:normal 13px Arial,Sans-Serif;
   margin:4em 10px 0 3%;
   border-radius:5px;width:530px;}

.text-box.bottom:after {
   content:"";width:auto;
   overflow:auto;position:absolute;
   top:100%;left:20px;
   border-width:10px;border-style:solid;
   border-color:#080 transparent transparent #080;
   -webkit-transform:skew(-30deg, 0deg);
   -moz-transform:skew(-30deg, 0deg);
   -ms-transform:skew(-30deg, 0deg);
   -o-transform:skew(-30deg, 0deg);
   transform:skew(-30deg, 0deg);display:block;}

.sb77-code a.info {
   font:normal 12px/normal Arial,Sans Serif;
   display: inline-block;
   text-decoration: none;
   padding: 7px;
   background: #000;
   color: #fff;
   margin: 2em 0 -50% 15px;
   border: 2px solid orange;
   text-transform: uppercase;}

.sb77-code a.info:hover {
   -webkit-border-radius:20px;
   -moz-border-radius:20px;
   border-radius:20px;background:red;}

.sb77-profile-1 .sb77-imageprofile {
   display: block;
   width: 120px;
   height: 120px;
   border: 5px solid #2fe45D;
   background: url(URL-Gambar Anda.jpg) no-repeat center center;
   position: relative;
   margin:-12em 0 0 75%;
   box-shadow: inset 1px 1px 4px rgba(225,225,225,0.5),
               0 2px 3px rgba(225,225,225,0.6);}

p {
  color:#fff;
  text-align:right;
  padding-right:10px;
  font:normal 11px/normal Arial,Sans Serif;}

Simpan Template Anda.

Maka hasilnya akan terkonsep seperti ini:




DEMO SHOW


Selanjutnya letakkan kode berikut di wilayah area posting mode HTML

<div class="sb77-code sb77-nocopy">
...
Teks Anda Di Sini
...
   <div class="sahabatblogger77">
      <h2>
        Sahabat blogger 77, Say..
      </h2>
       <div class="text-box bottom">
...
Ucapkan Sesuatu Di Sini
...
<span style="font:bold 15px/normal Arial, Sans Serif;">TOP ARTIKEL</span>
       </div>
     <a class="info" href="#">&#10144; Read More</a>
   <div class="sb77-profile-1">
<div class="sb77-imageprofile">
  </div>
</div>
<p>
Di Desain Oleh ~ Devy Indriyani
My. Site - <a href="http://sahabatblogger77.blogspot.com">SAHABAT BLOGGER 77</a>
</p>
    </div>
</div>