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

Blogger kullanıcılarına özel Sağ tıklama menüsünü sizler için paylaşacağız.

Ve bu makaleye göre özelleştirme yaparsanız, sağ tıklama menüsü şu şekilde olacaktır.

Aşağıda ki kodları HTML/Javascript Widgetine ekliyoruz.

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

Şimdi aşağıda ki CSS kodlarını ]]>*/</b:skin> kodunun üzerine gelecek şekilde ekleyin.

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

Son olarak aşağıda ki JavaScript kodlarını </body> kodunun üzerine gelecek şekilde ekleyin.

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

Go to Link

© Serkan Kod Editörü