Доброго времени суток, мои постоянные читатели и гости блога. Делаю очередную шпаргалку о кнопках социальных сетей. Достаточно много вариантов таких кнопочек в сети. Можно самостоятельно сделать свои неповторимые. Об этом шла речь в этой в статье.
Но сегодня поговорим о том, как вывести на боковую панель вертикальный блок кнопок от сервиса 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" , сделав один пробел, добавляем строку
Но сегодня поговорим о том, как вывести на боковую панель вертикальный блок кнопок от сервиса http://share.pluso.ru/. Сервис достаточно известный и наверняка у многих уже есть такие кнопочки. Может в сайдбаре или в конце сообщения, как у меня.
Рассмотрим, как их можно разместить вертикально с левой стороны блога. Вот так это будет выглядит.
![боковая панель иконок сделать боковую панель иконок соцсетей для блога](http://s020.radikal.ru/i711/1409/b6/8acb428096f4.png)
Такая панель всегда на виду. Нашим читателям будет очень удобно поделиться понравившейся информацией на своих страничках в соц.сетях. Здесь я позволю сделать себе небольшое отступление. Многие начинающие блоггеры путают (у меня об этом спрашивали) кнопки поделиться и присоединиться. Вторые-это когда мы предлагаем своим посетителям присоединиться к нашей странице в той или иной социальной сети. Стать друзьями, читателями. Ну, а первый вариант-порекомендовать уже своим читателям в сетях ту или иную информацию. Давайте уже вернёмся к сегодняшней теме.
Чтобы установить такую панель, переходим по этой ссылке и выбираем те иконки, которые хотим видеть у себя. Подберите их форму, размер, цвет. Путём перетаскивания добавьте необходимые или уберите лишние. Дальше в настройках обязательно укажите -вертикальные. После чего копируйте предложенный код.
![](https://sites.google.com/site/moaspargalocka/knopki-soc-setej/2014-09-26%2012-54-21%20Pluso%20-%20%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8%20%D0%B4%D0%BB%D1%8F%20%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%B0%20%D0%B2%20%D1%81%D0%BE%D1%86%D0%B8%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5%20%D1%81%D0%B5%D1%82%D0%B8%20-%20Google%20Chrome.png)
Итак, половину дела сделали. Сейчас заходим во вкладку дизайн-добавить гаджет-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;
Сохраняем гаджет и перетаскиваем его ниже сообщения блога.
![](https://sites.google.com/site/moaspargalocka/knopki-soc-setej/2014-09-26%2013-10-41%20Blogger%20%20%D1%88%D0%BF%D0%B0%D1%80%D0%B3%D0%B0%D0%BB%D0%BA%D0%B8%20%D0%B1%D0%BB%D0%BE%D0%B3%D0%B5%D1%80%D1%88%D0%B8%20%E2%80%93%20%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%20-%20Google%20Chrome.png)
Не забудьте нажать сохранить расположение. Возвращайтесь на блок, чтобы посмотреть результат. Вполне возможно, что эта панель буде заходить на сообщения. Не волнуйтесь. Всё это можно отрегулировать, изменяя в ту или иную стороны значение left:25px. Это расстояние от края экрана.
Как видите , сложного в установке ничего нет. Если вам такой вариант панели кнопок пришёлся по душе приступайте к реализации.
Сегодня у меня всё. Советую ещё прочитать пост какие кнопки соц.сетей выбрать. Возможно, захочется установить что-то другое. До встречи.
Ой, а что это там ниже? Ну надо же! Нажимаем!
оформите подписку на новые шпаргалки
Вика, а ссылка выдаёт ошибку( Очень хочу кнопочки! Загляну позже,ох...
ОтветитьУдалитьЛариса, заходи . Всё поправила. Делай себе кнопочки.
ОтветитьУдалитьВика, а внизу каждого сообщения у тебя тоже кнопочки из этого сервиса?
ОтветитьУдалитьДа, Лариса но устанавливаются они по другому.
ОтветитьУдалитьЗдравствуйте, Вика. Всё сделала. как Вы написали. Панель встаёт горизонтально. Почему?
ОтветитьУдалитьЛюдмила Геннадьвна. Проверьте выбрали ли Вы в сервисе Pluso вертикальное расположение. Поверьте точно ли скопировали строку, которую нужно вставить. Каждая точка и чёрточка важны. И попробуйте ещё переместить гаджет в который код вставляете ещё ниже. Если что напишите мне на форму связи какие Вы хотите.(цветные, круглые, квадратные , большие, маленькие и т.д.
ОтветитьУдалитьЛюдмила Геннадиевна-сделала небольшую поправку в посте. На тот случай если кнопки выбраны с фоном, строка вставляется немного иначе.
ОтветитьУдалитьВика, большое Вам спасибо. Это то, что я хотела.
ОтветитьУдалитьЛюдмила, я очень рада, что получилось. Пойду ка посмотрю. Математика-наука точная. И здесь тоже это необходимо. Обращайтесь.
ОтветитьУдалитьВика а о гаджете подписки в правой колонке расскажешь? Уж очень привлекательная штука, давно приметил а как прикрутить не знаю. Что за сервис?
ОтветитьУдалитьПривет, Владимир. Никакого сервиса нет. Этим я уже делилась вот здесь.
ОтветитьУдалитьhttp://www.shpargalochki.ru/2014/05/stilnye-formy-podpiski.html#more. Бери, пользуйся.