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 đó.
Để 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVMFCOZRjJosRs0ZNHhjqwbZ-INT6WaDQn5_KgNKzSACzsM6UYyv5j87xTAEReYYbC4wJtVz6bEVB5YXZkkWrqvKNr3ATtQLRPbwxU65Pkchb4tj1DAk4DGAmvcMjianIZNj14-DwDFgQ/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVMFCOZRjJosRs0ZNHhjqwbZ-INT6WaDQn5_KgNKzSACzsM6UYyv5j87xTAEReYYbC4wJtVz6bEVB5YXZkkWrqvKNr3ATtQLRPbwxU65Pkchb4tj1DAk4DGAmvcMjianIZNj14-DwDFgQ/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.

Bài viết liên quan:

  • Sửa lỗi không thể chỉnh sửa, di chuyển wiget trong layout blogspot Với một số mẫu, bạn không thể chỉnh sửa, thay đổi vị trí các tiện ích trong Bố cục của trang, Bài viết này mình sẽ hướng dẫn các bạn khắc phục vấn đề này, bạn có thể thoải mái thêm tiện ích và tùy biến vị trí của các tiện íc…
  • Tối ưu Seo cho blogspot với thẻ ( tag ) H1, H2, H3 của Bloggerplus Tối ưu Seo cho blogspot với thẻ (tag) H1, H2 là bài viết gần như duy nhất mà tôi quan tâm tại Bloggerplus, anh ấy đã bỏ blogger khá lâu rồi, khi tôi mới biết đến blogspot thì gần như anh ấy đã không còn hoạt động nữa. bài vi…
  • Code bài viết gần đây recent posts Chia sẻ các bạn bộ code bài viết gần đây recent posts và bài viết ngẫu nhiên random posts cho blog mà mình đã sưu tầm được. Đặc điểm của style này là có hình ảnh, ngày đăng bài và số bình luận trong mỗi bài đăng. Để thêm cod…
  • Cách xóa tiện ích Attribution trong blogspot Attribution widget là một tiện ích mặc định được tích hợp sẵn trong cấu tạo của một trang blogger, với một số trang tác giả thiết kế đã bỏ nó đi vì vấn đề thẩm mỹ, tuy nhiên còn rất nhiều mẫu (đặc biệt là những mẫu simple củ…
  • Giới hạn nên biết khi thiết kế blogspot Blogspot là một nền tảng miễn phí, và tất nhiên như bao nền tảng blog khác nó đều có một điểm tới hạn về mô tả, số lượng bài viết, dung lượng lưu trữ, số blog có thể tạo trên một tài khoản,.... mà bạn có thể chưa biết? Khi b…

Không có nhận xét nào:

Đăng nhận xét