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

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

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

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

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

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

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

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

Пояснения:

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

Вместо послесловия

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