How to make automatic watermark on images in blogger

Hello everyone, on this occasion I will share how to create automatic watermarks on images in blogger using CSS.

A watermark is a copyright sign that can be in the form of writing or a logo aimed at protecting our work so that it cannot be reused or distributed without permission. The watermark that I will share here uses CSS, and will automatically add a watermark on every image on the blog, like it on the post page homepage and related posts.

But keep in mind this watermark only uses CSS which means it's not permanent, if your image is downloaded then the watermark won't come or it won't exist, so if your image is found in the browser then your image has no watermark so it's not 100% of your images can be protected with this watermark, more precisely this is just to beautify the appearance, if you want to protect your images I recommend using a photo editor to make it permanent. and keep in mind that maybe not all templates can match this CSS, because each template can have a different thumbnail class name, so a basic CSS understanding is needed here because you have to be able to adjust the class to the template you are using, ok make those of you who want to make it, let's see how below.

Steps — How To Do ?

I'll explain in detail how to create an automatic watermark in the blog article image. Just follow this step.

• Go to Themes - Edit HTML on blogger dashboard.
• Copy the following CSS code and place it above the code ]]></b:skin>

.postEntry .separator{position:relative}
.relatedPosts .itemThumbnail div{z-index:2}
.onPost .postEntry .separator:before{bottom:7px}
.postThumbnail a:before, .postEntry .separator:before,.relatedPosts .itemThumbnail > *:after{content:'The Taluat';position:absolute;right:0;bottom:0;display:flex;font-size:10px;font-weight:bold;color:#fff;z-index:2;border-top-left-radius:10px;background-color:#3a3a3a;padding:5px 7px;opacity:.7}

• Click Save For Final Step.

The part that I marked The Taluat please change with the name of your blog, and if you are not using the median-ui 1.5 template you need to adjust the class in CSS.

For Median UI 1.6

/* The Taluat auto credit image */

.pEnt .separator{position:relative}

.rPst .itemThumbnail div{z-index:2}

.onPs .pEnt .separator:before{bottom:23px}

.pEnt .separator:before,.rPst .itemThumbnail > *:after{content:'The Taluat';position:absolute;right:0;bottom:0;display:flex;font-size:10px;font-weight:bold;color:#fff;z-index:2;border-top-left-radius:10px;background-color:#3a3a3a;padding:5px 7px;opacity:.7;border-bottom-right-radius: 6px;}

Conclusion

So today we have discussed about how to make automatic watermark on images on blogger. I hope you like this post kindly do give a comment below. If you are having problem implementing this kindly contact me. Do visit regularly for getting more updates like this.