Memunculkan Menu Ketika Blog Di Klik Kanan
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTpOClJLemTslBDHwmR-yrFaEjAdgOoaW9INkY7TGXTTciipeB2uLYqudUm29laoK4BbUUuRdoTqEBSgThyphenhyphenDMecAHmsUBepFN3IeGBqdd4umiCsETA2B8Iz2mhUQettjo0OXpH_8Rn8cqE/s1600/open-menu-ketika-blog-di-klik-kanan.png)
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>
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.