Роль социальных сетей - Facebook, Twitter, Вконтакте, Google+ ....... нельзя игнорировать. Уже сегодня сложно найти сайт или блог без социальных плагинов, дизайн которых становится все более оригинальным. Наткнувшись на 3D социальные иконки с эффектом вращения, не смогла пройти мимо. И хоть с сайдбаре уже был установлен комплект иконок, решила поиграться с новыми. Если навести курсор, иконки начинают вращаться и рука сама тянется кликнуть на мышку.
Код иконок позаимствовала у Сергея Мазураша.
<style> #social a:hover {background-color: transparent;opacity:0.7;} #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); } </style> <center> <div id="social"> <a href="http://feeds.feedburner.com/blogspot/veraborok" rel="nofollow" target="_blank" title="Rss Feed"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG-fVO2u3iRUps4ZGoxsotq6ibhDxaOnLvcqmBFxxl5Unh9aue4OCw_QbI6l03Ex83YLaCp7RI_EnjtU81wvyFTkQowAehcaTWsBZLC5YKrjrDvkFbD1qsEbeRKN8nG5r0_I9tXBkbeik/s1600/RSS-48x48.png" style="margin-right: 1px;" /></a> <a href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/MbbDy&loc=ru_RU" rel="nofollow" target="_blank" title="Получать свежие статьи на Email"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0epopMlYXsPLR1IK-i7TsLtq9hKAQ9qRrWGNRJuY6eVqcaP7y0-l50b2p6W5CEJ1sTiSGJ6fknUhlEAGE6bjQYswpiNuQriY8zduu3BMiFq6M22-3CniPE8JBQE9s3mXBRLn7zVLY9OE/s1600/RSS-EMAIL-48.png" style="margin-right: 1px;" /></a> <a href="https://www.facebook.com/vera.borok" rel="nofollow" target="_blank" title="Facebook"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRwznVnLKPmdCUoBORaqnKAOSjBf78IyRB7CxZgBTFhB1LPUnNnnRHG0btXL96fZMBzvf_e4F3egYKCQokPPIbggOwvdC2pmBbYrNIxFtXeghh-KSIIylCL1MtHSOhX8dTK8b9QfKIFqo/s1600/FACEBOOK-48x48.png" style="margin-right: 1px;" /></a> <a href="https://twitter.com/#!/Vera_Borok" rel="nofollow" target="_blank" title="Twitter"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAud4iKAScHoTYdWBhyphenhyphenzmXxdCFzoZ_tTTVH2aGPa6G6Vib5p31eIpIH_TQ4ZRDvmLlDDA3_fCJMw5WE8J4z519LI1wQvxAkmpn0xoMN7StLXxsg5tQddvffs2k_UIIiFlDng4aNezX_6Q/s1600/TWITTER-48x48.png" style="margin-right: 1px;" /></a> <a href="https://plus.google.com/101319911733376498080/posts" rel="nofollow" target="_blank" title="Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipQk3DWCAwh1ML1WmmHKGEfJOuPyZWkrxzZQkI4x7IfM7e7VHhA_zCDS-Xn8co0LTO6myiyG5hBox0jPS0_fJr3c8qujrLAH2gfYOfOdmmJ0LEmtannZkOmOQn1BddTcUWqAYdehQ2UO0/s1600/GOOGLE-PLUS-48x48.png" style="margin-right: 1px;" /></a> </div> </center>
Установить легко: "Дизайн" -- "Добавить гаджет" -- "HTML/JavaScript" -- код гаджета.
Только мои адреса профилей соцсетей и RSS канала поменяйте на свои. Сохраняем и перетягиваем гаджет, лучше повыше. Еще раз сохраняем.
Станем друзьями
Если интересно, то здесь можно узнать о кнопках для размещения ссылок в социальных сетях.
Понравилась статья? Поделитесь с друзьями.
19 коммент.:
Вера, спасибо за пост, уже сделала, прелесть!!!
Спасибо, очень круто выглядит !
Спасибо! Всё работает)))
Вера, доброго Вам дня! Хочу поставить на свой блог возможность следить посетителям за обновлениями на страницах в "В контакте", "Одноклассниках", "Фейсбук", "Твиттер" и "Ю-тьюб". То есть, не в конце статьи, а именно типа Вашего "станем друзьями". У вас не нашла пока материала, как поставить все их. Видимо, тоже нужен код для каждой соцсети, но у вас только вращающиеся иконки представлены и не все, которые я хочу. Я скачала из сети вариант иконок, которые мне нравятся (просто картинки в png). Подскажите, пожалуйста, возможно ли технически их добавить в гаджеты? Где берётся код? И что нужно для этого сделать? Заранее спасибо Вам, Вера, огромное за ответ! :-)
С уважением, Кристина.
Кристина, если просмотрите мой сайдбар, то внизу увидите обычные иконки соцсетей. Каждая иконка - это картинка, которую вы делаете ссылкой. Неважно, ставите ли ее в конце статьи, либо в сайдбаре. Как это сделать, подробно разобрано в посте "Активная ссылка". Дерзайте!
Спасибо, Вера! Сейчас буду разбираться! 8-))))
Спасибо Вам большое! Сделала себе на сайт!
Здравствуйте!А код иконки в контакте где можно найти?
Не могу разобраться,я конкретный чайник))
Ксения, недостающие иконки можно дорисовать самой. Забугорного автора этих иконок сеть ВКонтакте не интересует.
хм...честно говоря не понятно,но все же спасибо за ответ.
Спасибо, Вера, за оригинальное решение. Красиво смотрится.
Прекрасный гаджет, именно что-то подобное и искал! Огромнейшее СПАСИБО!!! :)
где брать адреса профилей?
Рита, адреса брать в адресной строке. Но сначала нужно создать аккаунты в соцсетях. Наверное, вы этим еще не занимались, потому и не понятно. Займитесь соцсетями и не бегите впереди паровоза. Всему свое время.
Спасибо Вам уважаемая за инфу. Мне помогло
Всё получилось. Спасибо!
Спасибо за полезную инструкцию.
Отправить комментарий