Как добавить текстовый watermark в Blogger

Всем, привет. Как добавить текстовый водяной знак в свой блог Blogspot. Мы привыкли, что  водяной знак (watermark), наложенный на изображение в виде надписи или логотипа, указывает на его первоисточник - конкретного человека, конкретный веб-сайт или иной проект в Интернете, которым принадлежит авторство на это изображение.

Попробуйте установить watermark на все статьи, чтобы связать содержимое вашего блога с вашим именем  или брендом.

Посмотрите на тестовом блоге, как примерно это будет выглядеть.

демонстрация

Как добавить текстовый водяной знак в блог.

1. Идём во вкладку Тема и сделаем резервное копирование.

2. С помощью клавиш CTRL + F ( читаем здесь), находим вот такой фрагмент кода

<data:post.body/>

таких вхождений в шаблоне может быть несколько. У меня на одном тестовом блоге было 4.

Все их нужно заменить на

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

3. Там же в шаблоне перед строкой ]]></b:skin> нужно вставить следующий код

.hbzwatermark::before {
    display: block;
    background: url("https://1.bp.blogspot.com/-uREyJXjuSeA/W-PZpI5gtoI/AAAAAAAALIc/4elEZvnX4LI7iKiedg4Exvre5OL0KPGywCLcBGAs/s1600/%25D0%2594%25D0%25B8%25D0%25B7%25D0%25B0%25D0%25B9%25D0%25BD%2B%25D0%25B1%25D0%25B5%25D0%25B7%2B%25D0%25BD%25D0%25B0%25D0%25B7%25D0%25B2%25D0%25B0%25D0%25BD%25D0%25B8%25D1%258F.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.1;
    background-repeat: repeat;
}
.hbzwatermark {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

Зелёным цветом я выделила адрес картинки - надписи водяного знака. Я воспользовалась сервисом Crello и за пару минут создала картинку в формате PNG. Вы можете воспользоваться своими вариантами. И естественно замените картинку на ваш вариант.

отрегулируйте значение размера знака  auto 30px; на нужный
отрегулируйте значение opacity: 0.1; в диапазоне от 0,1 до 1,0 для установки прозрачности  водяного знака.

Не забудьте сохранить шаблон и посмотрите блог. 

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :