Яскраві соціальні кнопки для Blogger

Яскраві соціальні кнопки для 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. До речі, Ви можете протестувати мої вертикальні кнопочки праворуч, по натискати їх.