Меню

Делаем красивости на блоге. Кнопки от 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. У Вас все получилось? Нет? Напишите мне в комментариях, я конечно не профессиональный верстальщик, но постараюсь помочь.

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

Поддержи проект лайком
55 комментариев
  1. Татьяна / Ответить
    • Абрамович Артем / Ответить
  2. Людмила Винокурова / Ответить
  3. Роман / Ответить
    • Абрамович Артем / Ответить
  4. Сергей Стеклов / Ответить
    • Абрамович Артем / Ответить
  5. Алла / Ответить
    • Абрамович Артем / Ответить
  6. Сергей / Ответить
    • Абрамович Артем / Ответить
      • Сергей / Ответить
        • Абрамович Артем / Ответить
  7. Рашида Гарифулина / Ответить
    • Абрамович Артем / Ответить
      • Рашида Гарифулина / Ответить
        • Абрамович Артем / Ответить
  8. Валентина / Ответить
    • Абрамович Артем / Ответить
  9. Рашида Гарифулина / Ответить
    • Абрамович Артем / Ответить
      • Елена Олейникова / Ответить
        • Абрамович Артем / Ответить
  10. Ксения Юрьевна / Ответить
    • Абрамович Артем / Ответить
  11. Елена Олейникова / Ответить
    • Абрамович Артем / Ответить
      • Елена Олейникова / Ответить
        • Абрамович Артем / Ответить
    • Галина Грабовая / Ответить
      • Абрамович Артем / Ответить
  12. Любовь / Ответить
    • Абрамович Артем / Ответить
  13. Сергей / Ответить
    • Абрамович Артем / Ответить
  14. Ricky T / Ответить
    • Абрамович Артем / Ответить
      • Ricky T / Ответить
        • Абрамович Артем / Ответить
          • Ricky T / Ответить
            • Абрамович Артем /
  15. Елена Олейникова / Ответить
    • Абрамович Артем / Ответить
      • Елена Олейникова / Ответить
        • Абрамович Артем / Ответить
          • Елена Олейникова / Ответить
  16. Наталья / Ответить
  17. Наталья / Ответить
    • Абрамович Артем / Ответить
  18. Наталья / Ответить
    • Абрамович Артем / Ответить
  19. Рита Молчанова / Ответить
    • Абрамович Артем / Ответить
  20. Святослав / Ответить
    • Абрамович Артем / Ответить

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Подписка на новости

Подписка на новости

Хотите первым узнавать о новостях? Тогда подписывайтесь!

Спасибо за подписку! Теперь вам надо подтвердить ее.