Как сделать вертикальную панель кнопок 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. Это расстояние от края экрана. 

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

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


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

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

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

11 комментариев:

  1. Вика, а ссылка выдаёт ошибку( Очень хочу кнопочки! Загляну позже,ох...

    ОтветитьУдалить
  2. Лариса, заходи . Всё поправила. Делай себе кнопочки.

    ОтветитьУдалить
  3. Вика, а внизу каждого сообщения у тебя тоже кнопочки из этого сервиса?

    ОтветитьУдалить
  4. Да, Лариса но устанавливаются они по другому.

    ОтветитьУдалить
  5. Здравствуйте, Вика. Всё сделала. как Вы написали. Панель встаёт горизонтально. Почему?

    ОтветитьУдалить
  6. Людмила Геннадьвна. Проверьте выбрали ли Вы в сервисе Pluso вертикальное расположение. Поверьте точно ли скопировали строку, которую нужно вставить. Каждая точка и чёрточка важны. И попробуйте ещё переместить гаджет в который код вставляете ещё ниже. Если что напишите мне на форму связи какие Вы хотите.(цветные, круглые, квадратные , большие, маленькие и т.д.

    ОтветитьУдалить
  7. Людмила Геннадиевна-сделала небольшую поправку в посте. На тот случай если кнопки выбраны с фоном, строка вставляется немного иначе.

    ОтветитьУдалить
  8. Вика, большое Вам спасибо. Это то, что я хотела.

    ОтветитьУдалить
  9. Людмила, я очень рада, что получилось. Пойду ка посмотрю. Математика-наука точная. И здесь тоже это необходимо. Обращайтесь.

    ОтветитьУдалить
  10. Вика а о гаджете подписки в правой колонке расскажешь? Уж очень привлекательная штука, давно приметил а как прикрутить не знаю. Что за сервис?

    ОтветитьУдалить
  11. Привет, Владимир. Никакого сервиса нет. Этим я уже делилась вот здесь.
    http://www.shpargalochki.ru/2014/05/stilnye-formy-podpiski.html#more. Бери, пользуйся.

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

Пользовательский поиск
Foto Saya
My Photo