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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguJqD7o96lN6Jtf_22oRiQpL_Ax5dsHAkTs9kcfqqqZ2Opd9pY5qJ1838095gFpuqFoc1I9BRmtULKeL5c7RNugVSoW3xCcxxcmZQYICbL3BGTEB80v4jjMol_Uv4YyElTpLIwfnP7cSw/s1600/facebook.png" width="32" height="32" alt="Мы в Facebook" title=""/></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0vLu9GekOdmeVOuNsALaP1x5s63SWp_lweBLU87imefWnIFf8tr_NrhEws5kAoxTfPVYZH1XpJWqFDz81Ni9_PuV6lNqCtqNSAkV-MzTOEHgeoLc8Mv3TBD_iVQyCzFG0VV42_41SwrY/s1600/twitter.png" width="32" height="32" alt="Новости блога через Twitter" title=""/></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9L__mcXwktbSxfjJwmVb9wyfAWrk4XEcY9A1S5JEtsKelEgHa3_UNbx7vBngUGXATU_dERY85sJsD37QTUS1JK3a9PqHo6cjn0mou72dIFXyVESMGMb4c2iiTpGxyZVEK8GXFqIVYGRs/s1600/vkontakte.png" width="32" height="32" alt="Мы ВКонтакте" title=""/></a></li>
<li class="selected"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBt7Gx7xasD-gVLh0kpqEncp_KVod3LJgchi5sk3vdryPzRrWbDStZ4Z5W7T8UedrLU6F-lqrn11o3vNr5IKjEUcYSr930skH60CxU_kRK-PSha18RW6tw_GwvK7aXC2qNH4AqPLQxifI/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 комментария: