Efek Menampilkan Menu Ketika di Klik Kanan

Kesempatan kali ini, kita akan memberikan efek pada blog kita, yaitu menampilkan menu ketika di klik kanan. Fungsi dari efek ini yaitu salah satunya untuk menghindari atau meminimalisir terjadinya pencurian artikel. Karena ketika orang lain mengklik kanan pada mouse maka bukan menu pilihan seperti copy, paste save dan lain sebagainya melainkan perintah tersebut akan menampilkan menu yang ada pada blog kita.

Pada dasarnya efek menampilkan menu ini hampir sama dengan mendisable fungsi klik kanan dengan auto redirect, letak perbedaanya yaitu kita tidak mendisable fungsi tersebut melainkan menampilkan menu blog yang kita inginkan.

Cara Menampilkan Menu Ketika di Klik Kanan

1. Silahkan kalian login terlebih dahulu ke akun blogger kalian

2. Setelah itu, masuk pada menu Template > Edit HTML
3. Sebelum kalian mengikuti tutorial ini, pastikan bahwa di template kalian sudah terpasang jQuery versi berapapun, jika belum silahkan kalian tambahkan kode jQuery dibawah ini, tepat berada diatas kode </head>

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

4. Kemudian carilah kode </body> (disaran menggunakan Ctrl+F untuk memudahkan pencarian)

5. Taruhlah kode HTML dibawah ini, tepat berada diatas kode </body>

 
<div class="menuAmirsID">
<ul>
 <li><a href="/">Amirs ID</a></li>
 <li><a href="https://ideseonesia.blogspot.com">Home</a></li>
 <li><a href="https://ideseonesia.blogspot.co.id/p/sitemap_11.html">Sitemap</a></li>
 <li><a href="#">Contact</a></li>
 <li><a href="#">Disclaimer</a></li>
</ul>
</div> 

Ganti tulisan yang berwarna biru dengan link kalian, dan warna putih dengan judul yang kalian inginkan.

6. Setelah itu, tambahkan kode CSS dan JavaScript dibawah ini, tepat berada diatas kode </head>

 
<!-- CSS -->
<style type="text/css">
.menuAmirsID{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){.menuAmirsID{width:50%}}
@media only screen and (min-width:300px){.menuAmirsID{width:30%}}
.menuAmirsID ul{list-style:none;padding:0;margin:0}
.menuAmirsID ul li{margin:0;padding:0}
.menuAmirsID 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}
.menuAmirsID 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 menuAmirsID = $(".menuAmirsID");
    menuAmirsID.hide();
    var pageX = e.pageX;
    var pageY = e.pageY;
    menuAmirsID.css({
      top: pageY,
      left: pageX
    });
    var mwidth = AmirsID.width();
    var mheight = menuAmirsID.height();
    var screenWidth = $(window).width();
    var screenHeight = $(window).height();
    var scrTop = $(window).scrollTop();
    if (pageX + mwidth > screenWidth) {
      menuAmirsID.css({
        left: pageX - mwidth
      });
    }
    if (pageY + mheight > screenHeight + scrTop) {
      menuAmirsID.css({
        top: pageY - mheight
      });
    }
    menuAmirsID.show();
  });
  $("html").on("click", function() {
    $(".menuAmirsID").hide();
  });
});
</script>

7. Selanjutnya klik Save Template dan silahkan lihat hasinya.

Efek menampilkan menu ketika di klik kanan ini juga bisa kalian terapkan pada halaman tertentu yang kalian inginkan, dengan cara ganti kode HTML dengan kode pembungkus atau ID TAG HTML kalian.

Demikianlah tadi tutorial cara membuat Efek Menampilkan Menu Ketika di Klik Kanan. Semoga tutorial ini bermanfaat bagi kita semua, cukup sekian dan terimakasih.