Thư viện

Trải nghiệm

Thứ Năm, tháng 10 03, 2013

Chống click chuột phải lên hình ảnh trong blogspot

Đoạn code này có tác dụng ngăn chặn không cho ai đó click chuột phải lên trên hình ảnh, điều đó cũng đồng nghĩa với việc họ không thể tải và xem URL hình ảnh đó của bạn.

Chia sẻ:
Chống click chuột phải lên hình ảnh trong blogspot
Đoạn code này có tác dụng ngăn chặn không cho ai đó click chuột phải lên trên hình ảnh, điều đó cũng đồng nghĩa với việc họ không thể tải và xem URL hình ảnh đó của bạn.

Tuy nhiên nói đi thì cũng phải nói lại vì đây là mã Scripts nên thường với dân web chuyên nghiệp thì họ vẫn có thể copy nó được vì chỉ cần tăt javar của trình duyệt là họ có thể mặc sức copy rồi. Nhưng bạn cũng yên tâm vì không nhiều người biết cách làm đó :)

Các bạn có thể xem demo bằng cách thử clock chuột phải vào hình ảnh bên cạnh (Lưu ý demo chỉ có tác dụng trong bài viết này)

» Làm thế nào để chống click chuột phải lên hình ảnh trong blogger?

Trong bài viết này mình sẽ hướng dẫn cho các bạn 2 cách để các bạn lựa chọn:

Cách 1: Disable right click context menu on images

Khi độc giả bấm chuột phải vào hình ảnh nó sẽ hiện lên thông báo như bên dưới không cho họ click chuột phải vào hình ảnh đó.
Chống click chuột phải lên hình ảnh trong blogspot
Để làm được như vậy các bạn làm như sau:
1- Đăng nhập vào Blogger.
2- Chọn mẫu (Template).
3- Sao lưu mẫu của bạn để đề phòng sảy ra lỗi khi áp dụng thủ thuật này.
4- Nhấp chọn vào Chỉnh sửa HTML (Edit HTML).
5- Thêm đoạn code bên dưới vào trước thẻ đóng </head>
<script type="text/javascript">
//<![CDATA[
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Disable context menu on images by GreenLava (http://namkna.blogspot.com/)
Version 1.0
You are free to copy and share this code but please do not remove this credit notice.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
    function nocontext(e) {
        var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
        if (clickedTag == "IMG") {
            alert(alertMsg);
            return false;
        }
    }
    var alertMsg = "Image context menu is disabled";
    document.oncontextmenu = nocontext;
//]]>
</script>
Trong đó:
  • Bạn có thể thay thế tin nhắn trong hộp thông báo dạng popup thành bất cứ câu từ nào bạn muốn. Chỉnh sửa bằng cách chỉnh đoạn màu xanh.
  • Nếu bạn không muốn hiển thị bảng thông báo đó thì hãy xóa đoạn code :
    var alertMsg = "Image context menu is disabled";
  • Để vô hiệu hóa trên một hình ảnh cố định bạn phải thêm đoạn code bên dưới vào trong thẻ img của hình ảnh
    oncontextmenu='alert("Image context menu is disabled");return false;'

    - Mở trình soạn thảo của bài viết vào chuyển xanh chế độ HTML của bài viết, Xác định vị trí các thẻ img của hình ảnh, Sau đó chèn các mã bên trên vào bên trong thẻ ví dụ
    <img border="0" src="http://4.bp.blogspot.com/-g3F1n-WhX64/UR-hPEi-LKI/AAAAAAAAI6k/4Wx_79knSpc/s1600/banner-namkna-blogspot-com.png" />
    Sau khi thêm đoạn code vào nó sẽ có dạng như sau:
    <img oncontextmenu='alert("Image context menu is disabled");return false;' border="0" src="http://4.bp.blogspot.com/-g3F1n-WhX64/UR-hPEi-LKI/AAAAAAAAI6k/4Wx_79knSpc/s1600/banner-namkna-blogspot-com.png" />
Lưu mẫu lại và xem kết quả.

Cách 2: Chống click chuột phải lên hình ảnh.

Dạng này không có thông báo hiện lên.
1- Đăng nhập vào Blogger.
2- Chọn mẫu (Template).
3- Sao lưu mẫu của bạn để đề phòng sảy ra lỗi khi áp dụng thủ thuật này.
4- Nhấp chọn vào Chỉnh sửa HTML (Edit HTML).
5- Thêm đoạn code bên dưới vào trước thẻ đóng </head>
<script>
$(function() {
$('img').bind("contextmenu", function(event_click) {
event_click.preventDefault();
});
});
</script>
<!-- http://namkna.blogspot.com/2013/10/chong-click-chuot-phai-len-hinh-anh.html --> 
6- Lưu mẫu lại và quay trở lại bài viết bất kỳ chứa hình ảnh để kiểm tra kết quả xem có clik chuột phải vào được hình ảnh trong đó không nha.

27 nhận xét:

  1. Anh Nam ơi giúp em chia cái này làm 2 với được không ạ https://lh6.googleusercontent.com/-SFtBDFstMTc/Uk9PxyiorVI/AAAAAAAABAk/sqwMLHQ8z3E/w1044-h500-no/Capture.PNG

    Trả lờiXóa
  2. Và cái nữa , em làn theo bài này của anh http://namkna.blogspot.com/2011/08/tien-ich-recent-posts-giong.html#.Uk9N59KP8wY

    Giờ em chỉ muốn cho nó hiện ở mỗi trang chủ thui , chứ khi em thêm cái đó song , nó hiện cả ở trong các bài viết :( mong anh giúp em , em cám ơn anh nhiều

    https://lh6.googleusercontent.com/-S_k7xpZ7wPQ/Uk9Px1FDmvI/AAAAAAAABAg/UNj0Qi5vopI/w659-h553-no/22.PNG

    Trả lờiXóa
    Trả lời
    1. Để nó chỉ hiện ở trang chủ em xem bài viết này nha; Hiển thị Widget ở những trang nhất định trong Blogspot

      Xóa
    2. Dạ vâng thế còn bài này anh ơi

      Anh Nam ơi giúp em chia cái này làm 2 với được không ạ https://lh6.googleusercontent.com/-SFtBDFstMTc/Uk9PxyiorVI/AAAAAAAABAk/sqwMLHQ8z3E/w1044-h500-no/Capture.PNG

      Xóa
    3. Chèn vào sau đoạn cđe:
      <b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'>

      đoạn code sau:

      <div class='namkna1'>
      <b:section class='tabs' id='crosscol1' maxwidgets='1' showaddelement='yes'>
      </b:section>
      </div>
      <div class='namkna2'>
      <b:section class='tabs' id='crosscol2' maxwidgets='1' showaddelement='yes'>
      </b:section>
      </div>
      <div class='namkna3'>
      <b:section class='tabs' id='crosscol3' maxwidgets='1' showaddelement='yes'>
      </b:section>
      </div>
      <Style>
      .tabs{width:32%}
      <style>

      Xóa
    4. Anh ơi không được anh ak nó báo lỗi

      Xóa
    5. https://lh6.googleusercontent.com/-ofR-pUqLOkU/Uk_VwdH7vyI/AAAAAAAABBA/bF7XyuCtz_U/w1043-h487-no/ok.PNG

      Xóa
    6. Anh nhầm em chỉnh đoạn:
      <div class='namkna-3cot'>
      <div class='namkna1'>
      <b:section class='tabs' id='crosscol1' maxwidgets='1' showaddelement='yes'>
      </b:section>
      </div>
      <div class='namkna2'>
      <b:section class='tabs' id='crosscol2' maxwidgets='1' showaddelement='yes'>
      </b:section>
      </div>
      <div class='namkna3'>
      <b:section class='tabs' id='crosscol3' maxwidgets='1' showaddelement='yes'>
      </b:section>
      </div>
      </div><div style='clear:both;'></div>
      <style>
      .namkna1, .namkna2, .namkna3{width:32%;float:left}
      .namkna-3cot{width:100%}
      </style>

      Xóa
    7. vẫn lỗi anh ak

      The widget with id "Blog1" cannot contain element: "div". A widget can only contain b:includable elements.

      Xóa
    8. Ui trời em chèn nó vào sau đoạn code có dạng:

      <b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'>
      ......
      </b:widget>
      nha chứ chèn vào ngay sau đoạn đầu là không thể,


      Mẹo. hiện nay blogger có chức năng thu nhỏ các thành phần trong một thẻ em chie cần bấm chuột vào dãy số đếm trước dòng <b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'> nó sẽ thu nhỏ toàn bộ phần main lại. Khi đó em sẽ có đoạn code dạng:

      <b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'> .... </b:widget>

      Xóa
  3. mặc dù là ko dc click chuột phải nhưng khi click chuột trái thì vẫn copy dc bình thường mà a

    Trả lờiXóa
    Trả lời
    1. Mỗi cái nó có một ưu nhược điểm mà, nếu click chuột trái thì họ phải copy từng hình ảnh một,, như vậy nhiều khi sẽ làm họ nản chí thôi vì với bài viết nhiều hình thì đó quả là một cộng việc tiêu tốn thời gian,

      Xóa
    2. A nam ơi qua kiểm tra dùm e nguyên nhân sao mà cái site e dao này load nặng quá đây

      Xóa
    3. Nó lấy ảnh với kích thước gốc nên vầy đó em. Tiện ích readmore đóa,

      Xóa
    4. blog e đang sử dụng tiện ích rê chuột vào sẽ tự phóng to ảnh trong 1 diện tích nhất định, điều này làm ảnh hưởng tới tốc độ load đúng ko a? khi e kéo blog trượt lên xuống nó có 1 độ trễ và không mướt như trước nữa không biết có cách nào khắc phục ko a?

      Xóa
    5. e vừa kiểm tra các bài viết ở trang chủ, không những có load hình hiển thị gốc mà nó load tất cả hình ảnh trong bài viết đó luôn. giống như mỗi ô bài viết trang chủ là 1 bài viết thu nhỏ lại trong ô đó, vô trong bài viết thì ko thấy nó giật khi cuộn trang như trang chủ, e vừa xóa trúng cái tiện ích trong code nên h nó ko còn phóng to ảnh nữa

      Xóa
    6. Nếu nó load hết như em nói là khi đăng bài em không sử dụng dấu ngắt mà lạm dụng vào tiện ích readmore rồi, Khi đăng bài em hãy dùng dấu ngắt như ảnh này XEM NGAY

      Xóa
    7. oh cám ơn a e vừa áp dung cho các bài xong load lại thử thì nó nhanh hơn hẳn, ko bị tình trạng load hết nữa

      Xóa
    8. Không có gì rất vui vì giúp được em :)

      Xóa
  4. Nam oi, cậu cho mình xin cái code mà khi nào ai đó muốn copy bài viết của mình, họ click chuột phải bấm vào copy thì nó hiện lên cái pop-up thông báo của mình được không. Blog mình: Yêu Tiếng Anh

    Trả lờiXóa
  5. chống click chuột phải nhưng click chuột trái vào hình ảnh thì vẫn copy đc bác ơi. bác có cách nào giúp em mới

    Trả lờiXóa
  6. cái này copy trên điện thoại vẫn đc ạ :(

    Trả lờiXóa
  7. Lỗi khi phân tích cú pháp XML, dòng 453, cột 9: The end-tag for element type "head" must end with a '>' delimiter. -nhờ bạn giúp

    Trả lờiXóa
  8. adm ơi có cách nào chống kéo ảnh sang tab khác để tải về k chống coppy vs xem f12 thì dc chứ bh k chống dc người khác kéo ảnh của mình sang tab khác để xem
    nếu cho cả 3 code chống on textmenu vào thì k bôi đen dc :(

    Trả lờiXóa