26 февраля 2013 Автор: Водопьянов Иван
Добрый день дорогие друзья! Давненько не писал в блог,нужно исправляться. Сегодня хочу поделиться с вами очередной полезностью которая будет полезна вашему блогу,а именно расположить кнопки социальных сетей в одну линию. Обычно кнопки выводят на блогах вордпресс с помощью плагина , мы с вами обойдемся без него поскольку использование большого колличества плагинов создаст дополнительную нагрузку на ваш сервер.Выводить будем с помощью cкрипта.Вот как это будет примерно выглядеть:
Для красоты я добавил фон и обводку в виде пунктира,по своему усмотрению вы можете убрать либо изменить под себя. Итак начинаем:
В файле single.php прописываем этот код:
Код кнопки твиттера Код кнопки фейсбук Код кнопки вконтакте Код кнопки гугл +
В файле 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; – задали фоновый цвет.
На выходе получили вот такую вещь:
А давайте еще больше украсим наш блок кнопок и добавим помимо цветового фона фоновую картинку. Картинка может быть любой. Я вот, к примеру, нашел картинку… эм.. как же эта штука называется то 
В общем получилось вот что:
- 1. Скачайте вот эту картинку:
- 2. Загрузите ее в папку картинок Вашей темы. У меня адрес, куда нужно ее загрузить, выглядит вот так: /russian-bizness.ru/wp-content/themes/images.
- 3. Откройте файл style.css и замените общий стиль блока кнопок (.knopki-aga) на следующий:
Попробуйте сами разобраться что мы изменили в коде.
Ну вот и все уникальный блок кнопок для сайта готов! И никаких плагинов!
Первоисточник
C уважением,Водопьянов Иван