Blog iTeam OS

Thêm Watermark Vào Ảnh Trong Blogspot/Blogger

Hướng dẫn tạo Watermark tự động cho ảnh trên Website

Thêm Text và Image Watermark vào ảnh trong bài viết của Blog

Nhược điểm của nó là lại về Base64 nên mình không thích nó lắm.

Thôi chúng ta cùng đi vào các bước thực hiện thôi nào.

Thêm Watermark Vào Ảnh Trong Blogspot/Blogger
Thêm Watermark Vào Ảnh Trong Blogspot/Blogger

Hướng dẫn tạo Watermark tự động cho ảnh trên Website

Bước 1: Chúng ta Đăng nhập vào blog ==> Chọn mẫu (template) ==> Chọn chỉnh sửa HTML

Chúng ta chèn đoạn code này vào trước thẻ đóng </body>

<script src="https://kenbtec.github.io/watermark/watermark.js"></script>
<script>// path to the watermark image
$(function(){
 //add text water mark; 
 $('.watermarktext img').watermark({
  text: 'iTeam OS',
  textWidth: 100,
  textColor: 'white'
 });
 //add image water mark
 $('.watermarkimg img').watermark({
  path: 'https://i.imgur.com/rycTUja.png'
 }); 
})
</script>

Nếu watermark.js không hoạt động thì thay jquery.watermark.min.js này nhé

<script src="https://dl.dropboxusercontent.com/s/karip7yyl83aaek/jquery.watermark.min.js?dl=0"></script>

Bước 2: Tìm tới đoạn mã <data:post.body/> và thay bằng đoạn mã dưới đây:

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 chèn Watermark là chữ:

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

Nếu muốn chèn Watermark là Hình:

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

Thay thế từng vị trí <data:post.body/> để javascript hiển thị đúng.

Chúc bạn thành công!!!


Truy cập Bypass Google Account APK để tải file APK nhé