Labels

[Blogger] Removing Hyperlinks From Blogger Post Images


Mặc định khi bạn chọn chế độ upload ảnh tại trang đăng bài của blog, blog sẽ tự động chèn thêm thẻ <a> bao quanh thẻ <img> với mục đích kích hoạt chế độ xem ảnh lightbox do blogger cung cấp. Tuy nhiên với một vài blogger họ không thích điều đó, có thể do họ đã tắt widget.js mặc định của blogger, cũng có thể họ chỉ muốn hiện ảnh mà không chèn liên kết cho ảnh và bài viết này sẽ giúp bạn thực hiện điều đó

Cách 1: Làm thủ công

Rất đơn giản thôi sau khi đã upload ảnh thành công và chèn vào bài viết bạn click vào ảnh và chọn "Liên kết" hoặc "Link" blog sẽ loại bỏ liên kết của ảnh

Hoặc có thể chuyển sang tab HTML và giữ lại code của thẻ <img>

Cách này tuy thủ công nhưng được cái bạn sẽ chủ động loại bỏ được liên kết của một ảnh nhất định

Cách 2: Chèn script tự động loại bỏ liên kết tất cả ảnh

Với sự can thiệp của script thì rất nhanh chóng bạn có thể loại bỏ được tất cả liên kết của ảnh.

Bạn chỉ cần dán đoạn code sau vào trước thẻ đóng </head>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
  $('.post-body a[href]:has(img)').css({
    "cursor": "default",
    "pointer-events": "none",
    "-webkit-user-select": "none",
    "-khtml-user-select": "none",
    "-moz-user-select": "none",
    "-o-user-select": "none",
    "user-select": "none"
  }).click(function() {
    return false;
  });
});
//]]></script>

Lưu ý class .post-body nếu như không xuất hiện trong blog của bạn thì bạn phải thay thành class chuẩn để code hoạt động đúng. Trong trường hợp bạn muốn giới hạn phạm vi hoạt động của script có thể đặt nó trong cặp thẻ b:if ví dụ

+ Chỉ chạy ở trang chủ
<b:if cond='data:blog.url == data:blog.homepageUrl'>
// Nội dung script
</b:if>
+ Chỉ chạy ở trang bài viết
<b:if cond='data:blog.pageType == "item"'>
// Nội dung script
</b:if>
+ Chỉ chạy ở trang tĩnh
<b:if cond='data:blog.pageType == "static_page"'>
// Nội dung script
</b:if>
Sau đó bạn lưu lại và mở bài viết có ảnh ra để kiếm tra nhé

Good Luck !
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

    1. Dear Hưng Hoàng!

      Bạn có thể help mình không mình đang sài tem này cũng lâu rồi nên không muốn đổi.

      Nó bị lỗi khi lượt full thì không có hiếu ứng cho thanh cuộn và comment, nó như hình dưới:
      https://1.bp.blogspot.com/-zlVmHWx-Yeg/WjyB63sUZuI/AAAAAAAAEAs/d-gF7t2iwj89n32qwzzCnRA7aNu3__GugCLcBGAs/s1600/Untitled.jpg

      Nhưng khi lượt small hay smatphone thì lại ok, nó như hình dưới:
      https://3.bp.blogspot.com/-5J8CXbPb-ZA/WjyCVy-w7PI/AAAAAAAAEAw/kXOgg7lKu5UVDG52NTyCE1ZWXwd_xKr6gCLcBGAs/s1600/Untitled1.jpg

      Bạn hỗ trợ giúp mình nhé, Thanks bạn nhiều

      ReplyDelete
      Replies
      1. Site của bác là gì vậy

        Delete
      2. Dear Hưng Hoàng!

        Template Name: HPLog Blogger Template
        DEMO: https://demo1-thanhtruyen.blogspot.com/

        Không biết lỗi script nào mà biết nữa, mong Hưng Hoàng hỗ trợ mình với !

        Tks !

        Delete
      3. Sao mình không thấy phần cmt giống như trong ảnh nhỉ ^.^

        Delete
      4. Không đó chỉ là DEMO thôi, lỗi nằm ở trang mình đang dùng ấy.

        Đây bạn: http://soft.thanhtruyen.com/

        bạn thử xem, Khi Restore Down trình duyệt hay mobile thì Ok nhưng full size thì lại lỗi như link anh mình gửi trên.

        Delete
      5. Bác thêm css nhé

        .comments-tab {
        float: left;
        margin: 10px 5px 10px 0;
        padding: 5px;
        }

        Delete
      6. Vẫn không đc bạn ah, nói lỗi cùng với scrollbar đó bạn.
        Thu nhỏ trình duyệt lại thì đc nhưng full thì không bạn a !
        Hỗ trợ giúp mình bạn nhé,
        Tks!

        Delete
      7. Gửi teamviewer mình xem chút được không

        Delete
      8. À biết nguyên nhân rồi, do thằng @media only screen and (max-width: 768px) thứ 3 của bác chưa có ngoặc đóng, nên bác có thêm vào cuối b:skin bao nhiêu đi nữa nó cũng chỉ áp cho độ phân giải dưới 768 thôi, bác có thể tìm tools làm đẹp css để xem nhé

        Delete
      9. This comment has been removed by the author.

        Delete
      10. Phú Cường là ai vậy :v

        Delete
      11. Sorry Hưng Hoàng !

        Phú Cường là Guest của Hùng Coder, do bất cẩn nên có sự nhầm lẫn ở đây.

        Một lần nữa mong bạn thông cảm cho sự bấn cẩn này.

        Chúc bạn luôn khỏe, công tác tốt, thành công.

        Chúc bạn cùng gđ có tết Dương vui vẻ đầm ấm nhé!

        Thân ái !

        Delete