logo blog

Memunculkan Menu Ketika Blog Di Klik Kanan

Memunculkan Menu Ketika Blog Di Klik Kanan

Create custom Right Click Context Menu Using jQuery

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 menu 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 menu bar..

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

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



Nah untuk membut menu muncul ketika 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 menu Template, Edit HTML
  • Selanjutnya cari kode </body>
  • Setelah Ketemu Masukan Kode Html dibawah ini tepat diatasnya
  • 
    <div class="menuMsTamvan">
    <ul>
     <li><a href="/">Homepage</a></li>
     <li><a href="https://mastamvan.blogspot.com">Mas Tamvan</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 kode </head>
    Perlu Di Ingat

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

    Jika Belum ada, silahkan masukan terlebih dahulu script dibawah ini tepat di atas kode </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 tepat di atas kode </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 bisa mengaktifkan klik kanan tersebut hanya di bagian tertentu, tinggal rubah tulisan html dengan pembungkus / id tag html kalian.

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

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

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Memunculkan Menu Ketika Blog Di Klik Kanan. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Memunculkan Menu Ketika Blog Di Klik Kanan. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

4 comments

Space Nesia

Mantap Gan (y)
https://2.bp.blogspot.com/-OTm3ckUmnKA/WLsEguDSK0I/AAAAAAAAAMs/KifqVi-keU0ZogrQijtS76I7fcVBij6CwCLcB/s640/1.png

Mas Tamvan

Wkwkwk iya gan, keren juga stylenya item (y)

iril sagita

Masih belum bisa ni kak aku terapkan di blog aku,
Susah kalo soal script, jadi pusing.....


Admin : www.sagita-sky.net

Mas Tamvan

Bingung di bagian mananya gan?

Saya menunggu komentar anda..

Kalo ada yang error mohon kasih tau admin, supaya bisa secepatnya untuk diperbaiki..

Komentar dengan link promo akan masuk spam.

Gunakan kode <i rel="image">URL GAMBAR DI SINI</i> untuk menyertakan gambar di komentar.Show Konversi Kode Hide Konversi Kode Show Emoticon Hide Emoticon