Пост про крутящиеся кнопки социальных сетей я пишу по просьбе одного из читателей.
Крутящиеся кнопки я установила себе давно, причем на все блоги (и Blogger, и WordPress), уже не обращаю на них внимания, хотя они, конечно, несколько оживляют блог. Но, установив себе новую фишку, я сразу о ней не написала, а потом забыла. Так что, вспоминаю и описываю. Это описание годится и для установки подобного виджета на Wordpress, и для гаджета на Blogger.
Внешний вид кнопок социальных сетей
Первоначально кнопок было пять, я не создавала их сама, а нашла на просторах интернета. Где именно, сейчас не вспомнить, и я думаю, что там тоже был не авторский вариант. Так что, кто автор этого дизайна, мы, видимо, не узнаем. Потом одну из кнопок я удалила за ненадобностью.
Затем я сама в фотошопе создала еще 4 кнопки. Они получились не такими эффектными, как первые, но что есть, то есть.
При создании этих кнопок я использовала метод закругления углов картинки в фотошопе, использовала стили слоя, такие как тиснение и наложение градиента. И все.
И еще добавила кнопки перехода на другие мои блоги, просто взяв их фавиконы.
Создание кода картинки-ссылки
Сами изображения кнопок Вы можете скопировать у меня, найти где-то в другом месте в интернете, либо сделать самостоятельно.
Затем их необходимо загрузить на хостинг или воспользоваться сторонним сервисом для хранения изображений. Я обычно использую Гугловский сервис http://webpicasa.com/. Для каждой кнопки Вы должны знать адрес её местонахождения.
Чтобы в определенном месте блога появилась картинка, нужен такой код:
|
1 |
<img alt="Название картинки" src="Адрес картинки" /> |
Чтобы эта картинка (кнопка) стала ссылкой, необходимо этот код включить в тег ссылки. Должно получиться так:
|
1 |
<a href="URL Вашего аккаунта в социальной сети" rel="nofollow" target="_blank" title="Присоединяйтесь ко мне в …(название соцсети)"><img alt="Название картинки" src="Адрес картинки" /></a> |
Таких блоков кода Вы должны написать столько, сколько у Вас будет кнопок.
Создание эффекта кручения кнопок
Для того чтобы кнопки крутились, достаточно перед всеми блоками кода добавить соответствующие стили:
|
1 |
<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> |
После этих строчек, перед блоками кодов кнопок вставьте еще две строчки, чтобы кнопки встали в виджете (гаджете) по центру, и чтобы подключить стили для кручения:
|
1 2 |
<center> <div id="social"> |
В самом конце кода добавьте закрывающие теги:
|
1 |
</div></center> |
То есть, у Вас должен получиться такой блок:
|
1 2 3 4 5 6 |
<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="URL Вашего аккаунта в социальной сети" rel="nofollow" target="_blank" title="Присоединяйтесь ко мне в …(название соцсети)"><img alt="Название картинки" src="Адрес картинки" /></a> …(здесь будут другие блоки для остальных кнопок) </div></center> |
Важно! Не копируйте этот код сразу к себе в блог, а сначала скопируйте в текстовый редактор (я советую Notepad++) и внимательно проверьте правильность копирования. Прямо в этом редакторе вставьте все коды для всех кнопок, все адреса картинок и ссылок, и только когда всё будет готово, копируйте полученный код в виджет (гаджет) на блоге.
Вот и все, что я могу Вам рассказать про крутящиеся кнопки социальных сетей.
В заключение, как уже повелось, предлагаю посмотреть забавное видео:
Комментарии
Спасибо, Нина. Попробую реализовать у себя на сайте. Мне такие фишки нравятся
Но такой вопрос, а сайт этот прикол грузит очень?
Это же не скрипт, не плагин. Время загрузки нескольких маленьких изображений настолько мало, что Вы его и не заметите
Установил… Все работает прекрасно! Огромное спасибо! Рад бы послушать ваши мысли по этому…
Крутяк, давно хотел научиться делать так чтоб кнопки крутились
Ну вот, на ловца и зверь…
Устанавливайте!…
Спасибо, Нина, давно хотела установить такие кнопочки на свой блог, по моему даже просила тебя написать пост, о том, как их устанавливать. Ты так всё подробно описала, что теперь точно установлю себе такие кнопочки!
На данном сайте кладезь ценной информации! Огромное спасибо автору!
Я твитнула ваш блог
Пожалуйста, обратите внимание, что кнопка “+” возле блока социальных кнопок ведет на страницу ошибки.
Спасибо за твит. Видимо, был какой-то глюк. А вообще на эту кнопку нажимать не надо, на нее наводите курсор и открывается множество социальных кнопочек
Спасибо
Нина, такой вопрос… если не секрет? сколько у вас за клик в адсенс платят? и как можно повысить цену за клик, если знаете?
Волдик, платят по-разному. Это зависит от многого: страны, из которой кликнули, расценок рекламодателя и т.д. Я не занималась вопросом повышения цены за клик, но когда-то, когда у меня еще не стояла эта реклама, читала статью о том, как можно заблокировать рекламодателей с низкими расценками. Мне в этом разбираться некогда, капает потихоньку и ладно
Здравствуйте Нина!
Давно ищу материал про крутящиеся кнопки социальных сетей.
Спасибо!
Спасибо вам большое за такой урок… вроде бы понятно, попробую …
Кнопки очень классные!) Надо бы подумать, куда их вместить!
По поводу урока – все понятно и доступно описано, справится даже чайник!!)
Я очень стараюсь, чтобы было понятно и доступно
Большое спасибо за урок – очень просто и доступно! Сделала себе кнопки, о которых давно мечтала, буквально за пару минут!
Рада, что помогла. Заходите еще!
Нина, каждую картинку отдельно или в таблицу одним изображением? Я поняла, что каждую картинку отдельно.
Здесь каждая картинка отдельно
Прикольные кнопочки на свой блог, и так всё подробно описано, что грех их не установить себе
А я сколько не ставила кнопки соцсетей, они не приживаются…Наверное, проблема с темой. Но может еще раз попробую, только надо время найти
Время – это у всех проблема… Но надо как-нибудь найти его и посмотреть, что там у тебя с кнопками не получается
У меня правда есть уже кнопки социалок, но вот крутящиеся заинтересовали, вечерком попробую установить, привлекли ещё и тем что это простой скрипт, а не плагин, лучше боковые уберу, а эти поставлю, мерси вам!
Мне тоже в своё время очень понравилось, что они крутятся. Сейчас я как-то отошла от украшательства, но эти кнопки работают до сих пор. Успехов Вам!