10 августа 2012 г.

3D социальные иконки для Blogger

Социальные иконки

Роль социальных сетей - 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&amp;loc=ru_RU" rel="nofollow" target="_blank" title="Получать свежие статьи на Email"><img alt="Icon" border="0" src="http://1.bp.blogspot.com/-6Db4xlsxpfM/UCd62NNnDFI/AAAAAAAACXM/7juUQLsr7lg/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="http://1.bp.blogspot.com/-JuuqzK04p8s/UCS5x16X97I/AAAAAAAACWs/bWjTy0p3ueI/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 канала поменяйте на свои. Сохраняем и перетягиваем гаджет, лучше повыше. Еще раз сохраняем.

Станем друзьями

Icon Icon Icon Icon

Надеюсь, наши посетители тоже обратят на них внимание и непременно кликнут.

Если интересно, то здесь можно узнать о кнопках для размещения ссылок в социальных сетях.


Понравилась статья? Поделитесь с друзьями.

19 коммент.:

Ирина Александровна Кудрявцева

Вера, спасибо за пост, уже сделала, прелесть!!!

Unknown

Спасибо, очень круто выглядит !

Наталья Чемоданова

Спасибо! Всё работает)))

Анонимный

Вера, доброго Вам дня! Хочу поставить на свой блог возможность следить посетителям за обновлениями на страницах в "В контакте", "Одноклассниках", "Фейсбук", "Твиттер" и "Ю-тьюб". То есть, не в конце статьи, а именно типа Вашего "станем друзьями". У вас не нашла пока материала, как поставить все их. Видимо, тоже нужен код для каждой соцсети, но у вас только вращающиеся иконки представлены и не все, которые я хочу. Я скачала из сети вариант иконок, которые мне нравятся (просто картинки в png). Подскажите, пожалуйста, возможно ли технически их добавить в гаджеты? Где берётся код? И что нужно для этого сделать? Заранее спасибо Вам, Вера, огромное за ответ! :-)

С уважением, Кристина.

Вера Борок

Кристина, если просмотрите мой сайдбар, то внизу увидите обычные иконки соцсетей. Каждая иконка - это картинка, которую вы делаете ссылкой. Неважно, ставите ли ее в конце статьи, либо в сайдбаре. Как это сделать, подробно разобрано в посте "Активная ссылка". Дерзайте!

Анонимный

Спасибо, Вера! Сейчас буду разбираться! 8-))))

Unknown

Спасибо Вам большое! Сделала себе на сайт!

Ksenia

Здравствуйте!А код иконки в контакте где можно найти?

Ksenia

Не могу разобраться,я конкретный чайник))

Вера Борок

Ксения, недостающие иконки можно дорисовать самой. Забугорного автора этих иконок сеть ВКонтакте не интересует.

Ksenia

хм...честно говоря не понятно,но все же спасибо за ответ.

Владимир

Спасибо, Вера, за оригинальное решение. Красиво смотрится.

Unknown

Прекрасный гаджет, именно что-то подобное и искал! Огромнейшее СПАСИБО!!! :)

Unknown

где брать адреса профилей?

Вера Борок

Рита, адреса брать в адресной строке. Но сначала нужно создать аккаунты в соцсетях. Наверное, вы этим еще не занимались, потому и не понятно. Займитесь соцсетями и не бегите впереди паровоза. Всему свое время.

Антон

Спасибо Вам уважаемая за инфу. Мне помогло

Rita
Этот комментарий был удален автором.
Votix

Всё получилось. Спасибо!

лена

Спасибо за полезную инструкцию.

Отправить комментарий

Related Posts Plugin for WordPress, Blogger...