Яркие социальные кнопки для Blogger

Не секрет, что социальные кнопки помогают авторам продвигать блог. Если читателям понравилась статья, наверняка, они захотят поделиться информацией о ней с друзьями. Или добавить статью в закладки, чтобы потом быстро ее найти. Для этого и служат социальные кнопки. Сегодня расскажу, как добавить в блог на Blogger'е яркие кнопки от Pluso.


 1. Заходим на сайт http://share.pluso.ru/

2. Выбираем социальные сети, кнопки которых хотим добавить в блог:
 Я добавила к основным популярным соцсетям ВКонтакте, Одноклассники, Facebook, Twitter, Google+, Мой мир@Mail.Ru еще Blogger, LiveJornal, В Кругу Друзей, Я.ру. А также сервисы закладок: от Yandex, Yahoo, Google, Бобрдобр.

 3. Настраиваем внешний вид социальных кнопок:

• большие/средние/мелкие
• квадратные/круглые
• в одну строку/в две строки
• горизонтальные/вертикальные
• со счетчиком/без счетчика
• без фона/с фоном

 4. Слева можем осуществить предпросмотр кнопочек. Например:

5. Если Все нравится - копируем код:

6. В настройках блога ищем пункт Дизайн. Дальше на схематичном изображении нажимаем Добавить гаджет > Основы > HTML/JavaScript и поле Содержание вставляем код социальных кнопок. И сохраняем гаджет.

Перетаскиваем его в нужное место.

Чтобы вставить вертикальные фиксированные социальные кнопки , нужно (идею взяла здесь):

1) В настройках внешнего вида кнопок выбрать - вертикальные, в одну строку. Большие или средние - в зависимости от Вашего блога (ширины полей справа или слева).

2) Скопировать код.

3) Вставить код кнопок в новый гаджет (смотри выше шаг 6). Пока не сохранять.

4) Добавить строку в код (для фиксации и расположения социальных кнопок):

• Если Вы выбрали кнопки с фоном, то в строку                               

<div class="pluso" data-options="medium,square,line,vertical,nocounter,theme=04"

        после слова "pluso" вставить строку:

       display:scroll; position:fixed; top:90px; left:50px;

• Если выбрали кнопки без фона, то также после слова "pluso" вставить строку:

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

5) Нажать Просмотр. Если кнопки далеко "наезжают" на контент блога или не входят по высоте, это можно отредактировать.

     top - отступ кнопок от самого верха блога (его можно уменьшить).

     left:50px - расположение кнопок слева на расстоянии 50. Я заменила left на right (справа) и уменьшила расстояние до 1px.

ПРИМЕР кода фиксированных вертикальных социальных кнопок по правому краю блога:

<script type="text/javascript">(function() {

      if (window.pluso) {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')  + '://x.pluso.ru/pluso-x.js';

       var h=d[g]('body')[0];

       h.appendChild(s);

    })();

 </script>

<div class="pluso-engine" style="display:scroll; position:fixed; top:55px; right:1px;" pluso-sharer={"buttons":"vkontakte,odnoklassniki,facebook,twitter,google,moimir,googlebookmark,blogger,liveinternet,livejournal,myspace,friendfeed,vkrugu,moikrug,email,print,more","style":{"size":"big","shape":"square-corner","theme":"theme05","css":"background:transparent"},"orientation":"vertical","multiline":false} ></div>

6) Сохранить гаджет.

Теперь и на Вашем блоге появятся красивые и яркие социальные кнопки. 

P.S. Кстати, Вы можете протестировать мои вертикальные кнопочки справа, понажимать их.