Как расположить кнопки социальных сетей в одну линию? | Блог Водопьянова Ивана о бизнесе и его продвижении в сети интернет

Об авторе

Приветствую вас дорогие друзья!Меня зовут Иван Водопьянов и я являюсь автором данного блога. Здесь вы найдете все необходимое для создания вашего сайта,а также различные дополнения и конечно же авторские методики развития собственного инфо-бизнеса.Кликайте,изучайте,применяйте!


Как расположить кнопки социальных сетей в одну линию?



1jpgДобрый день дорогие друзья! Давненько не писал в блог,нужно исправляться. Сегодня хочу поделиться с вами очередной полезностью которая будет полезна вашему блогу,а именно расположить кнопки социальных сетей в одну линию. Обычно кнопки выводят на блогах вордпресс с помощью плагина , мы с вами обойдемся без него поскольку использование большого колличества плагинов создаст дополнительную нагрузку на ваш сервер.Выводить будем с помощью cкрипта.Вот как это будет примерно выглядеть:

фы

Для красоты я добавил фон и обводку в виде пунктира,по своему усмотрению вы можете убрать либо изменить под себя. Итак начинаем:

В файле 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; widthpx;
    }

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

Теперь следует отредактировать лишь общий стиль блока кнопок (.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; – задали фоновый цвет.

На выходе получили вот такую вещь:

blok-knopok

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

blok-knopok-2

  • 1. Скачайте вот эту картинку:

butt

  • 2. Загрузите ее в папку картинок Вашей темы. У меня адрес, куда нужно ее загрузить, выглядит вот так: /russian-bizness.ru/wp-content/themes/images.
  • 3. Откройте файл style.css и замените общий стиль блока кнопок (.knopki-aga) на следующий:

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

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

Первоисточник

 C уважением,Водопьянов Иван



Друзья,пожалуйста поделитесь данной заметкой в социальных сетях!


Вам так же будет интересно:

Главная | Все статьи блога | Обо мне и о блоге | Мои видеокурсы | Обратная связь