Cara Membuat Tab Sub Menu Navigasi Ketika Diklik Kanan Responsive Pada Blog

Blogger Sukses IDCara membuat menu saat diklik kanan di blog - Cara menambahkan tab menu pada blog saat diklik kanan pada halaman blog, pada blog pada umumnya saat diklik kanan maka akan tampil tab menu pilihan seperti open link in new tab, open link in new windows dan lain-laink.
cara membuat menu blog responsive

Nah dengan cara yang akan saya bagikan kali ini akan merubah tab menu saat diklik kanam manjadi menu yang bisa kamu atur sendiri ke halaman blog lainya. untuk demo nya kamu bisa klik kanan di halamn ini.

Awal pertama saya menumakan widget ini saya berkunjung ke blog enterblogger (2018) dan pas saat saya mau klik kanan kok malah muncul tab sub menu, saya terheran-heran karena pertama kali saya lihat dan agak tertarik ingin membuatnya.

Dan akhinya saya nyontek scripnya dan membuat tab sub menu navigasi dan muncuk ketik diklik kanan, tapi itu di blog lama saya, dan ini saya baru kepikiran untuk membuat tutorialnya agar teman teman blogger bisa membuatnya di blog kalian sendir.

Cara Menambah Menu Blogger Ketika Diklik Kanan

Langkah Pertama

Seperti biasa sobat login ke blogger dulu.

Langakah Kedua

Pilih menu 'Tema' >> 'Edit HTML' Kemudian letakan kode </body> dibawah tapat diatasnya.

Cara Menambah Menu Blogger Ketika Diklik Kanan


<div class="menuBS">
<ul>
 <li><a href="https://www.Bloggersukses.id">Home</a></li>
 <li><a href="https://www.bloggersukses.id/search/label/blogger">Blogging</a></li>
 <li><a href="https://www.bloggersukses.id/search/label/belajar-seo">SEO</a></li>
 <li><a href="https://www.bloggersukses.id/search/label/google-adsense">Adsense</a></li>
 <li><a href="https://www.bloggersukses.id/search/label/template-blogger">Template</a></li>
</ul>
</div>

Langkah Ketiga

Cari kode </body> dan letakan semua kode dibawah tepat diatanya.


Memunculkan Menu Ketika Blog Di Klik Kanan


<!-- CSS by bloggersukses.id -->
<style type="text/css">
.menuBS { max-width: 250px; color: #fff; position: absolute; z-index: 99; 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; font-family: 'Museo', sans-serif, Arial; text-transform: uppercase; font-size: 12px; } @media only screen and (max-width:300px) { .menuBS { width: 50% } } @media only screen and (min-width:300px) { .menuBS { width: 30% } } .menuBS ul { z-index: 99999999999999999999; list-style: none; padding: 0; margin: 0 } .menuBS ul li { margin: 0; padding: 0 } .menuBS ul li a { padding: 4%; display: block; box-sizing: border-box; text-decoration: none; position: relative; background: #fff; color: #000; -webkit-transition: background-color 500ms linear; -moz-transition: background-color 500ms linear; -o-transition: background-color 500ms linear; -ms-transition: background-color 500ms linear; transition: background-color 500ms linear } .menuBS ul li a:hover { background-color: #475dc5; color: #fff }
</style>
<!-- JavaScript bloggersukses.id -->
<script type="text/javascript">
$(document).ready(function() {
  $("html").on("contextmenu", function(e) {
    e.preventDefault();
    var menuBS = $(".menuBS");
    menuBS.hide();
    var pageX = e.pageX;
    var pageY = e.pageY;
    menuBS.css({
      top: pageY,
      left: pageX
    });
    var mwidth = menuBS.width();
    var mheight = menuBS.height();
    var screenWidth = $(window).width();
    var screenHeight = $(window).height();
    var scrTop = $(window).scrollTop();
    if (pageX + mwidth > screenWidth) {
      menuBS.css({
        left: pageX - mwidth
      });
    }
    if (pageY + mheight > screenHeight + scrTop) {
      menuBS.css({
        top: pageY - mheight
      });
    }
    menuBS.show();
  });
  $("html").on("click", function() {
    $(".menuBS").hide();
  });
});
</script>

Ohya pastikan template blog sobat sudah terpasang jquery library, jika belum silahkan letakan di atas kode </body>


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

Ingat!!! jika template blog sobat sudah terpasang jquery library sobat tidak perlu pasang lagi, cek untuk memastikan.

Langkah Terakhir

Jika sudah semunya sobat tinggal simpan tema dan lihat hasilnya.

Untuk DEMO kamu bisa klik kanan di halaman ini.

Penutup

Menu dan link nya jangan lupa ubah ya sob sesuai keinginan sobat aja. Demikian info tentang Cara Membuat Tab Sub Menu Navigasi Ketika Diklik Kanan Responsive Pada Blog, semoga apa yang saya sharekan bermanfaat bagi banyak orang. Makasih ya sob sudah setia mengikuti tutorial dari bloggersukses.id

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel