Кнопки социальных сетей

 Вновь воспользуемся чудесными советами блоггера Марии.

Для начала отключим встроенные blogger'овские кнопки соцсетей.
Идем в Дизайн, в поле "Сообщения блога" нажимаем "Изменить" и в открывшемся окошке убираем галочку "Показывать кнопки для публикации". Сохраняем изменения.



Теперь давайте вставим красивые кнопочки соцсетей. 

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

В Панели инструментов заходим в Шаблон. Давайте сразу договоримся, что перед внесением любых изменений в шаблон блога нужно выполнять "Резервное копирование". Сохраните полученный файл на своем компьютере, чтобы в случае непоправимого вы всегда могли вернуться к исходному варианту.


Нажимаем "Изменить HTML" и попадаем в код шаблона. Ставим курсор внутри рамки с кодом шаблона  и нажимаем Ctrl+F. Появляется окошко поиска.


В строку поиска вставляем  <b:include data='post' name='post'/>. Нажимаем Enter, и в коде высвечивается искомая строка:


Ставим курсор в конец строки  > , нажимаем Enter, подводим курсор под начало строки <b:include.... и вставляем код выбранных социальных кнопок.

Например, можно поставить вот такие круглые кнопочки:


Код этих кнопок:
<center><script type="text/javascript">(function() {
          if (window.pluso)if (typeof window.pluso.start == "function") return;
          var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
          s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
          s.src = ('https:' == window.location.protocol ? 'https' : 'http')  + '://share.pluso.ru/pluso-like.js';
          var h=d[g]('head')[0] || d[g]('body')[0];
          h.appendChild(s);
          })();</script>
        <div class="pluso" data-options="big,round,multiline,horizontal,nocounter,theme=03" data-services="vkontakte,odnoklassniki,moimir,vkrugu,moikrug,yandex,facebook,twitter,google,blogger,liveinternet,livejournal,bookmark,yazakladki,googlebookmark,yahoo,bobrdobr,email,print" data-background="transparent"></div></center>
Или квадратные:


Код этих кнопок:
<center><script type="text/javascript">(function() {
          if (window.pluso)if (typeof window.pluso.start == "function") return;
          var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
          s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
          s.src = ('https:' == window.location.protocol ? 'https' : 'http')  + '://share.pluso.ru/pluso-like.js';
          var h=d[g]('head')[0] || d[g]('body')[0];
          h.appendChild(s);
          })();</script>
        <div class="pluso" data-options="medium,square,multiline,horizontal,nocounter,theme=03" data-services="vkontakte,odnoklassniki,moimir,vkrugu,moikrug,yandex,facebook,twitter,google,blogger,liveinternet,livejournal,bookmark,yazakladki,googlebookmark,yahoo,bobrdobr,email,print" data-background="transparent"></div></center>
Обратите внимание на выделенные красным цветом теги </center>. Кнопки будут располагаться по центру. Если вас это не устраивает, и вы хотите, чтобы они были расположены со сдвигом влево (как обычный текст), просто удалите верхний и нижний теги </center>.

Также можно изменить количество строк. Например, мне больше нравится, чтобы кнопки располагались в одну строчку. Для этого меняем multiline на line

Кроме того, можно поменять размер кнопок. Установленные кнопки этого кода мне показались великоваты, и я их уменьшила. Меняем medium (средний) на small (маленький).

То же самое можно проделать и в коде с круглыми кнопками. Я выделила для вас слова, которые можно заменить.

А если вас все устраивает и без изменений, то можно оставить вставленный код, как есть.

Чтобы посмотреть, что получилось, нажимаем "Просмотреть шаблон".



Блог откроется в режиме предпросмотра, где можно увидеть, установились ли кнопочки. Если все в порядке, нажимаем "Сохранить шаблон" и ждем, пока blogger сохранит внесенные изменения.

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