[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>
1 comment