komputerdia.com - Menu kafe after right click atau hidangan kafe sesudah klik kanan merupakan salah satu fitur yang sanggup kalian gunakan untuk menciptakan hidangan kafe atau hidangan navigasi yang ditempatkan pada bab klik kanan mouse.
Selain fitur unik, cara ini juga sanggup dijadikan alternatif yang manis untuk kalian yang ingin mengaktifkan konten " Anti Copy Paste" pada konten artikelnya. Cara pembuatan hidangan ini sendiri, apda dasarnya tidak jauh berbeda dengan pembuatan hidangan navigasi lainnya, dibawah ini yaitu langkah-langkah yang sanggup kalian ikuti.
Baca Juga :
- Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog .
- Cara Membuat Menu Bar Responsive Blogger Tanpa Edit Html .
- Cara Membuat Menu Navigasi Simple Dropdown Di Blog .
- Cara Membuat Menu Bar Responsive Dengan Tambahan Efek .
Langkah - Langkah Pembuatan
- Pertama kalian silahkan login ke akun blogger
- Masuk ke hidangan template dan klik tombol edit html .
- Cari instruksi </head> dan tempatkan instruksi berikut ini sempurna atas instruksi </head> .
<script type="text/j4vascript" 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/j4vascript"> $(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 instruksi berwarna Merah seperti diatas, maka instruksi tersebut jangan kalian pasang lagi
- Selanjutnya kalian cari instruksi </body>, dan tempelkan instruksi dibawah ini sempurna diatas instruksi </body> tersebut.
<div class="menuMsTamvan"> <ul> <li><a href="/"><b>Homepage</b></a></li> <li><a href="aciknadzirah.blogspot.com/"><b>Beranda<b></a></li> <li><a href="aciknadzirah.blogspot.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/