Blogger için Özel Sağ Tıklama Menüsü

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
<!--[ 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>
  

1234567891011
 /* 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}
  

123456789101112131415161718192021222324252627282930313233343536373839404142
      <!--[ 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 ]-->