Anti Right Click Image for Blogger

Iseng dari pada tidak ada postingan ;)) Come from Create a Right Click Function to Save Website Logo Using jQuery go there for look demo and tutorial. Jadi ketika mengklik kanan mouse pada gambar logo yang berada di header, akan muncul peringatan gito sob :D Beben Koben modifikasi, agar setiap klik kanan pada image yang berada pd tagging post template akan muncul kayak gituan juga :)) Bisa dijadikan trick agar image tidak dicuri ;)) Karena plugins maka pada template sobat sudah harus punya jQuery script. Kalau sudah ada jangan dipasang lagi, memberatkan itu namanya :D

Karena sudah dimodifikasi, Koben hanya mengambil script seperlunya saja. Maaf kalau salah, krn bukan ahlinya :">

Structure Jquery Right Click

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
 $('.post img').bind('contextmenu',function(e) {
  // check if right button is clicked
  if(e.button === 2) {
   showPressModal();
   e.preventDefault();
  }
 });
 
 $('#shadow, .close').live('click', function() {
  hidePressModal();
 });
 
 $('a[rel="external"]').click( function() {
     window.open( $(this).attr('href') );
     return false;
 });
});

var logos = '<h2>Mau Maling Gambar yaaa?<span class="close">X</span></h2>';
logos += '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsHWmmEpUngBw7DwgpbrSNZfC0qrYPP6DeqY7h8uRvRuhcpFZjnBKeaBTOX7gRmjSwd9PV8fSACdONfswpqJsuEar2YYgn1k3PeX7DqI-If_nb3vrkpr23FCMUmcxzsOM3gFEdkFBoR9M/s150/dont-steal.jpg" style="margin:0 auto;display:block" />';

function showPressModal() {
 if($('#shadow').length === 0) {
  $('#outer-wrapper').append('<div id="logo-modal"></div>');
  $('body').prepend('<div id="shadow"></div>');
  $('#logo-modal').hide();
  $('#shadow').hide();
  if(logos !== undefined) {
   $('#logo-modal').append(logos);
   $('#shadow').fadeIn();
   $('#logo-modal').slideDown();
  }
 }
}

function hidePressModal() {
 $('#shadow').fadeOut(400, function() {
  $(this).remove();
 });
 $('#logo-modal').slideUp(400, function() {
  $(this).remove();
 });
}
//]]>
</script>

Yang perlu sobat perhatikan yaitu kode .post img dan #outer-wrapper
Kedua coded tersebut merupakan bagian post & image template blogger. Bila unik ID berbeda maka tinggal ganti saja kode tersebut!

Kode CSS

#shadow {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 10;
}
#logo-modal {
position: fixed;
background: #FFF;
width: 300px;
padding: 10px;
top: 0;
left: 25%;
z-index: 10;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#logo-modal h2 {
color: #555;
line-height: 25px;
position: relative;
}
#logo-modal h2 span {
position: absolute;
right: 0;
top: 0;
padding: 0px 5px;
background: #C00;
cursor: pointer;
color: #FFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Width, background color tinggal rubah² saja menurut kebutuhan ;)
Customize link ancor, sobat bisa melakukan seperti berikut<a href="#" title="" rel="external">
<img src="http://link-image.png" alt="" />
</a>Dengan membubuhi variabel rel="external" maka akan terbuka new tab windows :)

Demo

Klik kanan pada image yah pakai mouse ;)

Good luck :)
Happy right click image \m/