How to Add Custom Stylish Context Menu in Blogger

TIAL WIZARDS

30 Jun, 2022

A+ A-

Hi to all, in this article I am going to tell you all about how to add custom stylish context menu on blogger websites by using HTML and CSS easily in just few minutes.

A context menu is a menu in a GUI that appears upon user interaction, such as a right click mouse operation.

By adding this stylish context menu, you can attract visitors and also you can restrict option based on your website.

You can use this code in any of the blogger template without any error and these codes will not effect your blogger website speed or ranking and also it is responsive.

How to Add Custom Stylish Context Menu on Websites by tial wizards

Read the below steps carefully to get clear understanding about how to add custom stylish context menu on blogger websites and other websites.

Steps to Add Custom Stylish Context Menu on Blogger

Step-1: First of all you need to login to your blogger website dashboard by using your login credentials.

Step-2: Go to blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download theme.

Step-3: Go to blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger Theme editor section.

Step-4: Copy below provided CSS code and paste the copied CSS code above closing head tag or </head> tag.

Step-5: Copy below provided HTML code and paste the copied HTML code below open body tag or <body> tag.

<div class="AT-Contextmenu"> <ul class="menu-list"> <li class="menu-item"><a class="menu-button menu-button--black" href=''><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=''><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=''><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=''><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=''><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>

Step-6: Copy below provided JavaScript code and paste the copied JavaScript code above closing body tag or </body> tag.

Step-7: Finally after adding the three codes, click on save button.

Step-8: Now you have successfully added custom stylish context menu on blogger websites easily in just few minutes, without any error.

Note

If you get any error while saving the theme code, then you need to restore your backup code again and repeat the same process as mentioned in the above steps carefully.

You can change colors and styles of the context menu by changing CSS code and to change colors you need to replace color code and for color codes you can use google color picker.

Conclusion

I hope that you have understood about how to add custom stylish context menu o blogger websites easily in just few minutes by using HTML CSS and JavaScript.

How to Add Custom Stylish Context Menu in Blogger

Steps to Add Custom Stylish Context Menu on Blogger

Note

Conclusion

Subscribe

Oops! No Internet!

Cookies Consent

Steps to Add Custom Stylish Context Menu on Blogger

Note

Conclusion

Subscribe

Follow by Email

Oops! No Internet!

Cookies Consent

Disclaimer

Disclaimer