Chào các bạn, lượn trên Google thì tìm được thủ thuật cho website khá hay nên mình đã mang về và chỉnh sửa + bổ sung thêm và đưa vào Blogspot.
Thủ thuật này sử dụng javascript để vô hiệu hóa chuột phải và thay vào đó là hiện menu khi bạn click chuột phải. Mình đã bổ sung thêm những tính năng sau:
  • Chia sẻ Facebook
  • Chia sẻ Google +
  • Sao chép liên kết hiện tại
Thủ thuật chống Copy bằng Menu chuột phải tuyệt đẹp cho Blogspot
Bạn có thể test trực tiếp tại bài viết này (click chuột phải thử xem).

Cách thực hiện

Chỉ cần thêm toàn bộ code này vào sau thẻ <body> rồi lưu lại là được.

<style>
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}
</style>
<ul class='contextMenu' hidden='1'>
  <li><a href='/'><i class='fa fa-home'/> Trang chủ</a></li>
  <li><a href='/contact'><i class='fa fa-envelope'/> Liên hệ</a></li>
  <li><a href='/hop-tac'><i class='fa fa-link'/> Hợp tác</a></li>
  <li>
      <a class='fa fa-facebook' expr:href='&quot;//m.facebook.com/sharer/sharer.php?u=&quot; + data:blog.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Chia sẻ lên Facebook'/>
<a class='fa fa-google-plus' expr:href='&quot;//plus.google.com/share?url=&quot; + data:blog.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target='_blank' title='Chia sẻ lên Google'/>
      <a class='fa fa-twitter' href='//bacsiwindows.com'/>
    <a class='fa fa-link' onclick='CopyLink()' style='cursor: pointer;' title='Sao chép liên kết của bài viết'/>
  </li>
</ul>
<script type='text/javascript'>
function copyTextToClipboard(e){var t=document.createElement(&quot;textarea&quot;);t.style.position=&quot;fixed&quot;,t.style.top=0,t.style.left=0,t.style.width=&quot;2em&quot;,t.style.height=&quot;2em&quot;,t.style.padding=0,t.style.border=&quot;none&quot;,t.style.outline=&quot;none&quot;,t.style.boxShadow=&quot;none&quot;,t.style.background=&quot;transparent&quot;,t.value=e,document.body.appendChild(t),t.select();try{document.execCommand(&quot;copy&quot;),alert(&quot;Đã sao chép liên kết!&quot;)}catch(o){alert(&quot;Không thể sao chép liên kết!&quot;)}document.body.removeChild(t)}function CopyLink(){copyTextToClipboard(location.href)};
  $(document).bind(&quot;contextmenu&quot;, function(event) {
    event.preventDefault();
    $(&quot;ul.contextMenu&quot;)
        .show() // bacsiwindows.com
        .css({top: event.pageY + 15, left: event.pageX + 10});
});
$(document).click(function() {
  isHovered = $(&quot;ul.contextMenu&quot;).is(&quot;:hover&quot;);
  if (isHovered == false){
    $(&quot;ul.contextMenu&quot;).fadeOut(&quot;fast&quot;);
  }
});
</script>
Chúc bạn thành công.
Source code of thuthuatweb.net
Edited by bacsiwindows.com
Trường Nguyễn - - 52 bình luận
Tag
  • Bình luận (52)
  • Emoticon
    1. https://www.thuthuatweb.net/css/de-dang-tao-context-menu-voi-jquery-va-css.html

      Trả lờiXóa
    2. Chống copy ? chắc bàn phím hư rồi :))

      Trả lờiXóa
      Trả lời
      1. Chống chuột phải chứ !? Nhầm cmnr :v

        Xóa
    3. Cơ mà không cop đc code trên đt

      Trả lờiXóa
      Trả lời
      1. Đúng rồi. Tô đen trên điện thoại cũng không được luôn.

        Xóa
    4. Trả lời
      1. nhưng cx khá là bất tiện cho người truy cập

        Xóa
      2. Bất tiện với những blog thủ thuật thôi, còn trang web bình thường thì không vấn đề!!

        Xóa
    5. Bài viết hay lắm anh, mà đây là chống chuột phải mà, thay lk giúp em thành https://www.starsonit.net/ nhé

      Trả lờiXóa
      Trả lời
      1. Ừ là chống chuột phải. A viết nhầm cmnr.
        PC đang cài lại Win nào xong a thay cho nhớ.

        Xóa
      2. Mà nhân tiện anh nhận xét cái temp em mới mod lại của anh với ạ

        Xóa
      3. Không giống Zing Me lắm, giống Facebook hơn. Được cái thanh menu là gần giống thôi.

        Xóa
      4. Vì em mới mod thanh menu mà anh, phần dưới đã làm gì đến đâu, nếu có thời gian anh qua mod giúp em đc ko, tặng anh cái domain tuỳ chỉnh, vì giờ em bán domain

        Xóa
      5. Ừ cố gắng làm cho nó giống Zing Me đi :3 anh không có thời gian đâu e nhưng nếu rảnh a vào chỉnh sửa nhỏ nhỏ thì được.

        Xóa
      6. Anh vào chỉnh hộ em cái khung tìm kiếm thôi, vì em thay mãi mà cứ bị lỗi trong khi thay đúng

        Xóa
      7. Bình thường mà có bị gì đâu em. Sửa màu background lại là được rồi.

        Xóa
      8. Em muốn thay nó thành cái search khác

        Xóa
      9. Thì tìm code search khác thay vào vị trí cũ rồi sửa css thôi e

        Xóa
      10. Sửa vào không lưu đc mà nó bị lỗi xuống

        Xóa
    6. Cái backtop hover vào hình giọt nước vip vcl

      Trả lờiXóa
    7. Trả lời
      1. Rep câu trên mà đâu nó tụt xuống đây :3

        Xóa
      2. Bấm rep cmt mà nó hiện ra nút Hủy trả lời mới được :3

        Xóa
    8. Đổi gió thanh menu đi boss ơi, nhìn mãi chán phết ~~
      P/s: Cơ mà liên kết bạn bè kì quá a ơi

      Trả lờiXóa
      Trả lời
      1. Đổi gió gì bây giờ nhở đổi màu nền hay đổi luôn menu khác?? :v
        LKBB sao mà kì ?

        Xóa
      2. Đổi luôn menu khác /=s
        Hover nó không được đẹp lắm

        Xóa
      3. Để sửa lại chứ không biết đổi menu nào khác nữa :3

        Xóa
    9. Klq mà footer chói mắt quá, trắng tinh luôn @@

      Trả lờiXóa
      Trả lời
      1. Chịu khó y. Để hôm nào rảnh làm nightmode cho theme :3

        Xóa
    10. làm thanh menu đẹp hơn tí đi :v boss

      Trả lờiXóa
    11. Anh trường ra bài chỉ cái hover bài viết trượt như của anh đi

      Trả lờiXóa
      Trả lời
      1. Cái hover bài viết trượt là cái gì em nhở!?

        Xóa
      2. Là vào blog hoặc vào bài viết là nó trượt từ bên trái sang như blog anh ấy

        Xóa
      3. Dùng một tí CSS Animation thôi. Để ngày mai anh copy css cho.

        Xóa
    12. Trả lời
      1. Đây e nhớ:
        https://www.bacsiwindows.com/2018/01/tao-hieu-ung-slide-va-fadein-cho-blogspot-bang-animation-css.html

        Xóa
    13. Template ko có body thì làm ntn bác

      Trả lờiXóa

  • :))
    :((
    :D
    :(
    :)
    :-)
    ;)
    =))
    :p
    =.=
    ==
    ^_^
    /=he
    :*
    /=r
    /=l
    :v
    /=ok
    /=clap
    (y)
    (yy)
    /=hi
    /=j
    /=hup
    /=hd
    /=hl
    /=hr
    /=s
    <3