Consep area no copy paste image

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:


dashboard blog image


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>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Menonaktifkan Fungsi Copy Paste Pada Area Tertentu
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

19 komentar

  1. kalau artikel dicopas untuk dimuat ulang diblog itu bukan berarti bermanfaat mbk tapi dimanfaatkan, beda lagi kalau dicopas untuk dipelajari / diambil ilmunya itu baru bermanfaat. begitu kira2 menurut saya. hehee

    BalasHapus
    Balasan
    1. hmmm....begitu juga boleh, hehe

      Hapus
  2. Makasih Mbak tipsnya... ini akan sangat berguna untuk mengamankan hak cipta :)

    BalasHapus
  3. Bisa disesuaikan ya area yang ga bisa di copas.
    Memang Kegiatan Copas itu, ada membolehkan (dengan syarat) ada pula yang tidak mngizinkan sama sekali.

    Salam blogger dari Kota Udang. ^_^

    BalasHapus
    Balasan
    1. semuanya kan tergantung si pemilik artikel mas, jika materi seperti ini tidak saya ijinkan untuk di COPY, sudah pasti orang yang ingin mencoba kecewa saat kode-kode diatas tidak bisa dicopas,
      berarti kita sudah kehilangan 1 pelanggan.bukan?

      Hapus
  4. bagus juga nih kodenya,bisa sedikit mengamankan artikel yambak

    BalasHapus
  5. Makasih tipsnya mb, tapi masih bingung soal css nih... :)

    BalasHapus
    Balasan
    1. apa yang dibingungkan mbak,disana sudah saya perjelas fungsinya dengan menempatkan 2 buah objek dalam satu halaman,
      objek yang pertama - adalah teks yang tidak bisa di copy paste,sedangkan yang
      kedua - objek yang dapat di copy, jadi kita bisa sesuaikan halaman mana yang menurut kita tidak diberi ijin untuk dicopy

      Hapus
  6. Wah patut di coba nih, untuk mengamankan hak cipta postingan

    BalasHapus
  7. Keren banget. Selalu ada tip menarik dari "Sahabat Blogger 77", saya suka.
    Untuk saya yang masih belum tahu banyak hal copyright, saya lebih setuju kalau postingan kita bermanfaat bagi orang lain, jadi nggak perlu saya terapkan "Menonaktifkan fungsi copy paste".
    Kalau merasa kita menyalin sebagian dari artikel orang lain, sepatutnyalah ikuti aturan atau etika.
    Aturan : Semua sudah ada aturan (tanya kepada Matt Cutt.
    Etika : Seseorang tanpa punya etika, buat apa blogging??.

    Hehehe,,.. :) dengan copy-paste tanpa aturan dan etika, membuat kita semakin bodoh, bukan sebaliknya.

    Cuma pendapat, boleh beda... (o)
    Terima kasih. cheer

    BalasHapus
    Balasan
    1. setuju mas,itu sebabnya saya buatkan tutorial seperti ini, terkadang ada orang yang tidak suka jika artikelnya di COPAS, tetapi bagaimana jika materi yang diberikan berupa kode-kode seperti ini, sudah pasti untuk di COPY bukan, makanya saya buatkan halaman mana yang BOLEH dan halaman mana YANG TIDAK BOLEH

      Hapus
  8. sangat cocok sekali nih buat blogger yang membahas tentang perkodean, jadi bisa menentukan mana yang diijinkan di copy dan mana yang tidak diijinkan...

    BalasHapus
  9. Kebetulan saya udah pakee hehe dikarenakan banyak sekali para copaser yang mempublish ulang artikel saya sampai" blogg saya yang dulu kena dampratnya traffick turun hingga 70% :/

    BalasHapus
  10. Sebelumnya Salam Blogger Untuk Semua :>)
    Saya Mau Tanya Gimana Cara Mencari ]]>
    TerimaKasih
    Salam Blogger :>)

    BalasHapus
    Balasan
    1. bentangkan terlebih dahulu semua elemen HTML-nya mas,biasanya ada tanda panah hitam disamping nomor baris kode, KLIK panah tersebut (semuanya) lalu tekan CTRL+F, ketikkan kode ]]></b:skin> pada kotak pencarian

      Hapus
  11. Ternyata sedikit agak rumit y mba', tapi walaupun sedikit rumit yang penting blog kita tetap aman.

    BalasHapus
  12. terkadang kode perlindungan ini perlu juga ya mbak dipasang sebagai antisipasi dari para copaser yang tidak bertanggung jawab :D

    BalasHapus
  13. boleh ya aku coba, utk mengetahui artikel hasil copas ada tutorialnya ga,,?

    BalasHapus
  14. Ternyata bisa dipasang di area tertentu toh... Lah blog saya yang udah di proteksi tapi masih tetep aja artikel kampus saya di Copas... sungguh yang ngopas sangat keterlaluan kreatifnya... :o

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK