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

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

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

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

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

  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 поставлена решетка #. Это означает, что ссылка пустая, то есть некуда она не ведет. Если у Вас на блоге есть статья на ту тему, которая дает объяснение, то поставьте в это окошко ссылку на эту статью. Чтобы пользователь увидел только Вашу подсказку, оставьте, как есть.

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

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

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



Интересный и полезный контент

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

    1. Алексей Кобзарев Автор записи

      Если не сильно напихивать этими всплывалками контент, то не должно раздражать.

  1. Надежда Давыдова

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

    1. Надежда Давыдова

      Алексей, ну какой ты прямолинейный 🙂 Заставляешь лезть не в свое дело. http://validator.w3.org/check?uri=www.advdk.com это проверка твоей главной страницы

      1. Алексей Кобзарев Автор записи

        Сам я не буду там лазить, потому что у меня ничего не получается. Представляешь, захожу в валидатор, он мне показывает, что не поставлена кавычка в header. Открываю этот файл, смотрю, а там все стоит. Не знаешь, что это может быть. Ты сама исправляла свои ошибки в коде или поручала это дело специально обученным людям?

        1. Надежда Давыдова

          Алексей, на днях влезла в код и от этого получилось больше десятка лишних ошибок. Сама не знаю, как их исправить. Когда заказывала шаблон, следила, чтобы не было ошибок, просила их все исправить. Хочу тебе сказать, что многие «ошибки» — просто устаревшие способы написания. Прогресс постоянно изобретает новые способы и то, что было валидно вчера, сегодня уже ошибка. Одно знаю точно: если ошибок один-два десятка, это еще терпимо. Но если около сотни, тут и до фильтра недалеко.

        2. Алексей Кобзарев Автор записи

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

Добавить комментарий

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