регистрация
856материалов
3261комментарий
228тем на форуме
6738пользователей

Вращающиеся социальные иконки для 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
Материал просмотрен: 1600 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 3 комментария

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

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


Rita
Рита @Rita 03.03.2016 19:551
+5
Спасибо
demidovskiya
Не совсем понятно с корневой папкой ! вот этот пункт-- загружаем папку soc_icons в корень своего сайта ?
Admin
Роман Домнин @Admin 08.03.2016 16:043
0
Да, в корень Вашего сайта
avatar
uLike – кнопка «Мне нравится»
Создать сайт вместе с uKit.com
Статистики нашего сайта
Сегодня к нам присоединились: 5 человек
Пользователи и гости сейчас онлайн: 6 Сегодня наш портал посетили: чел
Сейчас на сайте: kharandzyuk
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 6
Гостей: 5
Пользователей: 1