» » Как установить кнопки соцсетей в статью на Blogger

Как установить кнопки соцсетей в статью на Blogger

Сегодня поделюсь с вами как установить кнопки соцсетей в тело статьи на блоге. Сделать это можно двумя способами.

Способ 1

Этот способ довольно простой: заходим в Настройки — Сообщения, комментарии и настройки доступа. На странице найдите Шаблон сообщения, нажмите Изменить, в открывшемся окне пишем нужное нам сообщение, в нашем случае вставляем код кнопок, так же можно написать какой-либо текст, например — не ленись, поделись, нажми на кнопку, который будет отображаться над кнопками или под ними, в зависимости от того, где будет текст, над кодом или под кодом кнопок. Сохраняем настройки. Теперь в каждой статье будут появляться кнопки соцсетей. Кнопки в обычном режиме в редакторе не видны.
Способ 1
Можно добавлять код кнопок в режиме XTML в конце статьи, при написании каждого сообщения.

Способ 2

Переходим в шаблон блога — Тема-Изменить ХТМЛ. Ставим курсор в любом месте редактора и нажимаем сочетание клавиш CTRL+F. В открытое окошко вписываем: 
post-share-buttons goog-inline-block, нажимаем Enter на клавиатуре, нужный код появится в шаблоне, он будет выделен жёлтым цветом. Ниже найденной строчки вставляем код кнопок. (Где их взять расскажу позже).
Способ 2
Нажимаем — Предварительный просмотр темы . Смотрим всё ли нас устраивает и нажимаем Сохранить тему.
Дальше нужно сделать некоторые дополнения.
Что бы код не был виден на главной странице в анонсах статей, а только в самой статье, для кода нужно добавить условие <b:if cond='data:blog.pageType == &quot;item&quot;'> код кнопок </b:if>.
 А так же если хотите добавить надпись или рамочку для блока кнопок, нужно проделать некоторые шаги. 
В любом редакторе ХТМЛ пишем нужный текст и другие дополнения — шрифт, цвет, размер. Удобно всё делать в самом Блоггере или в любом визуальном редакторе. Оформляете код в режиме редактора, а код копируете в режиме html.
редактор
Подытожим создание блока кнопок соцсетей, перед тем как установить его в шаблон:
  1. Находим код кнопок соцсетей
  2. Делаем в редакторе оформление надписи, дополнения и украшения + код кнопок, копируем весь код в режиме ХТМЛ
  3. <b:if cond='data:blog.pageType == &quot;item&quot;'> оформление+код кнопок</b:if>
  4. Находим в шаблоне post-share-buttons goog-inline-block, вставляем готовый код. 

Сервисы кнопок

  • http://share.pluso.ru/
  • http://share42.com/ru
  • Tech.Yandex.ru
  • http://social-likes.js.org/ru/
  • Odnaknopka.ru 
  • Pip.Qip.ru
  • https://usocial.pro/
  • http://uptolike.ru/
  • http://www.addthis.com/
  • https://www.sharebuttons.com/
  • https://www.addtoany.com/
  • https://www.sharethis.com/
  • http://share.itraffic.su/ - не работает
Есть ресурсы как на английском языке, так и русскоязычные. Стили кнопок разные, есть с эффектами анимации. В каких то сервисах нужна регистрация, а где-то нет.
Просмотрите внешний вид кнопок на каждом сайте и берите код понравившихся.
На примере сайта http://share.itraffic.su/ я покажу как настраивать кнопки соцсетей и где находится код.
Переходим на сайт, регистрация не нужна.
регистрация не нужна
  1. Настраиваем кнопки
  2. Смотрим их внешний вид в окне рядом
  3. Установив нужные настройки кода, копируем
Рассмотрим изменения кнопок поближе:
изменения кнопок
  1. Выбираем стиль кнопок, которых достаточное количество.
  2. Позиционирование кнопок — где будут находиться кнопки: внизу, справа, слева, горизонтально и т.д.
  3. Выберем размер
  4. Счётчики — без него, общий счётчик, счётчик для каждой кнопки
  5. Можно не выбирать какие нужны соцсети, а нажать  — все кнопки
  6. Кнопка наверх - в блоке кнопок будет кнопка, нажав на которую, читатель может с низа страницы вашего сайта, плавно переместится наверх.
  7. Нужна ли вам анимация кнопок, если да — нажимаем включить
  8. Эффект при наведении — кнопки подпрыгивают, качаются и т.п.
  9. Цветовая гамма кнопок — можно сделать кнопки под цвет блога однотонными, цветными или двухцветными, а так же добавить фон.
  10. Выбираем нужные соцсети, перетаскивая их из правой колонки в левую, меняем их очерёдность по вашему усмотрению, опять перетаскиванием.
По аналогии работают все конструкторы соц кнопок.
Выбирается стиль и другие дополнения, и копируется код.
А напоследок несколько генераторов рамочек, если вам понадобиться ими украсить блок кнопок.
http://4maf.ru/ramochnik.php
http://yablor.ru/blogs/generator-ramochek/4920958#red1
http://angrytools.com/css-generator/border/
http://www.toutimages.com/ - здесь можно найти коды рамочек и много другой информации.

  1. Анонимный24/1/21 10:07

    Да где ж вы все берете эти строки post-share-buttons goog-inline-block ? Нет их в шаблоне !

    ОтветитьУдалить
  2. Ирина Сабанина26/5/21 11:35

    Просто кладезь информации, спасибо! Столько полезных ссылок.

    ОтветитьУдалить

Комментарии со спамом удаляются.