Memunculkan Sajian Saat Blog Di Klik Kanan

Create custom Right Click Context Menu Using jQuery

Disable Klik Kanan Dan Mengalihfungsikan Dengan Open Menu. Tutorial kali ini kita akan memodifikasi tampilan klik kanan dengan memunculkan sajian navigation yang sudah di sediakan...

Ini sama saja dengan disable klik kanan dengan auto redirect, bedanya pada tutorial ini kita tidak mengalihfungsikan menjadi auto redirect tapi dengan memunculkan sajian bar..

Biasanya saat blog di klik kanan akan muncul Menu Save Page As.., Select All, View Page Source, View Page Info. Nah Kita akan mengganti goresan pena itu dengan mnu yang kita buat..

Tapi bagi kalian yang ingin mengamankan halaman postingan blog sanggup liat di artikel yang sebelumnya sudah aku posting...

Tutorial Blogger Lainnya :

• Disable CTRL + U Dan Klik Kanan Menjadi Auto Redirect

• Cara Agar Blog Tidak Bisa di Copas Kecuali Pada Bagian Tertentu

• Cara Disable Supaya Gambar Tidak Bisa Di Klik Kanan

Nah untuk membut sajian muncul saat blog di klik kanan cukup mudah, kalian tinggal ikuti langkah demi langkah dibawah ini..

Disable Klik Kanan Dengan Menampilkan Menu Navigation (Custom Klik Kanan)

Demo Costom Klik Kanan Pada Blog

• Langkah pertama, kalian login terlebih dahulu ke blogger kalian

• Setelah login, masuk ke sajian Template, Edit HTML

• Selanjutnya cari instruksi </body>

• Setelah Ketemu Masukan Kode Html dibawah ini sempurna diatasnya

 <div class="menuMsTamvan"> <ul>  <li><a href="/">Homepage</a></li>  <li><a href="https://tutorialcarapintar.blogspot.com/"></a></li>  <li><a href="https://mastamvan.blogspot.co.id/p/sitemap.html">Daftar Isi</a></li>  <li><a href="#">MenuMsTamvan 4</a></li>  <li><a href="#">MenuMsTamvan 5</a></li> </ul> </div> 

• Langkah selanjutnya kalian cari instruksi </head>

Perlu Di Ingat

Script Dibawh ini akan bekerja jikalau dii template kalian sudah terdapat jquery librarynya

Jika Belum ada, silahkan masukan terlebih dahulu script dibawah ini sempurna di atas instruksi </head>

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

• Selanjutnya kalian masukan sript dibawah ini sempurna di atas instruksi </head>

 <!-- CSS --> <style type='text/css'> .menuMsTamvan{max-width:250px;color:#fff;position:absolute;z-index:999999;display:none;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);border-radius:3px;overflow:hidden} @media only screen and (max-width:300px){.menuMsTamvan{width:50%}} @media only screen and (min-width:300px){.menuMsTamvan{width:30%}} .menuMsTamvan ul{list-style:none;padding:0;margin:0} .menuMsTamvan ul li{margin:0;padding:0} .menuMsTamvan ul li a{padding:6%;display:block;box-sizing:border-box;text-decoration:none;position:relative;background-color:#F04D44;color:#fff;-webkit-transition:background-color 1000ms linear;-moz-transition:background-color 1000ms linear;-o-transition:background-color 1000ms linear;-ms-transition:background-color 1000ms linear;transition:background-color 1000ms linear} .menuMsTamvan ul li a:hover{background-color:#F7BA4B;color:#444343} </style>  <!-- JavaScript--> <script type="text/javascript"> $(document).ready(function() {   $("html").on("contextmenu", function(e) {     e.preventDefault();     var menuMsTamvan = $(".menuMsTamvan");     menuMsTamvan.hide();     var pageX = e.pageX;     var pageY = e.pageY;     menuMsTamvan.css({       top: pageY,       left: pageX     });     var mwidth = menuMsTamvan.width();     var mheight = menuMsTamvan.height();     var screenWidth = $(window).width();     var screenHeight = $(window).height();     var scrTop = $(window).scrollTop();     if (pageX + mwidth > screenWidth) {       menuMsTamvan.css({         left: pageX - mwidth       });     }     if (pageY + mheight > screenHeight + scrTop) {       menuMsTamvan.css({         top: pageY - mheight       });     }     menuMsTamvan.show();   });   $("html").on("click", function() {     $(".menuMsTamvan").hide();   }); }); </script> 

• Kalo sudah, kalian tinggal save templatenya and done

• Kalian juga sanggup mengaktifkan klik kanan tersebut hanya di bab tertentu, tinggal rubah goresan pena html dengan pembungkus / id tag html kalian.

Cukup sekian artikel wacana cara disable klik kanan / Building a Custom Right-Click (Context) Menu with jQuery ini supaya bermanfaat..

Apabila ada yang tidak di mengerti silahkan bertanya di kolom komentar :)