Home
Blogger
CODE

[Thủ thuật] Thêm Watermark Vào Ảnh Trong Blogspot/Blogger

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.

Demo

Watermark Text

Watermark Image

Đối với Blogspot

Bước 1: Chúng ta vào chỉnh sửa Blog với 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: 'ngohoanganhtuan.net',
  textWidth: 100,
  textColor: 'white'
 });
 //add image water mark
 $('.watermarkimg img').watermark({
  path: 'https://i.imgur.com/g9oBdTl.png'
 }); 
})
</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>
Bài viết liên quan:

Post a Comment