Добавляем в ЖЖ кнопки соцсетей

journals_covers — 05.07.2013 Часто спрашивают как можно добавить в дизайн кнопки со ссылками на аккаунты в соцсетях. Легко!
Многие, кстати, уже сделали себе такие кнопки.
Рассказываю для тех, кто тоже хочет, но пока не знает как : )

Первый способ - самый простой. Если у вас установлен Хамелеон, просто добавьте ссылки в настройках вот на этой странице. Там же можно выбрать вид и расположение кнопок.

Что входит в набор:

- Добавить в друзья
- 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 дополнениями:

https://twitter.com/yoksel" title="Twitter" target="_blank">alt="Twitter">


4. Вставьте код в текстовое поле в настройках сайдбара либо в верхний пост.

ВАЖНО: чтобы картинки встали рядом, а не столбиком, удалите из кода все переносы.

Сохраните, посмотрите то получается.



Пробуйте и хвастайтесь тем, что получилось у вас : )

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

Популярные посты:

• Архив