Оригинальные способы сделать всплывающие подсказки

Приветствую!

Сегодня будет небольшая статья, которая подойдет блоггерам для вывода на своих блогах или сайтах всплывающие подсказки. Какие подсказки? Симпатичные и эффективные! Всплывающие подсказки можно сделать на любом участке Вашего веб-ресурса. При наведении мышки на область (картинку, ссылку, слова или фразу), будет всплывать текст.

Зачем это нужно? Было у Вас, когда-нибудь, такое: пишете статью, пишите и вдруг появляется необходимость написать какое-то, ну очень заумное слово, которое мало кто поймет? Если Вы блоггер, то по любому такое случалось, не один раз. Так вот, чтобы не объяснять потом это мудреное слово в комментариях своим посетителям, можно сделать это слово ссылкой и подсветить подсказкой.

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

  1. Вставить java-скрипт в шапку блога
  2. Воспользоваться специальным плагином

Сразу скажу, что в первом, что во втором способе, ничего сложного нет! Тем более у Вас есть я (автор блога). Покажу все на скриншотах.

Способы сделать всплывающие подсказки

Первый у нас по списку стоит Java-скрипт. Давайте начнем именно с него. Дальше мы будем работать с кодом и одним файлом нашей WordPress темы. Если у Вас статический сайт, то с ним! Для тех людей, которые бояться лезть в код своего блога или сайта, советую почитать вот эту статью.

Java-script для всплывающих подсказок

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

Wp-content/themes/vasha_tema

Корень сайта. Обычно это Publick.html или www

Зашли? Теперь блоги находят файл header.php, а сайты index.html. Внутри этих файлов найдите закрывающий тег </haed>. Перед ним вставьте специальный скрипт, которой скачаете [urlspan]отсюда[/urlspan]. Там простой текстовый файл! Я его не выкладываю прямо в записи блога, а даю скачать, чтобы не заниматься копирастией.

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

После того, как вставили скрипт между тегами, обязательно сохраните изменения. Теперь там, где хотите выводить подсказки, вставьте следующий код (это он — [urlspan]скачать[/urlspan]). Его нужно вставлять на блог в запись, режим текст. Статические сайты знают что делать? Открывайте тот файл, в нем лежит умнейшее слово, и вставляйте рядом с ним код, который уже скачали. Он под цифрой 2 для всплывающих подсказок!

Чтобы пользователь понимал, что для подсказки нужно нажать именно на тот объект, который хотите до него донести. Вместо знака вопроса, поставьте вводное слово, например «Иди сюда», «Наведи на меня» и т.д. Тут уже включайте свою фантазию!

Всплывающая подсказка на блоге

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

Плагин для вывода всплывающих подсказок

Для начала скачайте его отсюда. Загружайте и устанавливайте его на блог, как обычно это всегда делали.

Когда плагин загрузили и активировали, при добавлении новой записи в редакторе, то есть в самом низу будет такое окно. Оно будет генерировать всплывающие подсказки. Как видите, в этом окне две главных строки:

Как сгенерировать всплывающую подсказку

  • Текст. Напишите ту подсказку, которая будет всплывать при наведении мыши.
  • Тип. Ее отображение, как ссылки или картинки.

В поле URL поставлена решетка #. Это означает, что ссылка пустая, то есть некуда она не ведет. Если у Вас на блоге есть статья на ту тему, которая дает объяснение, то поставьте в это окошко ссылку на эту статью. Чтобы пользователь увидел только Вашу подсказку, оставьте, как есть.

Ниже идут дополнительные настройки. Тут можно экспериментировать, как хочется или оставить все как есть. После того, как сделаете оформление для всплывающей подсказки, ниже возьмите код, который нужно вставить в ту запись, где хотите выводить подсказку. Главное вставлять этот код в режиме «Текст».

На этом у меня все. Надеюсь, пост про всплывающие подсказки Вам помог и был интересен. Подписывайтесь на обновления блога, чтобы не пропускать новые статьи. До встречи!

С уважением, Алексей Кобзарев

12 комментариев

Ваш комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *