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



Всем привет! Сегодня я расскажу как сделать так, чтобы социальные кнопки находились в одном ряду , а не друг под другом, как обычно бывает. Поскольку я полный чайник во всех этих HTML и CSS и прочем, но все же смогла добиться желаемого результата сама.

Методом проб и ошибок все стало так, как я хотела. Такой вот маленький, но успех :) Теперь ближе к делу.

Почему я решила сделать кнопки в один ряд ? Потому что когда они находятся друг под другом, то это не красиво и такой вид портит всю страницу. Я сама по натуре человек аккуратный, и хочу того же на своем блоге.

Как я сказала, что я полный ноль во всех этих кодах и тегах, хоть они меня и интересуют в какой-то мере. Поскольку эта мысль не давала мне покоя, решила я почитать в интернете инструкции по установке…

Если говорить в кратце, то без поллитра не разберешь, я ничего не поняла, сколько я не пыталась вникать, но каждый автор таких инструкций писал по-разному. В одной инструкции у меня не сошлись коды самих кнопок, в другой статье я накрутила так, что сайдбар помахал мне ручкой и уехал в подвал. Благо я все успела забэкапить — вернула все на свои места.

Ни в коем разе не хочу обидеть тех людей, которые писали свои инструкции, может быть у них все получилось, но не у меня. Не смотря на мои прямые руки, все попытки добиться расположения кнопок в один ряд увенчались провалом. Уж больно замысловатые были инструкции. И до поры до времени я на это дело даже забила.

Одним прекрасным вечером на меня снизошло озарение, поскольку я блоггер, то элементарные знания HTML и CSS у меня должны быть. Все оказалось проще простого :)

Установка кнопок в один ряд

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

Шаг 1. Для начала нам нужно взять отдельно каждый код кнопки и поместить его в контейнер. Для этого заходим в админ панель блога, далее нажимаем Внешний вид — Редактор — Single.php (Одна запись). Мои коды кнопок расположены в этом файле.

У меня на блоге находятся 4 кнопки, это Вконтакте, Твиттер, Гугл плюс и Фейсбук.

Шаг 2. Теперь каждый код возьмем в контейнер таким образом:

<div id=»vk_like»> код кнопки вконтакте </div>
<div id=»twi»> код копки твиттера </div>
<div id=»g_pl»> код кнопки гугл плюс </div>
<div id=»face»> код кнопки фейсбука </div>

Вместо vk_like, twi, g_pl, face — можно дать свои названия. Главное что бы вам самим было понятно. Вот так выглядит у меня общая картина:

Шаг 3. Теперь переходим в Список стилей (style.css)

В самом низу размещаем вот такой код:

#vk_like{
float: left;
padding-left: 30px;
}

#twi{
float: left;
}

#g_pl{
float: left;
}

#face{
float: left;
}

Значение float: left — определяет по какой стороне будет идти выравнивание, в данном случае по левой. А все последующие элементы будут обтекать его с правой стороны.

Значение padding-left: 30px — это расстояние от края до первой кнопки, вы его можете убрать, если не нужно, просто удалив эту строку.

Вот так легко и просто можно установить социальные кнопочки в один ряд. Если у вас возникнут затруднения, пишите, постараюсь помочь разобраться!




  1. Дмитрий Игоревич:

    Хороший вариант! А вот мой вариант кнопок: http://beenetwork.ru/urok-32-knopki-socialnyx-setej.html

    Там можно указать процент отступа!

  2. Ирина:

    Не получилось в ряд выставить. Перепроверяла раз пятнадцать: все сделала по вашей инструкции верно, но что-то не задалось

    • Mistli Mistli:

      Посмотрите по моему скриншоту, может быть неверно прописали код? Или упустили какой нибудь символ

    • Дмитрий Игоревич:

      По данному примеру всё работает отлично! Проверено!

  3. blogrub:

    Посмотрите на мой блог чем там плохи кнопки? qip рулит, без всяких заморочек, зачем велосипед выдумывать?

  4. Александр:

    Сделал по этому способу. Все равно не получилось, как и многие другие. может просто тема на сайте такая

    • Mistli:

      Вы проверили, чтобы все теги были закрыты? Следовали точно по инструкции, или где-то что-то не понятно было? Могу помочь если что

  5. Светлана:

    У кого не получается, проверьте чтобы при копировании во всех тегах кавычки были отображены в таком виде: «…», а не в таком: »…», так как из-за такого (») отображения кавычек и может возникать ошибка.

  6. Светлана:

    Поправка к моему верхнему комментарию: При отправке моего первого комментария кавычки автоматически поменяли вид на неправильный, поэтому внимательно присмотритесь какие кавычки стоят на рисунке автора в тегах, они отличаются от тех что в коде (должны быть по две запятых вверху с двух сторон тега).

Ваш отзыв