Главная » 2013 » Ноябрь » 15 » Набор кнопок
11:27:28
Набор кнопок


Простые и удобные кнопки. Сюда входят кнопки таких сайтов, как: Google +, Facebook, Вконтакте, Twitter, RSS,YouTube,Skype и др. Всего 12 кнопок. При наведении указателя мыши на кнопку, выбранная иконка подсвечивается (становится ярче).

В то место, где будут кнопки ставим данный код. Потом ссылки настраиваем под свой сайт, ненужные кнопки можно убрать. Также можно поменять расположение кнопок.
Код
<div id='social_icns'>
<a href='javascript://' id='gp'></a><b></b>
<a href='javascript://' id='fb'></a><b></b>
<a href='javascript://' id='vk'></a><b></b>
<a href='javascript://' id='tw'></a><b></b>
<a href='javascript://' id='rss'></a><b></b>
<a href='javascript://' id='dr'></a><b></b>
<a href='javascript://' id='yt'></a><b></b>
<a href='javascript://' id='fl'></a><b></b>
<a href='javascript://' id='en'></a><b></b>
<a href='javascript://' id='sk'></a><b></b>
<a href='javascript://' id='be'></a><b></b>
<a href='javascript://' id='sc'></a>
</div>

В предыдущем коде [ss]b[/ss][ss]/b[/ss] - это пробел между кнопками (если не разбираетесь).

Затем в CSS вашего сайта ставим код:
Код
/*-- Social Icons --*/
#social_icns a {width:64px;height:64px;background:url('http://forweb.ucoz.org/SocialIcons.png') no-repeat;display:inline-block;padding:0;margin:0;}
#social_icns a:hover {background:url('http://forweb.ucoz.org/SocialIconh.png') no-repeat;}
#social_icns b {display:inline-block;width:15px;height:64px;}
a#gp, a#gp:hover {background-position:0 0;}
a#fb, a#fb:hover {background-position:-79px 0;}
a#vk, a#vk:hover {background-position:-159px 0;}
a#tw, a#tw:hover {background-position:-238px 0;}
a#rss, a#rss:hover {background-position:-318px 0;}
a#dr, a#dr:hover {background-position:-397px 0;}
a#yt, a#yt:hover {background-position:0 -90px;}
a#fl, a#fl:hover {background-position:-79px -90px;}
a#en, a#en:hover {background-position:-159px -90px;}
a#sk, a#sk:hover {background-position:-238px -90px;}
a#be, a#be:hover {background-position:-318px -90px;}
a#sc, a#sc:hover {background-position:-397px -90px;}
/*-- /Social Icons --*/
Скрипты для uCoz | Просмотров: 1680 | Добавил: RAIDER
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]