How To Add Text Watermark To Blogger

4 comments
I founded too many questions for adding Watermark to blogger but no proper solution for it, so I decided to create tutorial for my users to add text watermark to blogger. Watermark helps you to reserve your content copyrights and to relate your blog content with your name or brand. If you want to add horizontal, vertical or diagonal text watermark to blogger just follow the given step by step tutorial with images and demo.
adding watermark to blogger


Steps : Adding Text Watermark to Blog Posts


adding watermark to blogger post demo




Step 1. Log in to your Blogger account, then go to Template > Edit HTML.


edit blogger template


Step 2. Click anywhere inside the code and search for following code ( CTRL+F ) :

<data:post.body/>


Step 3. Replace the code with this code :

Note : Their will be two codes replace both.

<div class='hbzwatermark'><data:post.body/></div>

placing code for watermark to post body



Step 4. Again click anywhere inside the code and search for following code :

]]></b:skin>


Step 5. Place this code just above it :

.hbzwatermark { background: transparent url("https://2.bp.blogspot.com/-x3m5Qr2P3UA/Vu7cNIfcUcI/AAAAAAAAAds/1ziODMCywIgVlr3quFx0SBtPmAYp74T7g/s1600/transparent_text_effect%25282%2529.png") repeat scroll 0% 0% / 200px auto; }

placing css for watermark to blog posts



Step 6. Configuration :

  • Replace https://2.bp.blogspot.com/-x3m5Qr2P3UA/Vu7cNIfcUcI/AAAAAAAAAds/1ziODMCywIgVlr3quFx0SBtPmAYp74T7g/s1600/transparent_text_effect%25282%2529.png  with your watermark text image URL.
  • Adjust the value 200 to adjust the size of the watermark text.

To Create Watermark Text Image Click here.
  • For Diagonal Watermark set 'Text rotation' = -45
  • For Horizontal Watermark set 'Text rotation' = 0
  • For Vertical Watermark set 'Text rotation' = 90
  • For Watermark Do not tick 'Draw text with outline' and neglect 'Outline thickness' & 'Outline color'.
  • Select 'Text color' such that your text is visible over it.
  • For example for white background set 'Text color' to "F0F0F0" and for Dark Background set it to "606060".


To Find the URL of the Watermark image click here


Step 7. Save Template.


That's it


Now checkout your blog posts you will find your watermark placed behind your blog posts. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

4 comments:

  1. Its really helpful. I m constantly looking for instructions for watermark and finally find it here.

    Thanks howbloggerz

    ReplyDelete
  2. This is really helpful for beginners. Thanks howbloggerz

    ReplyDelete
  3. Replies
    1. Hi Abdulaziz Abbas Waziri

      I will surely help you. Please provide the address of your blog via Contact form.

      Delete

Every comment is appreciated but keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted, including mentioning your blog unless necessary. Thanks for understanding!

Request Post