Follow Me

Memunculkan Menu Ketika Blog Di Klik Kanan

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

Disable Klik Kanan Dengan Menampilkan Menu Navigation (Custom Klik Kanan)
  • 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="URl_ANDA">Menu 1</a></li>
<li><a href="URl_ANDA">Menu 2</a></li>
<li><a href="URl_ANDA">Menu 3</a></li>
<li><a href="URl_ANDA">Menu 4</a></li>
</ul>
</div>
 Ganti URl_ANDA dengan Link menu anda
  • Langkah selanjutnya kalian cari kode </head>
Perlu di igat 
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.
Next Post Previous Post
No Comment
Add Comment
comment url