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

avatar

blogger80
220
30
blogger
An toàn
cập nhật
Thành viên quen thuộc
Thành viên quen thuộc

Bài viết :
80
Points :
220
Like :
30
blogger
An toàn
cập nhật
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


Đầ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>

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


Đầ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


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>
 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá