Tip Melindungi Konten Blog dari para Plagiator

Proyek ini bertujuan untuk melindungi postingan-postingan di blogmu agar tidak mudah disalin oleh para pengunjung. Sekarang coba masuk ke tab Rancangan kemudian pilih Edit HTML. Untuk menonaktifkan fungsi blok dan klik-kanan mouse sebenarnya sangatlah sederhana. Kamu hanya perlu mengganti tag <body> dengan kode ini:

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

Klik Simpan Template kemudian lihat halaman blogmu.

Sekarang coba klik-kanan mousemu, maka tidak akan ada menu apapun yang akan tampil. Coba juga untuk mengeblok tulisan-tulisan di halamanmu. Tidak bisa kan? Begitulah salah satu cara jitu untuk melindungi hasil karyamu di blog. Namun sayangnya, cara ini juga mempunyai sebuah efek samping, yaitu akan membuat kotak penelusuran posting bawaan dari template blogmu menjadi tidak berfungsi. Satu-satunya jalan keluar untuk mengatasi masalah ini mungkin hanya dengan menampilkan kembali navbar blog jika kamu merasa bahwa kotak penelusuran itu sangat penting.

SUMBER :DTE

Menonaktifkan Klik-Kanan Dengan Jquery

Keistimewaan sistem keamanan ini dibandingkan dengan sistem keamanan pencegahan klik-kanan dengan alert adalah sasarannya yang dapat ditentukan sesuka hati. Sistem keamanan ini juga lebih mengandung unsur seni karena saat aksi klik-kanan dilakukan, sebuah tabir/overlay akan muncul untuk menutupi semua halaman:

Dasar Ide

Ide dasar dari pembuatan sistem keamanan ini adalah dari plugin JQuery klik-kanan yang sempat Saya dapatkan dari A Beautiful Site. Caranya sangat sederhana: Cukup dengan menyisipkan plugin tersebut ke dalam proyek, kemudian kita jalankan fungsi .rightClick() untuk menampilkan overlay saat aksi klik-kanan dilakukan:

/*
jQuery Right-Click Plugin
Version 1.01
Cory S.N. LaViska
A Beautiful Site (http://abeautifulsite.net/)
*/
if(jQuery)(function(){$.extend($.fn,{rightClick:function(a){$(this).each(function(){$(this).mousedown(function(b){var c=b;$(this).mouseup(function(){$(this).unbind("mouseup");if(c.button==2){a.call($(this),c);return false}else{return true}})});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseDown:function(a){$(this).each(function(){$(this).mousedown(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseUp:function(a){$(this).each(function(){$(this).mouseup(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},noContext:function(){$(this).each(function(){$(this)[0].oncontextmenu=function(){return false}});return $(this)}})})(jQuery);

// Jalankan fungsi...
$(function() {
    $(document).rightClick(function(e) {
         $('#no-right-click-overlay').show(); //menampilkan overlay saat aksi klik-kanan dilakukan
    });

    $('#no-right-click-overlay').click(function() {
         $(this).fadeOut("fast"); //menghilangkan overlay saat overlay diklik
    });
});

Langkah Selengkapnya

Berikut ini adalah langkah-langkah selengkapnya untuk menciptakan sistem keamanan seperti pada halaman demo:

Pertama-tama pastikan dulu bahwa templatemu sudah dilengkapi dengan JQuery. Jika belum ada, kunjungi halaman ini terlebih dahulu kemudian salin script JQuery-nya saja. Plugin easing tidak diperlukan dalam proyek ini.

Setelah itu salin kode ini kemudian letakkan tepat di bawah JQuery tadi:

<script type='text/javascript'>
/*
jQuery Right-Click Plugin
Version 1.01
Cory S.N. LaViska
A Beautiful Site (http://abeautifulsite.net/)
*/
if(jQuery)(function(){$.extend($.fn,{rightClick:function(a){$(this).each(function(){$(this).mousedown(function(b){var c=b;$(this).mouseup(function(){$(this).unbind("mouseup");if(c.button==2){a.call($(this),c);return false}else{return true}})});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseDown:function(a){$(this).each(function(){$(this).mousedown(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseUp:function(a){$(this).each(function(){$(this).mouseup(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},noContext:function(){$(this).each(function(){$(this)[0].oncontextmenu=function(){return false}});return $(this)}})})(jQuery);

// Jalankan fungsi...
$(function() {
    $(document).rightClick(function(e) {
         $('#no-right-click-overlay').show(); //menampilkan overlay saat aksi klik-kanan dilakukan
    });
    $('#no-right-click-overlay').click(function() {
         $(this).fadeOut("fast"); //menghilangkan overlay saat overlay diklik
    });
});
</script>

Berikutnya letakkan elemen ini tepat di atas tag </body>:

<div id='no-right-click-overlay'>
Teks peringatan di sini...
</div>

Terakhir, Salin kode CSS ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

#no-right-click-overlay {
  background:#000;
  font:bold 30px 'Comic Sans MS',Calibri,Arial,Sans-Serif;
  color:#f10c0c;
  position:fixed !important;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  width:90%;
  height:100%;
  text-align:center;
  padding:5%;
  display:none;
}

Klik Simpan Template.

Lebih Lanjut

Dalam script di atas Saya menerapkan fungsi .rightClick() pada $(document). Itu artinya bahwa Saya akan melarang orang lain melakukan aksi klik-kanan pada semua area dalam dokumen. Namun, jika Anda ingin menonaktifkan klik-kanan pada area/elemen tertentu saja, selektor $(document) bisa Anda ganti dengan selektor lain. Misalnya seperti ini:

$('#terlarang').rightClick(function(e) {

$('#no-right-click-overlay').show();

});

Kode di atas akan melarang orang lain untuk melakukan aksi klik-kanan pada area #terlarang saja, sedangkan untuk area lainnya dapat dikenai aksi klik-kanan

No Live Links - Mencegah Tautan Aktif Masuk ke dalam Komentar

function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for(var i = 0; i < content.length; i++) {
        // Saya menggunakan pengukur berupa tag penutup, karena tag pembuka tidak tegas
        // Tag <a> tidak selalu diawali dengan atribut 'href',
        // sehingga mengecek indeks dengan menuliskan content[i].indexOf('<a href=\"') menjadi kurang akurat
        // Lebih baik gunakan tag penutup sebagai penanda adanya tautan di dalam konten
        if(content[i].innerHTML.indexOf('</a>') !== -1) {
            content[i].innerHTML = "<mark>No live link!!!</mark> Dilarang nyepam di sini!";
            content[i].className = "spammer-detected";
        }
    }
}

// Jalankan fungsi!
// Seleksi elemen induk dengan id='comment-holder' ...
// dan periksa semua konten paragraf di dalamnya!
blockLinks('comment-holder', 'p');

Fungsi sederhana untuk mencegah hadirnya tautan aktif dalam daftar komentar. Cara kerjanya sederhana: JavaScript akan menyeleksi sebuah elemen induk dengan ID tertentu (dalam hal ini: #comment-holder), kemudian akan melihat semua item di dalamnya (dalam hal ini <p>). Jika setidaknya sebuah tautan ditemukan, dengan sekejap ganti semua konten item tersebut dengan suatu pesan pelarangan.

DEMO :

Modifikasi Tampilan dan Teks pada Status Message

Custom Status Message for Blogger — Contoh tampilan *‘status message’* yang sudah dimodifikasi.

Status Message adalah sebuah pesan yang akan muncul di atas posting ketika kita sedang berada di halaman hasil pencarian atau halaman label. Memodifikasi tampilannya mungkin mudah, yaitu dengan cara menimpa CSS bawaan Blogger dengan kode CSS baru yang mengandung pengaturan tampilan yang berbeda seperti ini:

.status-msg-wrap {
  font-size:110%;
  width:90%;
  margin:10px auto;
  position:relative;
}

.status-msg-border {
  border:1px solid #000;
  filter:alpha(opacity=40);
  -moz-opacity:.4;
  opacity:.4;
  width:100%;
  position:relative;
}

.status-msg-bg {
  background-color:#ccc;
  opacity:.8;
  filter:alpha(opacity=30);
  -moz-opacity:.8;
  width:100%;
  position:relative;
  z-index:1;
}

.status-msg-body {
  text-align:center;
  padding:.3em 0;
  width:100%;
  position:absolute;
  z-index:4;
}

.status-msg-hidden {
  visibility:hidden;
  padding:.3em 0;
}

.status-msg-wrap a {
  padding-left:.4em;
  text-decoration:underline;
}

Tapi bagaimana jika kita ingin memodifikasi tulisan di dalamnya?
Untuk melakukan itu, kita mau tidak mau harus menghapus elemen tersebut dan menggantinya dengan markup yang baru seperti ini:

<!-- b:include data='top' name='status-message'/ -->
<b:if cond='data:blog.searchQuery'>
  <b:if cond='data:numPosts != 0'>
    <p class='custom-status-message'>Menampilkan semua entri dengan kata kunci <strong>&amp;#8220;<data:blog.searchQuery/>&amp;#8221;</strong></p>
  <b:else/>
    <p class='custom-status-message-error'>Pencarian entri dengan kata kunci <strong>&amp;#8220;<data:blog.searchQuery/>&amp;#8221;</strong> tidak ditemukan.</p>
  </b:if>
</b:if>
<b:if cond='data:blog.searchLabel'>
  <p class='custom-status-message'>Menampilkan semua entri dengan kategori <strong>&amp;#8220;<data:blog.searchLabel/>&amp;#8221;</strong></p>
</b:if>

Salin kode di atas, kemudian gunakan untuk menggantikan kode yang tampak seperti ini di dalam template (biasanya ada dua):
<b:include data='top' name='status-message'/>
Kemudian tambahkan kode CSS ini di atas ]]></b:skin> atau </style>:

.custom-status-message,
.custom-status-message-error {
  font:normal normal 13px Segoe,"Segoe UI",Calibri,"Helvatica Neue",Arial,Sans-Serif;
  color:white;
  text-shadow:0 -1px 0 rgba(0,0,0,.4);
  padding:7px 14px;
  margin:5px 5px 1.7em;
  background-color:#5A6777;
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
  background-image:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
  background-image:-ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
  background-image:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
  background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
  border:2px solid #404B55;
  border-bottom-color:#212729;
  border-top-color:#8E97A2;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}

.custom-status-message-error {
  background-color:#600;
  border-color:#700 #500 #300;
}

.custom-status-message strong {color:#AADD99}
.custom-status-message-error strong {color:#ff0}

Blog Fras

Monday, January 7, 2013