[Thủ thuật] Đóng dấu bản quyền watermark vào ảnh blogspot/forumotion

  • blogger
    Bài viết này được tham khảo từ code watermark của baivong , Ưu điểm của code là có thể thêm chữ và ảnh logo chèn vào ảnh trong bài viết , đóng dấu bản quyền vào ảnh.

    Nhược điểm là nó lại biến về base64 mà mình không thích lắm Sad

    Mình sẽ hướng dẫn các bạn ở 2 mã nguồn là blogger và forumotion



    Thêm text và image watermark vào ảnh trong bài viết


    Ở trường hợp của blogspot


    Đầu tiên cho code js này vào <footer>

    Code:
    <script src="https://dl.dropboxusercontent.com/s/karip7yyl83aaek/jquery.watermark.min.js?dl=0"></script>
    <script>// path to the watermark image
    $(function(){
     //add text water mark;
     $('.watermarktext img').watermark({
      text: 'hotrofm.net',
      textWidth: 100,
      textColor: 'white'
     });
     //add image water mark
     $('.watermarkimg img').watermark({
      path: 'https://dl.dropboxusercontent.com/s/nunjceykpqq1j1g/logo.png'
     });
    })
    </script>

    Đầu tiên các bạn vào chỉnh sửa HTMl sau đó tìm

    Code:
    <data:post.body/>

    Có thể trong có có nhiều <data:post.body/> thì bạn hay thử lần lượt nhé. Mình sẽ không nói chi tiết vì mỗi tem thiết kế một khác.

    Nếu muốn đóng dấu chữ thì đổi thành

    Code:
    <div class="watermarktext"> <data:post.body/> </div>

    Nếu muốn đóng dấu là ảnh thì đổi thành

    Code:
    <div class="watermarkimg"> <data:post.body/> </div>

    Ở trường hợp của forumotion

    Copy code sau vào vewtopic body

    Code:

    <script>
    $(function(){
     $('.watermarktext img').watermark({
      text: 'hotrofm.net',
      textWidth: 100,
      textColor: 'white'
     });
     $('.watermarkimg img').watermark({
      path: 'https://dl.dropboxusercontent.com/s/nunjceykpqq1j1g/logo.png'
     });
    })
    </script>

    tìm dòng

    Code:
    {postrow.displayed.MESSAGE}

    Nếu muốn đóng dấu chữ thì đổi thành

    Code:
    <div class="watermarktext"> {postrow.displayed.MESSAGE}  </div>

    Nếu muốn đóng dấu là ảnh thì đổi thành

    Code:
    <div class="watermarkimg"> {postrow.displayed.MESSAGE}  </div>


    P/S : Ai chưa có thư viện jquery thi cho vào nhé (tốt nhất cứ cho vào vì mình test trên 2.1.4 mới thấy dùng được chưa test các thư viện khác

    Code:
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

Thông tin tác giả
avatar
MEM LV2
Bài viết :
88
Points :
236
Like :
36
blogger
An toàn
Xem lý lịch thành viên
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết