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

ToolTipЯ уже имел честь рассказать вам, как расширить функционал комментариев при помощи смайликов, цитат, картинок. Но как донести до читателя информацию, что все это у вас в блоге есть, и как всем этим пользоваться? Можно, конечно, задействовать стандартную опцию "Сообщение формы создания комментариев", имеющуюся в настройках Blogger (Blogspot), и под/над формой комментариев дать подробное описание синтаксиса всех наших добавок, но честно скажу, выглядеть это будет довольно громоздко. Лучше мы воспользуемся всплывающей подсказкой, которая, будучи свернутой, займет всего лишь одну строчку.

Так как я не собираюсь продавать вам кота в мешке, то предлагаю ознакомиться с тем, что мы получим за счет использования описываемой в статье методики. Опустите взгляд вниз, к форме отправки комментариев. Видите прямо под/над ней фразу "Тэги, допустимые в комментариях"? Подведите к ней курсор и вы увидите всплывающую подсказку по тэгам и смайликам. Нравится? Если да, тогда читаем дальше :-)

Итак, открываем редактор шаблона (Дизайн->Изменить HTML), ставим галочку напротив "Расширить шаблоны виджета", после чего находим следующую строку:
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
Эта строка будет встречаться в коде четыре раза (на старых шаблонах только два). Нас интересует вторая и четвертая! Под каждую из этих двух строк подводим следующий код:
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<span onMouseOut='document.getElementById("popup").style.visibility = "hidden"' onMouseOver='document.getElementById("popup").style.visibility = "visible"' style='cursor: help; color: #138FD8;'>Тэги, допустимые в комментариях</span>
<div id='popup' style='visibility:hidden; position:absolute; margin-top:-205px; *margin-top:-187px; *margin-left:-16px; *left:0;'><img height='186' src='https://lh6.googleusercontent.com/-9bkBOZ6VuWI/T0ixVPI1FfI/AAAAAAAAAgQ/UDl9qp4OnRw/s585/tags.png' width='585'/></div>
Плюс, задействуем таблицу стилей. Под строкой "/* Comments" и вставляем следующий код:
/* Comments
----------------------------------------------- */
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) { 
#popup { margin-top: -218px !Important; }
} 
Если вы собираетесь как под копирку использовать мою всплывающую подсказку, то на этом можно и закончить. Но если вы, к примеру, используете только смайлики, но не используете виджеты цитат и картинок, то вам нужна немного другая подсказка, не так ли? Поэтому расскажу о приведенном выше коде более подробно.

Если вы присмотритесь к коду, то заметите, что всплывающая подсказка - это самая обыкновенная картинка:

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

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

Итак, вернемся к нашему коду. Обратите внимание на третью строку первого блока кода. Там имеется параметр margin-top:-205px. В нем задается вертикальный отступ всплывающей картинки от ключевой фразы. Чем меньше число, тем больше отступ.

Увы, разные браузеры, порой, по разному рассчитывают отступы и чтобы подсказка одинаково выглядела для каждого из них, мы воспользуемся дырами в восприятии CSS-кода браузерами - CSS-хаками. Так, рядом с описанным в прошлом абзаце параметром имеется еще один: *margin-top:-187px. Видите звездочку? Это один из CSS-хаков. Благодаря звездочке этот параметр воспринимают только браузеры IE6 и IE7 (остальные браузеры его игнорируют). Как раз это нам и нужно, так как эти браузеры рассчитывают отступ иначе, нежели подавляющее большинство, и этой строкой мы вносим корректировку.

Теперь взгляните на второй блок кода. Там нас интересует параметр margin-top:-218px. Весь второй блок кода - это еще один CSS-хак. Такое написание понимает только браузер Opera, у которого тоже свой взгляд на размер отступа.

Если вы измените любой из этих параметров, исходя из размеров своей картинки, то остальные нужно будет подогнать, изменив на аналогичную величину. То есть, если -205 вашими усилиями превратится в -255, то -187 придется переделать в -237, а -218 нужно будет заменить на -268.

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

Вот, собственно, и все, о чем я хотел рассказать в данной статье Не стесняйтесь спрашивать и уточнять, если что-то не поняли

Комментариев: 38

  1. Спасибо, получилось! Стало лучше...

    ОтветитьУдалить
  2. А вы не знаете, почему у меня так пишет? Это я пыталась ссылку сделать
    [img]http://s001.radikal.ru/i193/1203/5c/881a28fbfd6c.jpg[/img]

    ОтветитьУдалить
    Ответы
    1. Ссылка у Вас обрамлена нестандартными кавычками. Сравните их с кавычками, обрамляющими "Румяные щечки" :gigi:

      Удалить
  3. Вот, блин... А я столько мучилась, понять не могла, в чем дело... :wall: Спасибо, Тимофей...

    ОтветитьУдалить
  4. Этот новый интерфейс блоггера бесит. Хоть убей в дизайне не могу найти "Изменить HTML

    ОтветитьУдалить
  5. А всё нашла. Теперь оказывается нужно щёлкать не Дизайн, а Шаблон, а под ним уже изменить HTML

    ОтветитьУдалить
  6. Всё здорово получилось!!! Правда пресловутую строчку комментс я так и не могу найти!

    ОтветитьУдалить
  7. У меня получилось и с установкой подсказки!8-O С Вашими объяснениями я, пожалуй, еще на что-нибудь решусь!:) Спасибо!!!

    ОтветитьУдалить
    Ответы
    1. Я же Вам говорил, что Вы себя недооцениваете ;-)

      Удалить
  8. Здравствуйте! Спасибо за подезную статью! У меня получилось!!! Все значки заменились на смайлики!!! :) Только вот всплывающая подсказка у меня почему-то не появилась... Хотя я очень старалась, и всё делала так, как написано. :(

    ОтветитьУдалить
  9. Ой, извиняюсь!:wall Всё отлично, это оказывается я неувязок, поместила код не по 1 и 2 строки а под 1 и 3! Спасибо, вы не представляете себе как я рада!!! Я взяла вашу картинку для подсказки, следовательно теперь ещё нужно и теги организовать! Пошла искать, у вас же наверняка есть такая информация?! :)

    ОтветитьУдалить
    Ответы
    1. Есть конечно :-) Рад, что Вы так быстро все осваиваете 8-)

      Удалить
  10. [q]Эта строка будет встречаться в коде четыре раза (на старых шаблонах только два). Нас интересует вторая и четвертая! Под каждую из этих двух строк подводим следующий код:[/q]
    Шаблон "Простой". Этой строки нет вообще :~(
    Может ее можно куда-то просто дописать?

    ОтветитьУдалить
    Ответы
    1. Вы "Расширить шаблоны виджета" нажать не забыли?

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

    ОтветитьУдалить
  12. Разобралась, то что подсвечено голубым не надо было копировать:-[

    ОтветитьУдалить
    Ответы
    1. Всяко бывает.. Главное результат получен! :D

      Удалить
  13. Не могу найти "Расширить шаблоны виджета" есть только список виджетов...

    ОтветитьУдалить
    Ответы
    1. Уже не нужно ставить эту галочку. Разработчики Blogger видоизменили интерфейс и данная необходимость отпала.

      Удалить
  14. А можно добавлять теги в посты?

    ОтветитьУдалить
    Ответы
    1. Имеется в виду посты, которые статьи? Или посты, которые комментарии?
      Если первое, то ограничений по использованию тэгов нет. Если второе, то число возможных тэгов ограничено. Они все представлены в тексте подсказки.

      Удалить
  15. A gde dolzhno vsplyvat okno? :(

    ОтветитьУдалить
    Ответы
    1. Посмотрите прямо под этим моим комментарием. Там есть ссылка "Тэги, допустимые в комментариях". Наведите на нее мышкой.

      Удалить
  16. Здравствуйте!
    Благодаря вам, установила в своем блоге дополнительные возможности комментариев. В кодах не сильна, но описано все понятно, и как-то так аккуратно установилось все и работало отлично. Но недавно, вдруг, сперва пропала аватарка анонимных комментаторов, затем ушли смайлы и возможность добавления цитаты и изображений. Как я поняла, заглянув в шаблон, скрипты находятся на Dropbox, но возникли какие-то проблемы с доступом.
    Осмотрелась здесь, время конечно много прошло.. Но внизу странички заметила 2011-2016, что вселяет надежду) Пожалуйста, если можно можно чем-то помочь моей проблеме, подскажите как. Очень уж хороши эти дополнительные функции комментариев..

    ОтветитьУдалить
    Ответы
    1. Фух... Вроде все восстановил, насколько возможно :-)
      Переопределяйте ссылки на скрипты!

      P.S. Если найдете, что я где-то что-то упустил - пишите. Поправлю!

      Удалить
    2. Огромное спасибо за помощь! Все опять чудесно заработало)) Счастье есть!
      Хочу сказать, что в то время, когда искала полезняшки на свой блог, то в вашем нашла самые удачные и интересные варианты. Еще раз спасибо!

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

      Удачи! :-)

      Удалить
    4. Вот это класс!
      Удачи и Вам во всех ваших начинаниях! :)

      Удалить
  17. Этот комментарий был удален автором.

    ОтветитьУдалить
    Ответы
    1. Пошукайте в настройках блога. Похоже здесь не в коде проблема, а именно в настройках вы где-то намудрили в разделе отображения комментариев.

      Удалить
    2. Видимо, после ремонта микроразметки код на меня обиделся, ну и пес с ним. Сама возможность комментирования осталась, уже хорошо. Извините за беспокойство.

      Удалить
    3. Можно зарегистрировать левый тестовый блог, собрать на нем грамотный безглючный дизайн, а потом просто кодом этого дизайна заменить код того, где Вы напортачили. На текст статей и комментарией это не никак не отразится. Поменяется только дизайн.

      А вообще, перед тем, как лезть в живой код, я Вам настоятельно рекомендую делать его резервную копию. Благо такая возможность в Blogger предусмотрена. В настройках, вкладка "Шаблон" и в правом верхнем углу кнопка "Резервное копирование и восстановление".

      Удалить
    4. Спасибо за совет! С изначально сохраненным шаблоном не догадалась попробовать замену кода. Отсылала его по почте автору "ремонта микроразметки". Ошибки не искались, были применены те же изменения, которые я предположительно неправильно сделала. Хм, а получилось то же безобразие, даже еще хуже. Хорошо, что на тестовом смотрела.. А можно же попробовать как будет с сохраненным, до "ремонта", действительно)

      Удалить

Хотите подписать свой комментарий, но у вас нет аккаунта? Выберите в выпадающем списке Имя/URL.
Вы сможете вписать свои имя или ник. Поле для указания URL можно оставить пустым.

Тэги, допустимые в комментариях