« Вращающиеся социальные иконки для uCoz »
В данном материале, я хочу Вам предложить не плохие, вращающиеся социальные иконки для сайтов в системе uCoz. При наведение на одну из иконок, она будет вращаться на 360 градусов и встанет в исходное положение. Всего иконок девять и в них вошли - ВКонтакте, Одноклассники, Facebook, Twitter, Google +, Linkedin, LiveJournal, Youtube и RSS. Но Вы можете изменить легко их количество или просто заменить на свои социальные сети, а так же на свои любые иконки, так как в CSS не прописан размер иконок, Вы можете ставить любые, пусть они будут 24x24 или даже 256x256. Да забыл сказать, размер данных иконок 48x48.
Установка:
1. Скачиваем архив с нашего сайта и загружаем папку soc_icons в корень своего сайта
2. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим код:
-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: 100px 0px 0px;}
/* uFive.Ru */
3. Заходим в ПУ - Управление дизайном и в то место, где Вы хотите видеть иконки, ставим данный код:
<a target="_blank" rel="nofollow" href="http://vk.com">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/vk.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://odnoklassniki.com">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/o.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://fb.com">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/fb.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://twitter.com">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/t.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://plus.google.com">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/gp.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://linkedin.com">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/in.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://livejournal.com">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/lj.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://youtube.com">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/yt.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="#">
<img border="0" src="http://ufive.ru/demo_file/soc_icons/img/rss.png"style="margin-right: 1px;" /></a>
</div>
Готово!
По данной ссылке, Вы можете скачать или купить архив данного материала
ДемонстрацияДемонстративная страница или сайт материала
Установка материалаМы поможем установить данный материал к Вам на сайт
Комментариев: 4
| |
В 21:44, 22.02.2016 оставил(а) комментарий: