» »

Социальные иконки с элементом вращение


Социальные иконки с элементом вращение

Больше всего, каждый администратор ресурса, хочет чтоб его сайт был оригинален и понятлив, и здесь вы можете это сделать. Это для сайта социальные кнопки, которые имеют красивый эффект вращение при наведение на них. Будет смотреться красиво, а также выполнять свою функцию. Вращаются они не быстро, что очень приятно смотреть, но при клике появляется окно, где вы можете материал вывести на социальную сеть, тем вы раскручиваете сайт и о нем больше узнают, также может повлиять на быструю индексацию.

Здесь мы видим что самые главные порталы представлены.

Социальные иконки для сайта

Они выполнены в оригинальном дизайн, что не сказать что круглые, а ромб, и на любой ресурс они подойдут. Просто сейчас вам не нужно гадать, правильно вы навели или нет, все покажется а точнее сделает оборот, в чем их преимущество перед другими.

Установка:

Что первое нужно сделать, это войти в файловый менеджер и создать папку под названием soc_icons и в корне сайта расположить ее. Потом скачиваем файл и заливаем туда, что в нем находиться.

Далее:

Ищем место, где расположить их, это может как главная страница, также под материал.

Код
<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>


Но чтоб все красиво смотрелось, нужно вывести и нам в этом помогут стили, которые в CSS ставим в самый низ.

Код
#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;}


На этом заканчиваем, когда что то новое ставим, то не забываем сохранить в "Резервное копирование (backup)" что находиться панели администратора, Общее - главная страница, так как перед каждым вмешательство или установки, на всякий случай лучше подстраховаться. И когда то что то делаем, то все сохраняем, чтоб потом не было не каких недоразумений с вашей стороны, это так как заметка.

Источник: Internetempire.ru
05.03.2016 Загрузок: 2 Просмотров: 519 Комментарий: (12)

Поделиться в социальных сетях

Материал разместил

Комментарий: 12
FeStemBer
FeStemBer 05.03.2016 01:111
0
Так не обычно и визуальность есть, но пока поставил, что uCoz создали, вот жду вторые, которые еще в разработке.
Maryges
Maryges 05.03.2016 01:132
-1
Мне они не нравятся, вот вторые, думаю нормально будут. А что про этот скрипт, хорошо и большой плюс, что он не от какой системы не зависит и сайт зависать не будет в этом случай, то иногда долго грузиться, а виноваты кнопки от сервиса.
Kosten
Kosten 05.03.2016 01:163
+3
Maryges, да они автономны будут, если и зависнет, только ваш сервис на хостинге. А так они сделаны для оригинального по дизайн сайта, хотя подойдут на любой и оттенок цвета здесь не важно какой будет.
ucozmental
ucozmental 05.03.2016 01:285
-2
Да сколько их вообще по скрипту найти можно, мне не очень понравились, ведь посудите, нужен дизайн здесь с углами и мне точно уже не подходит, но вертятся они, для меня главное чтоб работали.
Kosten
Kosten 05.03.2016 01:326
+4
Вот потому их много, а вот рабочих вы бы поискали, не думаю что нашли, вы говорите о сайтах, где можно сгенерировать скрипт и не более и не нужно путать. И вообще нужно понимать где стоять они будут, если вид материала, где файлы и статьи, то может не подойти, если сайт не с углами. Но главную не нужно забывать, там они должны отлично смотреться, но здесь можно убрать несколько, так как они горизонтальном виде и их много или оставить, здесь решение за тем, кто устанавливать будет.
FeStemBer
FeStemBer 05.03.2016 01:254
0
Нормальные кнопки сделаны, думаю можно остальные в интернете найти и добавить что вам нужно. Но только одно, сейчас яндекс блог, не учитывает не одной социальной сети, раньше даже Vk выводило, не говоря о птичке твит. Но на триттере на робос выставили, чтоб не распространяли свои твиты, но так читал, и видать так и есть.
Сопрано
Сопрано 05.03.2016 01:397
0
Красивые ромбы, или как там правильно назвать, просто все очень гениально придумано, что уже на нескольких сайтах мне пришлось встречать, но основном на блогах.
Maryges
Maryges 05.03.2016 02:068
0
Друзья, а возмущен, кто мне там минус поставил, интересно за что, мне это хочется понять.
Kosten
Kosten 05.03.2016 02:149
0
Maryges, ты о чем, реально от тебя не ожидал, но не понравилось кому то твой пост, что теперь забухать, епть кто то минус поставить.
Maryges
Maryges 05.03.2016 02:1710
+7
Kosten, да все нормально, сам тупанул, но ты сам понимаешь, нужно по сути обосновать, просто так привык, но не понравилось, это их проблема, написал как считаю, а не просто так, так что все понятно, могу сам на рычаги жать, но по тем как посчитаю, а не просто если человек не приятен, здесь этого не должно быть.
FeStemBer
FeStemBer 05.03.2016 02:1811
0
Они так даже очень прилично смотрятся, стазу можно заметить, что есть кнопки, думаю перенести на основной сайт.
csretven
csretven 05.03.2016 03:0312
+1
Maryges, все правильно, а то некоторые типы, просто ставят минус, им этот человек не приятен, так скажи ему в глаза, а не так минус поставил и герой по их мнению.
avatar