Как сделать вертикальную панель кнопок Pluso в блоге.

Доброго времени суток, мои постоянные читатели и гости блога. Делаю очередную шпаргалку о кнопках социальных сетей. Достаточно много вариантов таких кнопочек в сети. Можно самостоятельно сделать свои неповторимые. Об этом шла речь в этой в статье.
Но сегодня поговорим о том, как вывести на боковую панель  вертикальный блок кнопок от сервиса http://share.pluso.ru/. Сервис достаточно известный и наверняка у многих уже есть такие кнопочки. Может в сайдбаре или в конце сообщения, как у меня.

Рассмотрим, как их можно разместить вертикально с левой стороны блога. Вот так это будет  выглядит.

Такая панель всегда  на виду. Нашим читателям будет очень удобно поделиться понравившейся информацией на своих страничках в соц.сетях. Здесь я позволю сделать себе небольшое отступление. Многие начинающие блоггеры путают (у меня об этом спрашивали) кнопки поделиться и присоединиться. Вторые-это когда мы  предлагаем своим посетителям присоединиться к нашей странице в той или иной социальной сети. Стать друзьями, читателями. Ну, а первый вариант-порекомендовать уже своим читателям в сетях ту или иную информацию. Давайте уже вернёмся к сегодняшней теме.

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

Итак, половину дела сделали. Сейчас заходим во вкладку дизайн-добавить гаджет-Html/JavaScript и устанавливаем туда этот код. А вот теперь придётся сделать небольшое изменение в коде. В качестве примера я взяла свой. Ваш будет несколько другим, но сути это не меняет. Посмотрите что и куда нужно добавить, чтобы получить желаемое. Ведь цель у нас вывести всё эти иконки вертикально слева.

<script type="text/javascript">(function() {
  if (window.pluso)if (typeof window.pluso.start == "function") return;
  if (window.ifpluso==undefined) { window.ifpluso = 1;
    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]('body')[0];
    h.appendChild(s);
  }})();</script>
<div class="pluso" style="display:scroll; position:fixed; top:90px; left:25px;" data-background="#ebebeb" data-options="medium,round,line,vertical,nocounter,theme=06" data-services="google,twitter,vkontakte,odnoklassniki,facebook,liveinternet,moimir,pinterest,blogger,surfingbird,email"></div>

Именно после строки <div class="pluso" , сделав один пробел, добавляем строку

style="display:scroll; position:fixed; top:90px; left:25px;

Прошу прощения, но я должна сделать одну важную поправку. Эта строка относиться к варианту, если вы выбрали кнопки без фона. В том случае, если с фоном, то после  участка <div class="pluso"  data-background="#c2a5ee" ( у вас оно может быть другим). Вставить вот такую строчку

style="display:scroll; position:fixed; top:90px; left:50px;

Сохраняем гаджет и перетаскиваем его ниже сообщения блога. 

Не забудьте нажать сохранить расположение. Возвращайтесь на блок, чтобы посмотреть результат. Вполне возможно, что эта панель буде заходить на сообщения. Не волнуйтесь. Всё это можно отрегулировать, изменяя в ту или иную стороны значение left:25px. Это расстояние от края экрана. 

Как видите , сложного в установке ничего нет. Если вам такой вариант панели кнопок пришёлся по душе приступайте к реализации. 

Сегодня у меня всё. Советую ещё прочитать пост какие кнопки соц.сетей выбрать. Возможно, захочется установить что-то другое.   До встречи.

Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :