JS Animated. Как добавить кнопку «pin it»

Из этого туториала Вы узнаете, как добавить кнопку Pin it в Адаптивные шаблоны сайтов.

Если Вы хотите самостоятельно создать кнопку, Вам нужно, во первых, решить, какую кнопку «Pin It» Вы хотите добавить. Есть 3 типа кнопок, из которых Вы можете выбирать:

• При наведении курсора на изображение: Когда пользователь наводит курсор мыши на изображение, отображается кнопка «Pin It»;

• Любое изображение: Если пользователь нажимает на кнопку, он может «прикрепить» любое изображение на сайте. Эту кнопку просто создать;

• Одно изображение: Это кнопка «Pin It» для одного изображения/элемента на вашей странице. Этот вариант требует более обширной работы с кодом.

Давайте узнаем, как создать кнопку третьего типа — Одно изображение (One image):

1. Перейдите на сайт Мастера создания виджетов.

2. Выберите Одно изображение (One image) в разделе Тип кнопки (Button type).

3. Настройте размер, форму и изображение вашей кнопки.

4. Добавьте ссылки на страницы, на которых есть элемент, для которого Вы хотите создать кнопку «Pin It» (это может быть ваша Домашняя страница или любая другая страница вашего сайта). Вы можете также добавить описание вашего элемента/изображения:

   

5. Предварительно ознакомьтесь с кнопкой, наведя курсором мышки на изображение-образец. Вы можете также нажать на кнопку «Pin It», для того чтобы проверить, как она работает.

6. Если Вы довольны кнопкой, скопируйте код в разделе Скопируйте код (Copy the code) и вставьте его в нужный файл (в нашем случае, это файл index.html) рядом с нужным элементом страницы:

   

7. Последним шагом является добавление pinit.js на страницу (только один раз). Добавьте код перед закрывающим тегом /body каждой страницы, где Вы хотите отобразить кнопку на вашем сайте:

   

8. Сохраните изменения и обновите страницу вашего сайта.

Вы можете также ознакомиться с детальным видео-туториалом ниже: