На сайте ведутся работы!
Поэтому могут быть ошибки и недочеты. Приносим свои извинения и постараемся все исправить в ближайшее время.
AdBlock
Блокируйте рекламу. Просматривайте быстрее.
Adguard
Самый быстрый и легковесный блокировщик рекламы для браузеров.
Недавние обсуждения
Социальные сети захватили сознание людей и коснулись практически всех сфер жизни. Тяжело представить себе сайт без социальных кнопок и иконок. Совсем не обязательно создавать иконки с нуля, в просторах интернета есть большое количество готовых вариантов. Сегодня мы предлагаем вашему вниманию не большой скрипт русскоязычных социальных сетей, которые будут выезжать при наведении. На данный момент присутствую иконки: ВКонтакте, Twitter, Google+, Facebook, Одноклассники, Linkedin, Youtube и иконка RSS, но пожеланию вы можете добавить и свои.

Установка:

1. Скачиваем архив с нашего сайта и загружаем папку soc_icons в корень своего сайта
2. Вставьте в таблицу стилей CSS данный код:

Код
.menu {
text-align: center;
height: 60px;
overflow: hidden;
cursor: default;
}

.menu i {
position: relative;
top: 30px;
transition: .2s ease;
}

.menu i:hover {
top: 9px;
}
.icon {
border-radius:10px;
}


3. Разместите этот HTML код в том месте где вы хотите видеть социальные иконки:

Код
<div class="menu">
<i><a href="адрес ссылки" ><img src="/soc_icons/vkontakte.png" alt="Vkontakte"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/twitter.png" alt="Twitter"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/google_plus.png" alt="Google"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/facebook.png" alt="Facebook"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/odnoklassniki.png" alt="Ok"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/linkedin.png" alt="Linkedin"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/youtube.png" alt="Youtube"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/rss.png" alt="Rss"class="icon"></a></i>
</div>


Установка завершена!
Теги к материалу
социальные, ucoz, для, иконки, Выезжающие
Поделись материалом с друзьями
Рекомендуем к просмотру
К материалу оставили 2 комментария
Roman_Domnin
Роман Домнин @Roman_Domnin
29
14.01.2016 в 19:41 - Четверг
Источник: http://internetempire.ru/load/css/buttons_icons/vyezzhajushhie_socialnye_knopki/18-1-0-315 а не мой сайт)
-D-I-N-I-S-
Иван Иванов @-D-I-N-I-S-
2
14.01.2016 в 20:09 - Четверг
Roman_Domnin, исправил 3 . Просто, откуда беру, те ссылки и ставлю 12