Выезжающие социальные иконки для uCoz
827материалов
228тем на форуме
3004комментария
6158пользователей

Выезжающие социальные иконки для uCoz


Описание:

Социальные сети захватили сознание людей и коснулись практически всех сфер жизни. Тяжело представить себе сайт без социальных кнопок и иконок. Совсем не обязательно создавать иконки с нуля, в просторах интернета есть большое количество готовых вариантов. Сегодня мы предлагаем вашему вниманию не большой скрипт русскоязычных социальных сетей, которые будут выезжать при наведении. На данный момент присутствую иконки: ВКонтакте, 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>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 11.01.2016 в 09:00
Материал просмотрен: 1693 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 11 комментариев

Пожаловаться
Сказать спасибо
Источник

11 комментариев


TheGamer
MaxiMus @TheGamer 11.01.2016 10:041
+6
Весьма хорошая и красивая вещь респект автору like
tps
Александр @tps 11.01.2016 14:282
+3
Спасибо за кнопки like like like
sergeeff
Красиво, а кнопки можно на свои изменить?
YaVi
Виктор @YaVi 11.01.2016 16:344
+1
Да, можно)
sergeeff
А их лучше одинаковыми по размеру сделать или одного?
YaVi
Виктор @YaVi 12.01.2016 05:236
+1
Лучше всего делать одинаковые размеры)
LANIGIRO
У меня что-то не пашет((( Беда( dislike
Ромчик
ссылку на сайт в студию где установлен скрипт
YaVi
Виктор @YaVi 12.01.2016 18:129
0
А вы все правильно установили? можно сайт где установлено
LANIGIRO
Цитата Ромчик
ссылку на сайт в студию где установлен скрипт

я удалил этот скрипт(((
1 2 »
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта