How To Add Text Watermark To Blogger

HG Network November 24, 2018

How To Add Watermark in Blogger posts
Watermark is basically used to prevent your content from being getting copied and also to link your blog content to your name or brand.
Tutorial Description:

  1. Login to your Blogger account, then go to Theme > Edit HTML.
  2. Search here (CTRL+F) for the following highlighted code  <data:post.body/>
  3. Replace the code with this green code - <div class='hbzwatermark'><data:post.body/></div>
  4. Place following code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> just above </head> 
  5. Again search for following code ]]></b:skin> Place this code just above it 
  6. .hbzw {
     display: none;
     background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFHR7xm3p8zABA2zjS2Obl9s3XGWvpxNkYcClzqMoGVEJyYp6zj1IYTSvKtwDswenIwzh3D42TY1cFJI7e28tyYIufPG2pgsUx4XvzBWB68bvpSPv8JGoxZofEExJbV1vUq3PanR6npd0/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png") repeat-x;
     position: absolute;
     left: 0;
     width: 5000%;
     transform-origin: left center;
     -moz-transform-origin: left center;
     -webkit-transform-origin: left center;
     content: "";
     opacity: 0.5;
     z-index: -1;
     background-size: auto 30px;
}
 .hbzwatermark {
     position: relative;
     overflow: hidden;
     z-index: 1;
}
  7.  Place below code just above </body>
<script>
    $(document).ready(function() {
        $(".hbzwatermark").each(function() {
            var h = $(this).height();
            var w = $(this).width();
            var r = Math.atan(h / w);
            var a = r * 180 / Math.PI;
            $(this).prepend("<div class='hbzw'></div>");
            var n = $(".hbzwatermark .hbzw").css("background-size");
            var s = n.split(' ')[1];
            var q = s.replace("px", "");
            $(this).children(":first").css({
                "transform": "rotate(-" + a + "deg)",
                "-moz-transform": "rotate(-" + a + "deg)",
                "-webkit-transform": "rotate(-" + a + "deg)",
                "display": "block",
                "height": s,
                "bottom": -(q / 2) + "px"
            });
        });
    });
</script>
Bingo! Above process are completed now you can change text as per your requirements.
To Create Watermark Text Image Click here.

 Now check out your blog posts, you will find your watermark placed behind every blog post. For any issues related to above tutorial comment below. Stay Updated, Browse creatoracademyurdu.blogspot.com
Subscribe us and Get updates

Note: Like this post and Share with your friends, I’d love to hear from you in the comments below.
Article Source:
Tags:

Post a Comment

0 Comments