Вы здесь:   Главная » Вебмастеру    »    Социальные кнопки в одну строку

Социальные кнопки в одну строку

Хотел бы поделиться с Вами своими наработками, которыми пользуюсь и сам. Речь пойдёт вновь о социальных кнопках, а собственно куда без них, это ведь универсальный инструмент распространения информации в сети Интернет. Одна из предыдущих тем ознакомила вас возможностью встраивания панели соц.кнопок Pluso в контентные страницы WordPress, а теперь рассмотрим вариант размещения официальных соц.кнопок в одну горизонтальную линию…

Социальные кнопки в одну строку

Если Вы начинающий вебмастер, то, наверно, успели заметить, что при вставке кода скрипта кнопки «Мне нравится», «Класс», «Твиттнуть» и т.п., соответствующие кнопки появляются в лучшем случае одна под другой. Такое расположение не красит общий вид оформления вашего сайта. Конечно, другое дело, если у Вас размещена одна кнопочка, и уже проблема отпадает сама собой, но мы хотим привлечь внимание пользователей нескольких соц.сетей.

Как расположить социальные кнопки в одну строку на WordPress

Решениепроблемы

Решаем поставленную задачу созданием нового стиля, который бы ограничил ширину социальной кнопки и задал бы ей статическое расположение. Я опишу пример, который применяется не посредственно в коде со вставленным скриптом (Вы можете поступить немного иначе, создав новые стили в таблице CSS шаблона WordPress).

Итак, перейдите в редактирование шаблона, откройте файл с размещаемыми кнопками соц.сетей (обычно это файл – Одна запись «single.php»). Найдите или вставьте, ранее скопированный код кнопки, и сделайте следующее:

<divstyle=”float: left; width: 25%;”>
//Здесь код скрипта социальной кнопки//
</div>

Пояснения:

  1. оборачиваем в теги <divи задаём стиль для нашего кода;
  2. в стиле указываем выравнивание на странице параметром «float», который может принимать значения «left» (по левому краю) и «right» (по правому краю);
  3. и указываем параметром «width» — ширину вывода скрипта кнопки (обычно достаточно значения в 25%, что позволит Вам разместить 4 различных кода в одну строку).

P.S.

Собственно и всё, описанный выше способ следует применить к каждому коду соц.кнопки, чтобы они равномерно заняли свои места в области контентной страницы. Если потребуется, созданный стиль, можно расширить дополнительными параметрами, такими как внешние и внутренние отступы для более точного размещения. Сложного ничего, главное, не забывайте делать резервные копии редактируемых файлов, чтобы всегда иметь возможность восстановить исходное состояние.

поделиться с друзьями:

обновлено: 17.02.2017

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

Подписаться на почтовую рассылку*
*политика конфиденциальности Google
Комментарии
  1. Руслан
    • admin
  2. Руслан
    • admin
  3. Руслан
  4. Руслан
    • admin
  5. Руслан
  6. Сергий
    • admin
  7. Puncher

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

Авторизоваться через: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Ознакомиться с пользовательским соглашением

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: