How To Add Stylish Context Menu in Blogger Website

Hello Everybody, Welcome back in my Blog. Today in this post I am going to share a tutorial on How To Add Stylish Context Menu in Blogger Website. This Stylish Context Menu is made with the help of HTML, CSS and JS. When a user right click on your website then this stylish context menu will open like google Chrome Context menu.

Hello friends, when you open a webpage in any browser, then when you right click there, a context menu opens. If you want to add your custom context menu instead of the default context menu of the browser, then this article will be very helpful for you.

You can use This Context Menu in your website when anyone make a right click then show a popup menu where many links show. Now I am going to show How to add it in your blogger website. Let's get started.

How To Add Custom Context Menu in Blogger Website:-

Step 1 :- First of All You need to Login with Your Blogger Account.

Step 2 :- Then Click on Theme Menu.

Step 3 :- After this Click on Edit Html.

Step 4 :- Then Copy The Code provided below and paste it above the </head> tag.

<style>
.TJ-Contextmenu { display: none; position: absolute; width: 250px; margin: 0; padding: 0; background: #FFFFFF; border-radius: 5px; list-style: none; box-shadow: 0 15px 35px rgba(50, 50, 90, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); overflow: hidden; z-index: 999999; } .menu-list { margin: 0; display: block; width: 100%; padding: 8px;color:inherit;text-decoration:none; } .menu-list + .menu-list { border-top: 1px solid #ddd; } .menu-item { position: relative; color:inherit; } .menu-button { font: inherit; border: 0;color: inherit!important; padding: 8px 8px; padding-right: 36px; width: 100%; border-radius: 8px; display: flex; align-items: center; position: relative; background-color: #fff; } .menu-button:hover { background-color:#f1f3f7;text-decoration:none; } .menu-button svg { width: 20px; height: 20px; margin-right: 10px; fill:#222; }
</style>

Step 5 :- Then copy the Given HTML code and place the code under the <body> tag.

<div class="TJ-Contextmenu">
          <ul class="menu-list">
      <li class="menu-item"><a class="menu-button menu-button--black" href='https://www.insurancefinances.com/'><svg viewBox="0 0 24 24">
    <path d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z" />
</svg>Watch Our videos</a></li>
      <li class="menu-item"><a class="menu-button menu-button--black" href='https://www.insurancefinances.com/'><svg viewBox="0 0 24 24">
<path d="M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z"></path>
</svg>Join Our Telegram Group</a></li>
    </ul>
    
      <ul class="menu-list">
      <li class="menu-item"><a class="menu-button menu-button--black" href='https://www.insurancefinances.com/'><svg viewBox="0 0 24 24">
    <path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" />
</svg>Share</a></li>
      <li class="menu-item"><a class="menu-button" href='https://www.insurancefinances.com/'><svg viewBox="0 0 24 24">
    <path d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z" />
</svg>Download</a></li>
    </ul>
   
      <ul class="menu-list">
      <li class="menu-item"><a class="menu-button menu-button--black" href='https://www.insurancefinances.com/'><svg viewBox="0 0 24 24">
    <path d="M13.5,4A1.5,1.5 0 0,0 12,5.5A1.5,1.5 0 0,0 13.5,7A1.5,1.5 0 0,0 15,5.5A1.5,1.5 0 0,0 13.5,4M13.14,8.77C11.95,8.87 8.7,11.46 8.7,11.46C8.5,11.61 8.56,11.6 8.72,11.88C8.88,12.15 8.86,12.17 9.05,12.04C9.25,11.91 9.58,11.7 10.13,11.36C12.25,10 10.47,13.14 9.56,18.43C9.2,21.05 11.56,19.7 12.17,19.3C12.77,18.91 14.38,17.8 14.54,17.69C14.76,17.54 14.6,17.42 14.43,17.17C14.31,17 14.19,17.12 14.19,17.12C13.54,17.55 12.35,18.45 12.19,17.88C12,17.31 13.22,13.4 13.89,10.71C14,10.07 14.3,8.67 13.14,8.77Z" />
</svg>About Us</a></li>
    </ul>
  </div>

Note :- After Putting this code, please replace marked links with your own links.

Step 6 :- Now copy the Given JS code and paste it above the </body> tag.


<script>
//<![CDTJA[
$(document).ready(function(){ $(document).bind('contextmenu', function(event){ $(".TJ-Contextmenu").css({"top": event.pageY + "px", "left": event.pageX + "px"}).show(); event.preventDefault(); }); $(document).bind('click', function(){ $(".TJ-Contextmenu").hide(); }) });
//]]>
</script>

Step 7 :- Now Do not Forget to click on save button. Finished.

Conclusion :-

Well thats great tutorial on How To Add Stylish Context Menu in Blogger Website. I hope you liked it. If you have face any problems regarding this post you can put up your valuable comments. Thanks.

Refrence:
Anutrickz