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

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


Описание:

В данном материале, я хочу Вам предложить не плохие, вращающиеся социальные иконки для сайтов в системе uCoz. При наведение на одну из иконок, она будет вращаться на 360 градусов и встанет в исходное положение. Всего иконок девять и в них вошли - ВКонтакте, Одноклассники, Facebook, Twitter, Google +, Linkedin, LiveJournal, Youtube и RSS. Но Вы можете изменить легко их количество или просто заменить на свои социальные сети, а так же на свои любые иконки, так как в CSS не прописан размер иконок, Вы можете ставить любые, пусть они будут 24x24 или даже 256x256. Да забыл сказать, размер данных иконок 48x48. [описание взято с сайта InternetEmpire.Ru]

Установка:

1. Скачиваем архив с нашего сайта и загружаем папку soc_icons в корень своего сайта

2. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим код:
Код
/* Вращающиеся социальные иконки для uCoz */   
#social img {   
-moz-transition: all 0.8s ease-in-out;   
-webkit-transition: all 0.8s ease-in-out;   
-o-transition: all 0.8s ease-in-out;   
-ms-transition: all 0.8s ease-in-out;   
transition: all 0.8s ease-in-out;   
}   
#social img:hover {   
-moz-transform: rotate(360deg);   
-webkit-transform: rotate(360deg);   
-o-transform: rotate(360deg);   
-ms-transform: rotate(360deg);   
transform: rotate(360deg);   
}   
.social {text-align: center;margin: 10px;}   
/* InternetEmpire.Ru */

3. Заходим в ПУ - Управление дизайном и в то место, где Вы хотите видеть иконки, ставим данный код:
Код
<div id="social" class="social">   
<a target="_blank" rel="nofollow" href="http://vk.com">   
<img border="0" src="/soc_icons/vk.png"style="margin-right: 1px;" /></a>   
<a target="_blank" rel="nofollow" href="http://odnoklassniki.com">   
<img border="0" src="/soc_icons/o.png"style="margin-right: 1px;" /></a>   
<a target="_blank" rel="nofollow" href="http://fb.com">   
<img border="0" src="/soc_icons/fb.png"style="margin-right: 1px;" /></a>   
<a target="_blank" rel="nofollow" href="http://twitter.com">   
<img border="0" src="/soc_icons/t.png"style="margin-right: 1px;" /></a>   
<a target="_blank" rel="nofollow" href="https://plus.google.com">   
<img border="0" src="/soc_icons/gp.png"style="margin-right: 1px;" /></a>   
<a target="_blank" rel="nofollow" href="http://linkedin.com">   
<img border="0" src="/soc_icons/in.png"style="margin-right: 1px;" /></a>   
<a target="_blank" rel="nofollow" href="http://livejournal.com">   
<img border="0" src="/soc_icons/lj.png"style="margin-right: 1px;" /></a>   
<a target="_blank" rel="nofollow" href="http://youtube.com">   
<img border="0" src="/soc_icons/yt.png"style="margin-right: 1px;" /></a>   
<a target="_blank" rel="nofollow" href="#">   
<img border="0" src="/soc_icons/rss.png"style="margin-right: 1px;" /></a>   
</div>

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

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

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

3 комментария


Rita
Рита @Rita 03.03.2016 19:551
+5
Спасибо like like like
demidovskiya
Не совсем понятно с корневой папкой ! вот этот пункт-- загружаем папку soc_icons в корень своего сайта ?
Admin
Роман Домнин @Admin 08.03.2016 16:043
0
Да, в корень Вашего сайта
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта