Trang chủ
Blogspot Tips

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

Chống click chuột phải lên hình ảnh trong blogspotseo căn bản, thủ thuật blogspot, thủ thuật seo,giao dien blogspot Chống click chuột phải lên hình ản
Vũ Văn Hoàn

Để chống click chuột phải lên hình ảnh trong Blogger (Blogspot), bạn có thể sử dụng một đoạn mã JavaScript ngắn để vô hiệu hóa menu ngữ cảnh riêng trên các thẻ ảnh. Cách làm này giúp bảo vệ ảnh mà không làm ảnh hưởng đến trải nghiệm click chuột phải ở các vùng văn bản khác của người dùng.

Các bước thực hiện

  1. Truy cập vào trang quản trị Blogger.
  2. Nhấp vào mục Chủ đề (Theme) ở menu bên trái.
  3. Nhấp vào mũi tên cạnh nút Tùy chỉnh (Customize) rồi chọn Chỉnh sửa HTML (Edit HTML).
  4. Nhấp chuột vào vùng code, bấm tổ hợp phím Ctrl + F để mở hộp tìm kiếm.Tìm kiếm thẻ </body>
  5. .Dán đoạn mã dưới đây ngay phía trên thẻ </body>:

1. Không hiện popup khi cick chuột phải

<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
        images[i].addEventListener('contextmenu', function(e) {
            e.preventDefault();
        }, false);
    }
});
//]]>
</script>

1. Hiện popup khi cick chuột phải

<script type='text/javascript'>
//<![CDATA[
    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>
//]]>
</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 bôi màu.
  • 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ả.

Đăng nhận xét