Главная » Социальные сети » Как расположить и оформить кнопки социальных сетей в один ряд
кнопки социальных сетей в ряд

Как расположить и оформить кнопки социальных сетей в один ряд

Здравствуйте уважаемые читатели блога history-of-blog.ru. В прошлых статьях мы уже рассмотрели как добавить социальные кнопки от твиттера, фейсбука, в контакте и гугл +. В этой статье мы рассмотрим как окончательно оформить блок этих кнопок, зададим фоновый цвет и границу. Таким образом у нас получится вот такой блок кнопок:блок кнопоккнопки социальных сетей в ряд

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

Итак, приступим.

По прошлым статьям у нас уже прописано:

В файле single.php:

<div class="knopki-aga">
<div class="twit">Код кнопки твиттера</div>
<div class="facebook">Код кнопки фейсбук</div>
<div class="vk">Код кнопки вконтакте</div>
<div class="google">Код кнопки гугл +</div>
</div>

В файле style.css:

.knopki-aga {
    width:500px; height:25px; margin:15px auto 5px;
    }
    .twit {
    float:left; width:120px;
    }
    .facebook {
    float:left; width:140px;
    }
    .vk {
    float:left; width:160px;
    }
    .google {
    float:left; width:80px;
    }

Таким образов все кнопки социальных сетей уже расположены в один ряд.

Теперь следует отредактировать лишь общий стиль блока кнопок (.knopki-aga). Находим его в файле style.css:

.knopki-aga {
    width:500px; height:25px; margin:15px auto 5px;
    }

И меняем на:

.knopki-aga {
	width:500px; height:25px; margin:15px auto 5px; border:1px dashed #E1E1E1; border-radius:6px; padding:10px 16px 6px 35px; background:#F1F1F1;
	}

Теперь давайте посмотрим что изменилось:

  • border:1px dashed #E1E1E1; – мы обвели блок кнопок пунктирной линией (dashed) с шириной 1 пиксель (1px) серого цвета (#E1E1E1) – все эти три параметра можно поменять. Например границу можно сделать сплошной, пунктирной, двойной и так далее. Вот полезная картинка, пользуйтесь:

стили границ

  • border-radius:6px; – мы задали скругление всех четырех углов с радиусом в 6 пикселей.
  • padding:10px 16px 6px 35px; – немного изменили отступы.
  • background:#F1F1F1; – задали фоновый цвет.

На выходе получили следующее:блок кнопок

В принципе на этом можно закончить оформлять блок кнопок, но…

Бонус.

А давайте еще больше украсим наш блок кнопок и добавим помимо цветового фона фоновую картинку. Картинка может быть любой. Я вот, к примеру, нашел картинку… эм.. как же эта штука называется то :) В общем получилось вот что:блок кнопок 2

Для того чтобы получить такой же блок кнопок как на скрине Вам потребуется выполнить всего несколько шагов:

  • 1. Скачайте вот эту картинку:
  • 2. Загрузите ее в папку картинок Вашей темы. У меня адрес, куда нужно ее загрузить, выглядит вот так: /history-of-blog.ru/public_html/wp-content/themes/styler/images.
  • 3. Откройте файл style.css и замените общий стиль блока кнопок (.knopki-aga) на следующий:
.knopki-aga {
	width:500px; height:25px; margin:15px auto 5px; border:1px dashed #E1E1E1; border-radius:6px; padding:10px 25px 6px 15px; background:#F1F1F1 url(images/butt.png) no-repeat; background-position:500px -4px;
	}

Попробуйте сами разобраться что мы изменили в коде.

Ну вот и все уникальный блок кнопок для сайта готов! И никаких плагинов!

Вот серия статей про кнопки социальных сетей, которая поможет Вам установить 4 самых действенных кнопки к себе на блог (рекомендую читать по порядку!):

Комментировать через ВКонтакте:
Отзывов к посту "Как расположить и оформить кнопки социальных сетей в один ряд" уже 14:
  • Альберт | 16.04.2012 в 17:34

    Спасибо за полезную статью :smile:

  • Владимир Жданов | 18.04.2012 в 19:56

    Отличный пост!!! Можно еще кнопку не прописывать в несколько правил, а сделать например – “url(images/butt.png) no-repeat right bottom;”

  • Руслан | 27.04.2012 в 20:06

    Да помню для меня была основная проблема расположить их в линию. Даже подумывал полностью отказаться от этих кнопок

    • admin | 27.04.2012 в 20:10

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

  • Павел | 11.01.2013 в 16:28

    Проблема в то что кнопки в одну линию не располагаются.

  • Павел | 11.01.2013 в 16:28

    Фейсбук и твиттер легли а вот гугл плюс и вконтакте не могут.

      • admin | 20.02.2013 в 19:05

        Понимаете мне нужно видеть что вы сделали, чтобы сказать где не так. Если ФБ и ТВ располагаются, а другие кнопки сносит, то в результате верных действий тут только один вариант – не хватает ширины страницы.
        Глянул как сделаны кнопки у вас в статьях – там вообще все по другому, то есть не как описано в этих статьях

  • Иван | 10.04.2013 в 18:04

    Все отлично работает. Спасибо за труд. Кто будет жаловаться и говорить, что не работает – шлите к врачу, так как с руками все плохо. ;-)

  • Денис | 16.05.2013 в 23:27

    Отличный пост! Много перебрал информации в Интернете, но эта по моему мнению самая понятная и рабочая на 100%. Всё встало на 5+. Немного подкорректировал расстояние между кнопками и отступ от края страницы. Результаты можно посмотреть у меня на блоге. Большое спасибо автору!

  • max | 15.11.2013 в 5:30

    Приветствую
    Загляни ко мне на сайт и подскажи что сделать с этой…. чертовой кнопкой от вконтакте…
    Спс заранее…

  • Андрей | 11.12.2013 в 20:08

    Добрый день. Спасибо за статью, давно хотел установить кнопки без плагинов. А не подскажите, как эти кнопки можно вывести на главную страницу и чтобы они отражались желательно с левой стороны и висели всегда посередине страницы, независимо перемещения (вниз-вверх) страницы.

  • ZGD | 06.01.2015 в 13:04

    А не проще просто установить код от Share.Yandex? Там на выбор куча кнопок и не надо мудрить с кодами и стилями, пытаясь выстроить их по своему желанию.

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: