Социальные иконки с элементом вращение
 | |
| Больше всего, каждый администратор ресурса, хочет чтоб его сайт был оригинален и понятлив, и здесь вы можете это сделать. Это для сайта социальные кнопки, которые имеют красивый эффект вращение при наведение на них. Будет смотреться красиво, а также выполнять свою функцию. Вращаются они не быстро, что очень приятно смотреть, но при клике появляется окно, где вы можете материал вывести на социальную сеть, тем вы раскручиваете сайт и о нем больше узнают, также может повлиять на быструю индексацию. Здесь мы видим что самые главные порталы представлены.  Они выполнены в оригинальном дизайн, что не сказать что круглые, а ромб, и на любой ресурс они подойдут. Просто сейчас вам не нужно гадать, правильно вы навели или нет, все покажется а точнее сделает оборот, в чем их преимущество перед другими. Установка: Что первое нужно сделать, это войти в файловый менеджер и создать папку под названием 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 | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 12 | |
| |
