
Сначала показываю демо:
Иконки конечно подобрал не самые красивые, но для демо сгодятся :).
Установка.
Весь процесс я свёл к минимуму (в блоге должна быть ссылка на библиотеку 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 - та иконка, под которой изначально "висит" подсказка.
Автор скрипта.
Отличное решение! Оказывается изучать просторы не так уж и скучно)
ОтветитьУдалитьСпасибо :)
ОтветитьУдалить