yoksel : ) (yoksel) wrote in journals_covers,
yoksel : )
yoksel
journals_covers

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

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

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

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

- Добавить в друзья
- Rss
- Facebook
- Twitter
- Vk

Вот так выглядят кнопки:

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

А вот такими они могут стать, если подключить фантазию и немножко Css:

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

Второй способ добавления кнопок немножко сложнее, но имеет кучу преимуществ:

- вы можете добавить кнопки в любой стиль (Expressive, Minimalism и не только)
- вы сами выбираете кнопки - их вид и размер
- вы можете добавить ссылки на любые соцсети, какие только пожелаете

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

<a href="ССЫЛКА НА АККАУНТ В СОЦСЕТИ"><img src="КАРТИНКА КНОПКИ" border="0"></a>

Вставляете адрес картинки и ссылку на аккаунт, повторяете операцию нужное количество раз, получившийся код вставляете в текстовое поле в сайдбаре либо в верхний пост - вуаля! Кнопки готовы! : )

А теперь подробно и по шагам.

1. Иконки можно найти в гугле или на этих сайтах:

http://iconfinder.com/
http://findicons.com/
http://www.iconsearch.ru/

Преимущество сайтов состоит в возможности выбирать цвет и размер иконок, а также находить сразу готовые сеты - все нужные вам иконки, отрисованные в одном стиле.

Найденные иконки сохраните себе на комп.

2. Залейте картинки в сеть

Очень внимательно отнеситесь к выбору картинкохостинга. Некоторые из них стирают картинки через какое-то время либо просто при превышении числа просмотров.
Например, ваша запись попадает в топ, к вам приходит много посетителей, и ваши иконки внезапно превращаются в тыкву.
Чтобы избежать таких сюрпризов, я рекомендую ЯндексФотки.

Заливаете, берете адрес изображения, вставляете в код.

Как c яндекса взять правильную ссылку на картинку:

Под картинкой ссылка Другие размеры.
Кликаете, в выпадающем списке есть пункт Оригинал - эта ваша картинка в том размере, в котором вы её залили.
Кликните правой кнопкой и скопируйте адрес ссылки. Либо кликните по надписи, и на открывшейся странице скопируйте ссылку из адресной строки браузера.

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

3. Получаем код:

<a href="ССЫЛКА НА АККАУНТ В СОЦСЕТИ"><img src="КАРТИНКА КНОПКИ" border="0"></a>

Вставьте ссылку на вашу картинку вместо надписи КАРТИНКА КНОПКИ, а также вставьте адрес аккаунта в соцсетях.

Кнопка готова : )
Таким же образом сделайте остальные кнопки.

Получается вот такое (ссылки только для примера):



иконки найдены на http://www.iconsearch.ru/

Дополнительные опции:

- заполните alt и title. title нужен, чтобы по наведению на иконку появлялась подсказка, а alt - это текст, который появится, если иконка не загрузилась.
- добавьте target="_blank", чтобы ссылка открывалась в новом окне

Пример кода c дополнениями:

<a href="https://twitter.com/yoksel" title="Twitter" target="_blank"><img src="КАРТИНКА КНОПКИ" border="0" alt="Twitter"></a>


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

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

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



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

Tags: useful: кнопки, useful: настройка s2, useful: уроки по оформлению ЖЖ
Subscribe
promo journals_covers august 1, 2013 11:15 62
Buy for 200 tokens
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 153 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →