Регистрация Войти
Вход на сайт

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

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

В этой статье мы рассмотрим как оформить блок кнопок социальных сетей, вывести их в один ряд, задать фоновый цвет и границу. Таким образом у нас получится вот такой блок кнопок:
Как расположить и оформить кнопки социальных сетей в один ряд

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

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

В зависимости от CMS например для DLE в файле необходимого шаблона, а для Wordpress в файле 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; border:1px dashed #E1E1E1; border-radius:6px; padding:10px 16px 6px 35px; background:#F1F1F1;
}
.twit {
float:left; width:120px;
}
.facebook {
float:left; width:140px;
}
.vk {
float:left; width:160px;
}
.google {
float:left; width:80px;
}


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

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

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

На выходе получили следующее:
Как расположить и оформить кнопки социальных сетей в один ряд


источник: history-of-blog.ru
Категория: SMO и SMM
Актуальные версии, стоимость и возможности сервисов и программ уточняйте на сайтах их авторов.
comments powered by Disqus
» » Как расположить и оформить кнопки социальных сетей в один ряд