Как добавить текстовый 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 :

8 комментариев:

  1. Конечно, хочется защитить свой контент. И если уж что-то скопировали, то первоисточник не остался бы в безвестности... Единственное, что смущает в таких водяных знаках - не будут ли они делать страницу аляповатой и мешать чтению... Думаю)))

    ОтветитьУдалить
    Ответы
    1. Валерия. На всех блогах по разному. В зависимости и цвете страницы и самого цвета лого. А по поводу защиты можно воспользоваться некоторыми способами http://www.shpargalochki.ru/2015/08/neskolko-sposobov-zashhity-teksta-ot-kopirovanija.html
      и то в некоторых есть лазейки.

      Удалить
    2. Спасибо, Вика! Планирую озадачиться этим вопросом. Блог у меня молодой, но уже видела, что копируют, правда, по-честному - со ссылкой на источник. А лазейки, я так поняла, есть везде).

      Удалить
  2. Валерия, да не за что. Везде пролезут умники. А если с активной ссылкой на блог копируют, то это очень хорошо. Конечно в идеале бы было если к тому же статья размещена на качественном ресурсе.

    ОтветитьУдалить
  3. Очень полезная и нужная статья. Но есть опасения, что я сама с таким кодом не справлюсь. А его просто необходимо установить!

    ОтветитьУдалить
    Ответы
    1. Вика, для всех экспериментов обычно делают ещё один тестовый блог и на нём тренируются.

      Удалить
  4. спасибо. уже видел, как и фотки другие блоги брали, когда-то просто ставил водяной знак, но понимаю, что если кто-то захотел... возьмет.статья интересная, Ваш блог,Вика, по этой платформе, просто сокровище.

    ОтветитьУдалить
    Ответы
    1. Привет, Семён. Утащат кто в теме. С фотками так вообще лучше через всю посередине ставить. а так ничего 100 процентов не защищено.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск