Donate - Buy me a Coffe Donate!

Hướng dẫn Custom Menu Chuột Phải cho Blogger

Hướng dẫn custom lại click chuột phải trên blog nhìn cực xịn 2022 mà không cần biết code vẫn có thể là được

Hí anh em! Nếu bạn không muốn người khác Click chuột phải trên Blog của bạn một cách tùy tiện để thục hiện các mục đích khác thì bạn nên xem bài viết này nhé.

Bài viết này mình sẽ ướng dẫn các bạn cách để Custom lại menu chuột phải nhìn cực chuyên nghiệp cho Blogger nhé!

custom menu right mouse for blogger

Giới thiệu về Menu chuột phải sau khi Custom

Khi chưa thực hiện thì khi bạn click chuột phải một menu mặc định của trình duyệt sẽ hiện lên như hình bên dưới!

menu chuot phai mac dinh
Menu chuột phải mặc định

Còn nếu bạn custom theo bài viết này thì menu chuột phải sẽ trở nên như thế này:

menu chuot phai custom
Menu chuột phải custom

Bạn có thể xem Demo qua link bên dưới nhé.

Hướng dẫn Custom menu chuột phải cho Blogger

Các bước thực hiện:

Bạn nên sao lưu chủ đề trước khi thực hiện để tránh sai xót nhé!

Bước 1. Vào Blogger trước nhé!

Bước 2. Bạn chọn Bố cục rồi sau đó thêm tiện ích HTML/Javascript ở vị trí nào bạn muốn nhé (Nên để ở side-widget nhé) rồi sau đó dán đoạn HTML sau vào nhé!


    <!--[ code custom right mouse by CODETHINK ]-->
<div class='context-menu-wrapper'>
<div class='context-menu-content'>
<ul class='menu'>
<li class='item'>
<i class='fa-solid fa-eye'></i>
<a href='#'>
<span>Preview</span>
</a>
</li>
<li class='item share'>
<div>
<i class='fa-solid fa-share'></i>
<span>Share</span>
</div>
<ul class='share-menu'>
<li class='item'>
<i class='fa-brands fa-twitter'></i>
<a href='#'>
<span>Twitter</span>
</a>
</li>
<li class='item'>
<i class='fa-brands fa-instagram'></i>
<a href='#'>
<span>Instagram</span>
</a>
</li>
<li class='item'>
<i class='fa-solid fa-basketball'></i>
<a href='#'>
<span>Dribble</span>
</a>
</li>
<li class='item'>
<i class='fa-brands fa-telegram'></i>
<a href='#'>
<span>Telegram</span>
</a>
</li>
</ul>
</li>
<li class='item'>
<i class='fa-solid fa-link'></i>
<a href='#'>
<span>Get Link</span>
</a>
</li>
<li class='item'>
<i class='fa-solid fa-pen-to-square'></i>
<a href='#'>
<span>Rename</span>
</a>
</li>
<li class='item'>
<i class='fa-solid fa-trash-can'></i>
<span>Ẩn</span>
</li>
</ul>
</div>
</div>
   

Bạn có thể chỉnh sửa liên kết tại các vị trí mình để # nhé!

Bước 3. Vào Chủ đề >> Chỉnh sửa HTML

Bước 4. Tìm thẻ /*]]>*/</style> và dán đoạn CSS sau bên trên nó


      /* css custom menu right mouse by CODETHINK */
.context-menu-wrapper{visibility:hidden;position:absolute;width:300px;border-radius:4px;background:#fff;box-shadow:0 12px 35px rgba(0,0,0,0.1);z-index:9999999999999}
.context-menu-wrapper .menu{padding:5px 0;margin:0!important}
.context-menu-content .item{list-style:none;font-size:18px;height:30px;display:flex;width:100%;cursor:pointer;align-items:center;padding:0 10px}
.context-menu-content .item:hover{background:#f2f2f2}
.context-menu-content .item span{margin-left:8px;font-size:15px}
.context-menu-content .item i{font-size:14px}
.context-menu-content .share{position:relative;justify-content:space-between}
.share .share-menu{position:absolute;background:#fff;width:200px;right:-200px;top:-35px;padding:5px 0;opacity:0;pointer-events:none;border-radius:4px;margin:0!important;box-shadow:0 5px 10px rgba(0,0,0,0.08);transition:.2s ease}
.share:hover .share-menu{opacity:1;pointer-events:auto}
     

Bước 5. Tìm thẻ </body> hoặc nó có thể là &lt;!--</body>--&gt;&lt;/body&gt; sau đó chèn đoạn Javascript sau bên trên nó.


       <!--[ js font awesome ]-->
    <script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro-v6@18657a9/css/all.min.css");
//]]>
</script>
    <!--[ end ]-->
    
    
    <!--[ js custom right mouse by CODETHINK ]-->
    <script>//<![CDATA[
  const contextMenu = document.querySelector(".context-menu-wrapper"),
shareMenu = contextMenu.querySelector(".share-menu");

window.addEventListener("contextmenu", e => {
    e.preventDefault();
    let x = e.offsetX, y = e.offsetY,
    winWidth = window.innerWidth,
    winHeight = window.innerHeight,
    cmWidth = contextMenu.offsetWidth,
    cmHeight = contextMenu.offsetHeight;

    if(x > (winWidth - cmWidth - shareMenu.offsetWidth)) {
        shareMenu.style.left = "-200px";
    } else {
        shareMenu.style.left = "";
        shareMenu.style.right = "-200px";
    }

    x = x > winWidth - cmWidth ? winWidth - cmWidth - 5 : x;
    y = y > winHeight - cmHeight ? winHeight - cmHeight - 5 : y;
    
    contextMenu.style.left = `${x}px`;
    contextMenu.style.top = `${y}px`;
    contextMenu.style.visibility = "visible";
});

document.addEventListener("click", () => contextMenu.style.visibility = "hidden");
    //]]></script>
    <!--[ end ]-->
    
      

Bước 6. Lưu lại Chủ đề và xem lại thành quả.

Kết luận

Mình đã hướng dẫn các bạn cách để Custom Menu Chuột Phải cho Blog một cách chi tiết. Nếu bạn thực hiện sai thì hãy làm lại còn nếu không được thì hãy liên hệ với mình qua Messinger mình sẽ giúp các bạn nhé. Trân trọng!

© Bản quyền:
www.codethink.xyz

Getting Info...

Đăng nhận xét

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.