Добавляем в ЖЖ кнопки соцсетей
Часто спрашивают как можно добавить в дизайн кнопки со ссылками на аккаунты в соцсетях. Легко!
Многие, кстати, уже сделали себе такие кнопки.
Рассказываю для тех, кто тоже хочет, но пока не знает как : )
Первый способ - самый простой. Если у вас установлен Хамелеон, просто добавьте ссылки в настройках вот на этой странице. Там же можно выбрать вид и расположение кнопок.
Что входит в набор:
- Добавить в друзья
- Rss
- Facebook
- Twitter
- Vk
Вот так выглядят кнопки:
А вот такими они могут стать, если подключить фантазию и немножко Css:
Второй способ добавления кнопок немножко сложнее, но имеет кучу преимуществ:
- вы можете добавить кнопки в любой стиль (Expressive, Minimalism и не только)
- вы сами выбираете кнопки - их вид и размер
- вы можете добавить ссылки на любые соцсети, какие только пожелаете
Собственно, суть способа выглядит вот так:
Вставляете адрес картинки и ссылку на аккаунт, повторяете операцию нужное количество раз, получившийся код вставляете в текстовое поле в сайдбаре либо в верхний пост - вуаля! Кнопки готовы! : )
А теперь подробно и по шагам.
1. Иконки можно найти в гугле или на этих сайтах:
http://iconfinder.com/
http://findicons.com/
http://www.iconsearch.ru/
Преимущество сайтов состоит в возможности выбирать цвет и размер иконок, а также находить сразу готовые сеты - все нужные вам иконки, отрисованные в одном стиле.
Найденные иконки сохраните себе на комп.
2. Залейте картинки в сеть
Очень внимательно отнеситесь к выбору картинкохостинга. Некоторые из них стирают картинки через какое-то время либо просто при превышении числа просмотров.
Например, ваша запись попадает в топ, к вам приходит много посетителей, и ваши иконки внезапно превращаются в тыкву.
Чтобы избежать таких сюрпризов, я рекомендую ЯндексФотки.
Заливаете, берете адрес изображения, вставляете в код.
Как c яндекса взять правильную ссылку на картинку:
Под картинкой ссылка Другие размеры.
Кликаете, в выпадающем списке есть пункт Оригинал - эта ваша картинка в том размере, в котором вы её залили.
Кликните правой кнопкой и скопируйте адрес ссылки. Либо кликните по надписи, и на открывшейся странице скопируйте ссылку из адресной строки браузера.
3. Получаем код:
Вставьте ссылку на вашу картинку вместо надписи КАРТИНКА КНОПКИ, а также вставьте адрес аккаунта в соцсетях.
Кнопка готова : )
Таким же образом сделайте остальные кнопки.
Получается вот такое (ссылки только для примера):
иконки найдены на http://www.iconsearch.ru/
Дополнительные опции:
- заполните alt и title. title нужен, чтобы по наведению на иконку появлялась подсказка, а alt - это текст, который появится, если иконка не загрузилась.
- добавьте target="_blank", чтобы ссылка открывалась в новом окне
Пример кода c дополнениями:
title="Twitter" target="_blank">
alt="Twitter">
4. Вставьте код в текстовое поле в настройках сайдбара либо в верхний пост.
ВАЖНО: чтобы картинки встали рядом, а не столбиком, удалите из кода все переносы.
Сохраните, посмотрите то получается.
Пробуйте и хвастайтесь тем, что получилось у вас : )
Многие, кстати, уже сделали себе такие кнопки.
Рассказываю для тех, кто тоже хочет, но пока не знает как : )
Первый способ - самый простой. Если у вас установлен Хамелеон, просто добавьте ссылки в настройках вот на этой странице. Там же можно выбрать вид и расположение кнопок.
Что входит в набор:
- Добавить в друзья
- Rss
- Vk
Вот так выглядят кнопки:
А вот такими они могут стать, если подключить фантазию и немножко Css:
Второй способ добавления кнопок немножко сложнее, но имеет кучу преимуществ:
- вы можете добавить кнопки в любой стиль (Expressive, Minimalism и не только)
- вы сами выбираете кнопки - их вид и размер
- вы можете добавить ссылки на любые соцсети, какие только пожелаете
Собственно, суть способа выглядит вот так:
Вставляете адрес картинки и ссылку на аккаунт, повторяете операцию нужное количество раз, получившийся код вставляете в текстовое поле в сайдбаре либо в верхний пост - вуаля! Кнопки готовы! : )
А теперь подробно и по шагам.
1. Иконки можно найти в гугле или на этих сайтах:
http://iconfinder.com/
http://findicons.com/
http://www.iconsearch.ru/
Преимущество сайтов состоит в возможности выбирать цвет и размер иконок, а также находить сразу готовые сеты - все нужные вам иконки, отрисованные в одном стиле.
Найденные иконки сохраните себе на комп.
2. Залейте картинки в сеть
Очень внимательно отнеситесь к выбору картинкохостинга. Некоторые из них стирают картинки через какое-то время либо просто при превышении числа просмотров.
Например, ваша запись попадает в топ, к вам приходит много посетителей, и ваши иконки внезапно превращаются в тыкву.
Чтобы избежать таких сюрпризов, я рекомендую ЯндексФотки.
Заливаете, берете адрес изображения, вставляете в код.
Как c яндекса взять правильную ссылку на картинку:
Под картинкой ссылка Другие размеры.
Кликаете, в выпадающем списке есть пункт Оригинал - эта ваша картинка в том размере, в котором вы её залили.
Кликните правой кнопкой и скопируйте адрес ссылки. Либо кликните по надписи, и на открывшейся странице скопируйте ссылку из адресной строки браузера.
3. Получаем код:
Вставьте ссылку на вашу картинку вместо надписи КАРТИНКА КНОПКИ, а также вставьте адрес аккаунта в соцсетях.
Кнопка готова : )
Таким же образом сделайте остальные кнопки.
Получается вот такое (ссылки только для примера):
иконки найдены на http://www.iconsearch.ru/
Дополнительные опции:
- заполните alt и title. title нужен, чтобы по наведению на иконку появлялась подсказка, а alt - это текст, который появится, если иконка не загрузилась.
- добавьте target="_blank", чтобы ссылка открывалась в новом окне
Пример кода c дополнениями:
title="Twitter" target="_blank">
alt="Twitter">
4. Вставьте код в текстовое поле в настройках сайдбара либо в верхний пост.
ВАЖНО: чтобы картинки встали рядом, а не столбиком, удалите из кода все переносы.
Сохраните, посмотрите то получается.
Пробуйте и хвастайтесь тем, что получилось у вас : )