How To Add Text Or Logo Watermark To Your Blog Article

 Hey there, do you want to add a watermark to each article on your Blogger website? Well, you are in luck today because I will show you how to add a watermark to a blog article in today's tutorial.

Adding a watermark in a blog article may sound uncommon but there are some websites that use it for various reasons. Such as if someone takes a screenshot of your website and sends it to others then those people will know the source of that data by looking at the watermark in the screenshot. 

However, it could also harm the user experience by reducing the readability of the content. so you have to be very careful while doing this. 

What is a Watermark?

A watermark is a recognizable pattern or image embedded into a digital or physical document, image, or piece of media. Watermarks are often used for various purposes, including:

• Copyright Protection: Digital watermarks are frequently used to protect the intellectual property of content creators. They can be subtly embedded into images, videos, or documents to indicate ownership and deter unauthorized use or reproduction.
• Branding: Watermarks with logos or brand names are used to promote a brand or company. They are often placed on images, videos, or documents to reinforce brand identity.
• Document Verification: Watermarks can be used on official documents, such as certificates or diplomas, to prevent forgery. These watermarks are typically intricate patterns or text that are difficult to replicate.
• Security: Watermarks can be used as a security feature in currency, passports, and other valuable documents. These watermarks are often complex and difficult to reproduce accurately.
• Transparency: In digital media, watermarks are often added to images or videos as semi-transparent overlays. This is commonly seen in stock photos or videos to indicate that they are copyrighted or need to be purchased for use.
• Artistic Enhancement: Watermarks can be added to images for artistic or aesthetic purposes. They may enhance the visual appeal of the image or give it a unique style.

Digital watermarks can be either visible or invisible. Visible watermarks are typically overlaid on top of the content and are easily visible to viewers. Invisible watermarks are embedded within the content and are readily apparent with specialized software. They are used for copyright protection and tracking unauthorized use.

Watermarks serve as a way to claim ownership, provide information, or enhance the security of various types of media and documents. Their use can vary widely depending on the intended purpose.

Video Tutorial

If you don’t feel like reading, then instead of reading you can watch the video below that is related to this topic.

How to add a Watermark in the blog post

Today I will show you 2 ways to add a watermark in your blogpost also and 2 different types of watermarks. To accomplish this you need to have basic Photo Editing skills. You can use software such as Adobe Photoshop, GIMP, or Photopea, which is an online photo editing program completely free. I would suggest you, use Photopea for this tutorial. 

First of all, you need to create a PNG image for the watermark using Photo editing software. And then convert the PNG file into WebP image format. The reason we converted PNG to WebP is that WebP images are more lightweight with the same quality. If you don't know how to do it then watch this video. You make this watermark look as you want also you can change the colors, size, and pattern. You can even add a logo if you want. 

Be careful about the opacity of the watermark. If it is too high then the readability of the content will reduce. If it's too low then maybe no one will notice it. Also, choose a color that will be visible in both light and dark mode. 

Now the watermark is ready to use, so let's implement it on our website. Make sure you read till the last and don't miss a single point.

Watermark Tutorial - Full article page

Watermark Tutorial - Only article body

This method will apply the watermark only to the content and not the whole page. This method is the same as the previous one till step 4. So now we will start from step 5.

1. Now again press Ctrl + F and search for <div class='pS post-body postBody' id='postBody'>
2. After you find it, replace that code with the below code.

<div class='pS post-body postBody wtM' id='postBody'>

3. Now click the save icon to save the change.

Here is how to do it:

• Go to Layout > Theme Designer. It should to at the top-right corner of your website.
• Now click on the Advance tab and from there select Add CSS.
• Paste the CSS code there.

FAQ - Frequently Asked Questions

Conclusion