So you try to use the Code to automatically add Logo to the image for Blogspot, also known as the JQuery Watermark Plugin of this article.
Advantages:
- JQuery Watermark plugin helps you to watermark a series of images, like a watermarking tool.
+ Use image or text to stamp.
+ Allows you to choose the position to stamp on 8 corners of the image.
- Because this plugin is written in HTML5 and Javascript, so it will work without a server to process images, bandwidth limitation is no longer something you need to worry about.
- Suitable for low-bandwidth web servers, or free web creation services, forums that don't need server management such as Blogspot, Forumotion, ...
Defect:
- Doesn't work on older browsers that don't support HTML5.
- Does not work on Templates that use 3rd party code to interfere with images.
Code to add Logo automatically to images for Blogspot
As recommended this plugin requires jQuery library 1.5 or higher, please check the jQuery library before starting. If you don't have it, add the library path below before the </head> tag.
https://pastebin.com/CphA0qDb
Then add the code below before the </body> tag
https://pastebin.com/DuGhRbbU
***In which, you should pay attention to the following sections to modify accordingly:
- The text watermarktext (highlighted in green) is the text that identifies the text stamped. Change to watermarkimg if you want to stamp with images.
- text: 'hungvb.com' (highlighted in yellow) is the text displayed on the image if you choose to stamp with text, hungvb.com.
- path: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmNtamMrhziuL4Rhwoz7pAu4aJvlFXFINIIT3jWIzjcO5yNR-mcMTNiivqo6Z9Yk1BXdTxuaG49s8hYFUT0GIbaNkMH_xBHVHdZaEPRBUu5USttEJP5LTNu69sc2fsuYvD48NVr5FKwd5g/s539/logo-removebg-preview.png' (highlighted in red) is the Logo displayed on the image if you choose an image to stamp.
* There are also some items such as:
- textWidth:130 is the width of the area containing the stamped text, 130px.
- textSize:13 is the stamp text size ,13px.
- textColor:"white" is the stamped text color, white.
- textBg:"rgba(0, 0, 0, 0.4)" is the stamped text background color, gray.
- gravity:"nw" is the stamp position, upper left corner. You can nw to n, ne, w, e, sw, s, se, c to change position.
- opacity:.7 is Logo opacity, value from 0 to 1.
- margin:10 is the distance from the edge of the image to the Logo 10px. For example, change 10 to 0 if you want the Logo to be on the edge of the image.
Thank you everyone for your attention.
If people do not understand, you can comment or inbox HungVB directly for support.
All Right Reserved © 2015 By Hung Pro VN
Hung.Pro.VN Sharing Your Own Knowledge and Creative Thinking Every Day and Many Other Things.
Hung.Pro.VN Sharing Your Own Knowledge and Creative Thinking Every Day and Many Other Things.