--> How To Add Text Watermark To Blogger (20 Styles) | Experience Lab - Online business creation and development guide for bloggers and startups

How To Add Text Watermark To Blogger (20 Styles)

0 0 Wednesday, March 23, 2016 Edit this post

Updated on: January 21, 2018 I found too many questions about Adding watermark in blogger posts but no appropriate solution, so I decided ...

Updated on: January 21, 2018

I found too many questions about Adding watermark in blogger posts but no appropriate solution, so I decided to create a tutorial for my users to let them know how to add text watermark to their Blogspot blog.

Watermark is basically used to prevent your content from being getting copied and also to link your blog content to your name or brand. For adding a horizontal, vertical or diagonal text watermark (repeating or non-repeating - multi-line or single-line) to the blogger template just follow the given step by step tutorial with images and a demo.

Add Text Watermark To Blogger Posts

Steps : Adding Text Watermark to Blog Posts

Add Watermark To Blogger Template
DEMO

Step 1. Login to your Blogger account, then go to Theme > Edit HTML.

Edit HTML of Theme

Step 2. Click anywhere inside the code and search for the 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>
Watermark for blogspot blogs

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

]]></b:skin>

Step 5. Place this code just above it:

  • For Horizontally Repeating Multi-line Watermark
    • .hbzwatermark:before {
        display: block;
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png");
        background-repeat: repeat;
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        width: 100%;
        content: "";
        z-index: -1;
        background-size: auto 30px;
        opacity: 0.5;
    }
    .hbzwatermark {
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
  • For Vertically Repeating Multi-line Watermark (Top to Bottom)
    • .hbzwatermark::before {
        display: block;
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png");
        position: absolute;
        height: 200%;
        top: -100%;
        left: 50%;
        width: 5000%;
        transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform-origin: left center;
        -moz-transform-origin: left center;
        -webkit-transform-origin: left center;
        content: "";
        z-index: -1;
        background-size: auto 30px;
        opacity: 0.5;
        background-repeat: repeat;
    }
    .hbzwatermark {
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
  • For Vertically Repeating Multi-line Watermark (Bottom to Top)
    • .hbzwatermark::before {
        display: block;
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png");
        position: absolute;
        height: 200%;
        bottom: -100%;
        left: 50%;
        width: 5000%;
        transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform-origin: left center;
        -moz-transform-origin: left center;
        -webkit-transform-origin: left center;
        content: "";
        z-index: -1;
        background-size: auto 30px;
        opacity: 0.5;
        background-repeat: repeat;
    }
    .hbzwatermark {
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
  • For Diagonally Repeating Multi-line Watermark (Bottom-Left to Top-Right)
    • .hbzwatermark::before {
        display: block;
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png");
        position: absolute;
        height: 200%;
        bottom: -100%;
        left: 0%;
        width: 5000%;
        transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform-origin: left center;
        -moz-transform-origin: left center;
        -webkit-transform-origin: left center;
        content: "";
        z-index: -1;
        background-size: auto 30px;
        opacity: 0.5;
        background-repeat: repeat;
    }
    .hbzwatermark {
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
  • For Diagonally Repeating Multi-line Watermark (Top-Left to Bottom-Right)
    • .hbzwatermark::before {
        display: block;
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png");
        position: absolute;
        height: 200%;
        top: -100%;
        left: 0%;
        width: 5000%;
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform-origin: left center;
        -moz-transform-origin: left center;
        -webkit-transform-origin: left center;
        content: "";
        z-index: -1;
        background-size: auto 30px;
        opacity: 0.5;
        background-repeat: repeat;
    }
    .hbzwatermark {
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

Step 6. Configuration:

  • For Horizontally Non-Repeating Multi-line Watermark (Left to Right)
    • .hbzwatermark::before {
         display: block;
         background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png");
         position: absolute;
         height: 200%;
         width: 100%;
         transform: rotate(-90deg);
         -moz-transform: rotate(-90deg);
         -webkit-transform: rotate(-90deg);
         transform-origin: center;
         -moz-transform-origin: center;
         -webkit-transform-origin: center;
         content: "";
         z-index: -1;
         background-size: auto 30px;
         opacity: 0.5;
         background-repeat: repeat-y;
         background-position: center;
         top: -50%;
    }
    .hbzwatermark {
         position: relative;
         overflow: hidden;
         z-index: 1;
    }
  • For Horizontally Non-Repeating Multi-line Watermark (Right to Left)
    • .hbzwatermark::before {
         display: block;
         background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png");
         position: absolute;
         height: 200%;
         width: 100%;
         transform: rotate(90deg);
         -moz-transform: rotate(90deg);
         -webkit-transform: rotate(90deg);
         transform-origin: center;
         -moz-transform-origin: center;
         -webkit-transform-origin: center;
         content: "";
         z-index: -1;
         background-size: auto 30px;
         opacity: 0.5;
         background-repeat: repeat-y;
         background-position: center;
         top: -50%;
    }
    .hbzwatermark {
         position: relative;
         overflow: hidden;
         z-index: 1;
    }

    Step 6. Configuration:

  • For Vertically Non-Repeating Multi-line Watermark
    • .hbzwatermark::before {
         display: block;
         background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png");
         position: absolute;
         height: 100%;
         width: 100%;
         content: "";
         z-index: -1;
         background-size: auto 30px;
         opacity: 0.5;
         background-repeat: repeat-y;
         background-position: center;
    }
    .hbzwatermark {
         position: relative;
         overflow: hidden;
         z-index: 1;
    }

    Step 6. Configuration:

    .hbzw {
         display: none;
         background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png") repeat-y;
         background-position: center;
         position: absolute;
         left: 0;
         top: -50%;
         width: 100%;
         height: 200%;
         opacity: 0.5;
         transform-origin: center;
         -moz-transform-origin: center;
         -webkit-transform-origin: center;
         content: "";
         z-index: -1;
         background-size: auto 30px;
    }
     .hbzwatermark {
         position: relative;
         overflow: hidden;
         z-index: 1;
    }

    Step 6. Place following code just above </head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    Note: If the above is already present then, there is no need to place it again.

    Step 7. Place following code just above </body>

  • For Diagonally Non-Repeating Multi-line Watermark (Top-Left to Bottom-Right)
    • <script>
        $(document).ready(function() {
            $(".hbzwatermark").each(function() {
                var h = $(this).height();
                var w = $(this).width();
                var r = Math.atan(w / h);
                var a = r * 180 / Math.PI;
                $(this).prepend("<div class='hbzw'></div>");
                $(this).children(":first").css({
                    "transform": "rotate(-" + a + "deg)",
                    "-moz-transform": "rotate(-" + a + "deg)",
                    "-webkit-transform": "rotate(-" + a + "deg)",
                    "display": "block"
                });
            });
        });
    </script>
  • For Diagonally Non-Repeating Multi-line Watermark (Top-Right to Bottom-Left)
    • <script>
        $(document).ready(function() {
            $(".hbzwatermark").each(function() {
                var h = $(this).height();
                var w = $(this).width();
                var r = Math.atan(w / h);
                var a = r * 180 / Math.PI;
                $(this).prepend("<div class='hbzw'></div>");
                $(this).children(":first").css({
                    "transform": "rotate(" + a + "deg)",
                    "-moz-transform": "rotate(" + a + "deg)",
                    "-webkit-transform": "rotate(" + a + "deg)",
                    "display": "block"
                });
            });
        });
    </script>

    Step 8. Configuration:

  • For Horizontally Repeating Single-line Watermark
    • .hbzwatermark::before {
         display: block;
         background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png");
         position: absolute;
         height: 100%;
         width: 100%;
         content: "";
         z-index: -1;
         background-size: auto 30px;
         opacity: 0.5;
         background-repeat: repeat-y;
         background-position: center;
    }
    .hbzwatermark {
         position: relative;
         overflow: hidden;
         z-index: 1;
    }

    Step 6. Configuration:

  • For Vertically Repeating Single-line Watermark (Top to Bottom)
    • .hbzwatermark::before {
         display: block;
         background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png");
         position: absolute;
         height: 100%;
         width: 5000%;
         transform: rotate(90deg);
         -moz-transform: rotate(90deg);
         -webkit-transform: rotate(90deg);
         transform-origin: center;
         -moz-transform-origin: center;
         -webkit-transform-origin: center;
         content: "";
         z-index: -1;
         background-size: auto 30px;
         opacity: 0.5;
         background-repeat: repeat-x;
         background-position: center;
         left: -2450%;
    }
     .hbzwatermark {
         position: relative;
         overflow: hidden;
         z-index: 1;
    }
  • For Vertically Repeating Single-line Watermark (Bottom to Top)
    • .hbzwatermark::before {
         display: block;
         background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png");
         position: absolute;
         height: 100%;
         width: 5000%;
         transform: rotate(-90deg);
         -moz-transform: rotate(-90deg);
         -webkit-transform: rotate(-90deg);
         transform-origin: center;
         -moz-transform-origin: center;
         -webkit-transform-origin: center;
         content: "";
         z-index: -1;
         background-size: auto 30px;
         opacity: 0.5;
         background-repeat: repeat-x;
         background-position: center;
         left: -2450%;
    }
     .hbzwatermark {
         position: relative;
         overflow: hidden;
         z-index: 1;
    }

    Step 6. Configuration:

    .hbzw {
         display: none;
         background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/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;
    }

    Step 6. Place following code just above </head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    Note: If the above is already present then, there is no need to place it again.

    Step 7. Place following code just above </body>

  • For Diagonally Repeating Single-line Watermark (Top-Left to Bottom-Right)
    • <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,
                    "top": -(q / 2) + "px"
                });
            });
        });
    </script>
  • For Diagonally Repeating Single-line Watermark (Bottom-Left to Top-Right)
    • <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>

    Step 8. Configuration:

  • For Horizontal Single-Word Watermark
    • .hbzwatermark::before {
         display: block;
         background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png");
         position: absolute;
         height: 100%;
         width: 100%;
         content: "";
         z-index: -1;
         background-size: auto 30px;
         opacity: 0.5;
         background-repeat: no-repeat;
         background-position: center;
    }
     .hbzwatermark {
         position: relative;
         overflow: hidden;
         z-index: 1;
    }

    Step 6. Configuration:

  • For Vertical Single-Word Watermark (Bottom to Top)
    • .hbzwatermark::before {
         display: block;
         background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png");
         position: absolute;
         height: 100%;
         width: 100%;
         transform: rotate(-90deg);
         -moz-transform: rotate(-90deg);
         -webkit-transform: rotate(-90deg);
         transform-origin: center;
         -moz-transform-origin: center;
         -webkit-transform-origin: center;
         content: "";
         z-index: -1;
         background-size: auto 30px;
         opacity: 0.5;
         background-repeat: no-repeat;
         background-position: center;
    }
     .hbzwatermark {
         position: relative;
         overflow: hidden;
         z-index: 1;
    }
  • For Vertical Single-Word Watermark (Top to Bottom)
    • .hbzwatermark::before {
         display: block;
         background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png");
         position: absolute;
         height: 100%;
         width: 100%;
         transform: rotate(90deg);
         -moz-transform: rotate(90deg);
         -webkit-transform: rotate(90deg);
         transform-origin: center;
         -moz-transform-origin: center;
         -webkit-transform-origin: center;
         content: "";
         z-index: -1;
         background-size: auto 30px;
         opacity: 0.5;
         background-repeat: no-repeat;
         background-position: center;
    }
     .hbzwatermark {
         position: relative;
         overflow: hidden;
         z-index: 1;
    }

    Step 6. Configuration:

    .hbzw {
         display: none;
         background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png") no-repeat;
         background-position: center;
         position: absolute;
         left: 0;
         width: 100%;
         bottom: 50%;
         transform-origin: center;
         -moz-transform-origin: center;
         -webkit-transform-origin: center;
         content: "";
         opacity: 0.5;
         z-index: -1;
         background-size: auto 30px;
    }
     .hbzwatermark {
         position: relative;
         overflow: hidden;
         z-index: 1;
    }

    Step 6. Place following code just above </head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    Note: If the above is already present then, there is no need to place it again.

    Step 7. Place following code just above </body>

  • For Diagonal Single-Word Watermark (Top-Left to Bottom-Right)
    • <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,
                    "margin-bottom": -(q / 2) + "px"
                });
            });
        });
    </script>
  • For Diagonal Single-Word Watermark (Bottom-Left to Top-Right)
    • <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,
                    "margin-bottom": -(q / 2) + "px"
                });
            });
        });
    </script>

    Step 8. Configuration:

  • Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJp6b92HhA7soR7FR_HiRD9oQ7DWnIotjJNEaI-jZCI41HV72fAaslO5-H94bLp_e5ayPQ_dNhTUA_ErwgTl_-Qqj2eD1KxCVoPN-UHbmQBXHdMKPnZ4xtgjuj1qAluOyNdidlLLLu2k/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png with your watermark text image URL.
  • Adjust the value 30px to adjust the size of the watermark text.
  • Adjust the value 0.5 in between 0.1 - 1.0 to adjust the transparency of watermark.

To Create Watermark Text Image Click here.

  • Type your 'Text'.
  • Set 'Font size' to 50 from dropdown box.
  • Set 'Margin' to 6.
  • Select yours watermark 'Text color' such that your post text is visible over it.
  • Choose your Font.
  • Click Generate and save the image.

Read: How To Generate The URL Of An Image (Saved in Computer).

Step 7. Save Theme.

That's it

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 Howbloggerz! :)

Labels:

SHARE:

Twitter Facebook Google Pinterest

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: How To Add Text Watermark To Blogger (20 Styles)
How To Add Text Watermark To Blogger (20 Styles)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoRPectI43SA7xXwukNH0aBSddPrWvRwXrOcM2Drjr6IFIGNnBw-eNCsyQwZHMA4cZzUFC8-AkjZvNVq4sihonq9UWJcoRKRsSWdWvm6wodyB5WopqV194arznl6UxBsQzIjEo7GNRrc8/s1600/Add-text-watermark-to-blogger.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoRPectI43SA7xXwukNH0aBSddPrWvRwXrOcM2Drjr6IFIGNnBw-eNCsyQwZHMA4cZzUFC8-AkjZvNVq4sihonq9UWJcoRKRsSWdWvm6wodyB5WopqV194arznl6UxBsQzIjEo7GNRrc8/s72-c/Add-text-watermark-to-blogger.png
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2016/03/how-to-add-text-watermark-to-blogger-20.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2016/03/how-to-add-text-watermark-to-blogger-20.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy