Выезжающие социальные иконки для uCoz
Социальные сети захватили сознание людей и коснулись практически всех сфер жизни. Тяжело представить себе сайт без социальных кнопок и иконок. Совсем не обязательно создавать иконки с нуля, в просторах интернета есть большое количество готовых вариантов. Сегодня мы предлагаем вашему вниманию не большой скрипт русскоязычных социальных сетей, которые будут выезжать при наведении. На данный момент присутствую иконки: ВКонтакте, Twitter, Google+, Facebook, Одноклассники, Linkedin, Youtube и иконка RSS, но пожеланию вы можете добавить и свои.
Установка:
1. Скачиваем архив с нашего сайта и загружаем папку soc_icons в корень своего сайта
2. Вставьте в таблицу стилей CSS данный код:
3. Разместите этот HTML код в том месте где вы хотите видеть социальные иконки:
Установка завершена!
Установка:
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;
}
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>
<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>
Установка завершена!
-D-I-N-I-S-
13.01.16 в 22:35
1.2k
2
Источник
. Просто, откуда беру, те ссылки и ставлю 
14.01.16 в 20:09