Blogger не для чайников: Иконки с подсказками

Выкопал на бескрайних просторах интернета маленькое меню под названием Horizontal Tooltips Menu, до безобразия простое: иконки + к каждой в сером пузырике прилагается маленькая текстовая подсказка. Основное применение усматриваю в пиаре социальных кнопок своего блога, типа: фейсбук, вконтакте и т.п.

Сначала показываю демо:

Иконки конечно подобрал не самые красивые, но для демо сгодятся :).

Установка.
Весь процесс я свёл к минимуму (в блоге должна быть ссылка на библиотеку jQuery). Достаточно скачать эти два файла:
open.js
iconsmenu.css
И положить на свой внешний хостинг.

Затем в голову шаблона блога, в <head></head> вставить линки на эти файлы:

<script type="text/javascript" src="http://ваш-хостинг.ру/open.js"></script> 
<link type='text/css' rel='stylesheet' href="http://ваш-хостинг.ру/iconsmenu.css" />

Если что-то захотите поменять во внешнем виде, редактируйте стили в файле iconsmenu.css. В нём я уже записал пути для картинок head и tail (формирующих серый пузырик), которые переправил на хостинг пикасы.

Html код для установки в пост или html виджет блоггера:

<div id="menu">
<ul>
<li><a href="#"><img src="http://3.bp.blogspot.com/-t28a3NPgy0U/TrECtXpNHSI/AAAAAAAAGxM/GD2ffgB7hRk/s1600/facebook.png" width="32" height="32" alt="Мы в Facebook" title=""/></a></li>
<li><a href="#"><img src="http://3.bp.blogspot.com/--aBJNviNA28/TrECtviS_ZI/AAAAAAAAGxY/4gkGDMFoYB8/s1600/twitter.png" width="32" height="32" alt="Новости блога через Twitter" title=""/></a></li>
<li><a href="#"><img src="http://3.bp.blogspot.com/-cFrtS4Li_Yo/TrECtzVsJ_I/AAAAAAAAGxk/Fk6bcle1s2Y/s1600/vkontakte.png" width="32" height="32" alt="Мы ВКонтакте" title=""/></a></li>
<li class="selected"><a href="#"><img src="http://2.bp.blogspot.com/-27v4ylEvuC8/TrECuIylo1I/AAAAAAAAGxw/BKIDt9_IyBI/s1600/yandex.png" width="32" height="32" alt="Следите за блогом в Я.ру" title=""/></a></li>
</ul>
<div id="box">
<div class="head">
</div>
</div>
</div>

Посмотрите внимательно. Здесь заданы теги для каждого элемента нашего небольшого меню. В alt записывается содержимое пузирика подсказки. А a href="#" должно содержать ссылку вместо #. li class="selected - та иконка, под которой изначально "висит" подсказка.

Автор скрипта.

Иконки с подсказками

2 комментария: