Hướng Dẫn Tạo Menu Cho Chuột Phải Cho Blogspot

Chào các bạn vì một số vấn đề như để thêm đẹp, thêm tính năng cho blog của bạn thì đây là một lựa chọn rất tốt, hoặc vì mục đích chống copy bài thì tạo menu chuột phải cho blog của bạn cũng là một cách cực kì hữu ích nhé.

Tao Menu Cho Chuot Phai Dep Cho Blogspot

 

Các Bước Tạo Menu Cho Chuột Phải

Bước 1: Chèn đoạn CSS sau vào trước ]]></b:skin>

This is box title
ul.contextMenu{list-style:none;margin:0;padding:0;font:400 15px ‘Roboto’,sans-serif;position:absolute;color:#333;box-shadow:0 0 70px rgba(0,0,0,.15);z-index:999}

ul.contextMenu li{min-width:150px;overflow:hidden;white-space:nowrap;padding:12px 15px;background-color:#fff;border-bottom:1px solid #ecf0f1}

ul.contextMenu li a{color:#333;text-decoration:none}

ul.contextMenu li:hover{background-color:#ecf0f1}

ul.contextMenu li:first-child{border-radius:5px 5px 0 0}

ul.contextMenu li:last-child{background:#ecf0f1;border-bottom:0;border-radius:0 0 5px 5px}

ul.contextMenu li:last-child a{width:26%}

ul.contextMenu li:last-child:hover a{color:#2c3e50}

ul.contextMenu li:last-child:hover a:hover{color:#2980b9}

Bước 2: Các bạn chèn đoạn code sau vào bất kì đâu trong <body> nhé

This is box title
<ul class=’contextMenu’ hidden=’1′>

<li><a href=’/’><i class=’fa fa-home’></i> Trang chủ</a></li>

<li><a href=’/contact’><i class=’fa fa-envelope’></i> Liên hệ</a></li>

<li><a href=’/hop-tac’><i class=’fa fa-link’></i> Hợp tác</a></li>

<li>

<a class=’fa fa-facebook’ href=’//m.facebook.com/sharer/sharer.php?u=https://www.howktech.com/’ onclick=’window.open(this.href, “_blank”, “height=430,width=640”); return false;’ title=’Chia sẻ lên Facebook’></a>

<a class=’fa fa-google-plus’ href=’//plus.google.com/share?url=https://www.howktech.com/’ onclick=’window.open(this.href, “_blank”, “height=430,width=640”); return false;’ target=’_blank’ title=’Chia sẻ lên Google’></a>

<a class=’fa fa-twitter’ href=’#’></a>

<a class=’fa fa-link’ onclick=’CopyLink()’ style=’cursor: pointer;’ title=’Sao chép liên kết của bài viết’></a>

</li>

</ul>

<script type=’text/javascript’>

function copyTextToClipboard(e){var t=document.createElement(“textarea”);t.style.position=”fixed”,t.style.top=0,t.style.left=0,t.style.width=”2em”,t.style.height=”2em”,t.style.padding=0,t.style.border=”none”,t.style.outline=”none”,t.style.boxShadow=”none”,t.style.background=”transparent”,t.value=e,document.body.appendChild(t),t.select();try{document.execCommand(“copy”),alert(“Đã sao chép liên kết!”)}catch(o){alert(“Không thể sao chép liên kết!”)}document.body.removeChild(t)}function CopyLink(){copyTextToClipboard(location.href)};

$(document).bind(“contextmenu”, function(event) {

event.preventDefault();

$(“ul.contextMenu”)

.show()

.css({top: event.pageY + 15, left: event.pageX + 10});

});

$(document).click(function() {

isHovered = $(“ul.contextMenu”).is(“:hover”);

if (isHovered == false){

$(“ul.contextMenu”).fadeOut(“fast”);

}

});

</script> 

Bước 3: Các bạn save template lại và đến blog các bạn kiểm tra hoạt động của menu ở chuột phải nhé. (code trên lấy ở starcuongit nhé)

 Cuối Cùng Là Chúc Các Bạn Thành Công
 
 Hãy Ghé Thăm Thêm Các Thủ Thuật Khác Của Howktech Nhé

LEAVE A REPLY

Please enter your comment!
Please enter your name here