Делаем красивости на блоге. Кнопки от Pluso

Приветствую всех!

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

Понятно, что вопрос связанный с кодом лучше отдать на откуп профессионалам, за не большие деньги хороший верстальщик сделает гораздо лучше и быстрее, но, во-первых, мне было интересно сделать это самому, а, во-вторых, не настолько все сложно, чтобы обращаться к услугам профессионалов.

Тем более, что данную статью я пишу именно для начинающих блоггеров, таких как я, да и вся процедура установки занимает от силы 15 минут.

Вот так у меня выглядели кнопки, когда я только первый раз их установил

Согласитесь, не очень красиво, к тому же, в зависимости от шаблона, кнопки могут еще наползать на нижележащий текст.

Вот с этой проблемой, я и разбирался, теперь мои кнопки выглядят так:

Правда, так лучше? Кнопки расположены по центру страницы, появились нужные надписи и отступы сверху и снизу. Вот как это сделать я и расскажу.

Давайте начнем!

Существует несколько сервисов позволяющих добавить красивые и функциональные кнопки:

Сервис от Яндекса (Яндекс API), мне не понравился, какие-то невзрачные и мелкие кнопки. На мой взгляд эти кнопки можно рассматривать, только за не имением альтернативы.

Поэтому, я воспользовался сервисом Pluso, позволяющем выбрать кнопки для разных социальных сетей, разных форм и расцветок. С фоном и без фона, в общем на любой самый взыскательный вкус.

После того, как выбрали нужную форму, цвет, количество и расположение кнопок, начинается самое главное. Программа сгенерирует нам нужный код, который мы вставим в нужное нам место на блоге.

Нажимаем кнопку “КОПИРОВАТЬ” и идем в панель администрирования Вашего блога.

Внимание! Перед тем, как проделывать какие-либо действия с кодом, не забудьте сделать бэкап вашего сайта или сохраните копии файлов, в которые мы будем вставлять код, в отдельной папке.

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

Вставляем код

Для того что бы кнопки отображались в конце поста нам потребуется файл  single.php, а для того чтобы сделать отступы сверху и снизу – style.css

В панели администрирования заходим в раздел Внешний вид и выбираем меню Редактор. Открываем файл single.php и находим в нем вот такую строчку

<?php the_content('Читать далее &raquo;'); ?>

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

Собственно, все. Если зайти на сайт, то мы увидим установленные кнопки как на первом изображении в этой статье – без отступов сверху и снизу с выравниванием по левому краю.

Выравниваем по центру

Для того, чтобы выровнять по центру нам необходимо заключить наш код в блок с помощью тега <div>. Если вам не понятна последняя фраза, то не заморачивайтесь, просто добавьте перед кодом кнопок вот такой код:

<div align="center">

После кода необходимо добавить закрывающий тег </div>.

Должно получиться вот так:

Смотрим что получилось, если все сделано правильно, то ваши кнопки социальных сетей должны располагаться по центру страницы.

Добавляем надписи и отступы сверху и снизу

Вам нравиться как выглядят и располагаются кнопки?

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

К полученному коду в файле single.php добавляем еще один блок вот такого вида:

<div class="knopki">

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

Должно получиться вот так:

Обязательно в конце кода добавляем дополнительный закрывающий тег </div>.

С кодами в файле single.php разобрались, нажимаем кнопку Обновить файл и открываем файл style.css.

В самом конце файла вставляем такой код

.knopki {
  margin: 10px 10px 10px 10px;
 }

Margin – специальная команда, позволяющая делать отступы, первая цифра – отступ сверху, вторая – отступ справа, третья – отступ снизу, четвертая – отступ слева.

Обновляем файл и смотрим, что получилось.

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

Ф-фух. Длинное получилось описание десятиминутного действия.

Спасибо всем, за внимание!

С уважением, Абрамович Артем.

P.S. У Вас все получилось? Нет? Напишите мне в комментариях, я конечно не профессиональный верстальщик, но постараюсь помочь.

Лирическое отступление: