Cara Membuat Menu Bar Responsive Ketika Di Klik Kanan

komputerdia.com - Menu bar after right click atau menu bar setelah klik kanan merupakan salah satu fitur yang bisa kalian gunakan untuk membuat menu bar atau menu navigasi yang ditempatkan pada bagian klik kanan mouse.

Selain fitur unik, cara ini juga bisa dijadikan alternatif yang bagus untuk kalian yang ingin mengaktifkan konten " Anti Copy Paste" pada konten artikelnya. Cara pembuatan menu ini sendiri, apda dasarnya tidak jauh berbeda dengan pembuatan menu navigasi lainnya, dibawah ini adalah langkah-langkah yang bisa kalian ikuti.

Baca Juga :

Cara Membuat Menu Bar Responsive Ketika Di Klik Kanan

Langkah - Langkah Pembuatan

  • Pertama kalian silahkan login ke akun blogger
  • Masuk ke menu template dan klik tombol edit html .
  • Cari kode </head> dan tempatkan kode berikut ini tepat atas kode </head> .
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<!-- 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>
  • Jika diblog kalian sudah terdapat kode berwarna Merah seperti diatas, maka kode tersebut jangan kalian pasang lagi
  • Selanjutnya kalian cari kode </body>, dan tempelkan kode dibawah ini tepat diatas kode </body> tersebut.
<div class="menuMsTamvan">
<ul>
 <li><a href="/"><b>Homepage</b></a></li>
 <li><a href="http://www.komputerdia.com/"><b>Beranda<b></a></li>
 <li><a href="http://www.komputerdia.com/p/tut.html"><b>Tutorial Blogger</b></a></li>
 <li><a href="#"><b>Hardware</b></a></li>
 <li><a href="#"><b>Networking</b></a></li>
</ul>
</div>
  • Jika semua pengaturan telah kalian lakukan, langkah terakhir silahkan kalian tekan tombol simpan / save .
  • Lihat hasilnya
  • Semoga bermanfaat untuk kalian semuanya

Sumber Referensi : https://mastamvan.blogspot.co.id/
.
.

Berlangganan Artikel terbaru (free):

Post a Comment