Подпишись: rss feedtwittergoogle plus

Ads 468x60px

>

воскресенье, 24 февраля 2013 г.

Социальные кнопки Share42 на Blogger/Blogspot

Соц кнопки Share42
Всем привет! Месяц назад решил заменить стандартные социальные кнопки на кнопки Share42. Почему? 1.Социальные кнопки Share42 имеют красивый внешний вид. 2. Можно поставить до 46 различных кнопок. Скрипт социальных кнопок написан известным блоггером Dimox. Приступим!
Перед установкой социальных кнопок рекомендую прочитать как удалить родные социальные кнопки. Ведь, вам же не нужны 2 блока социальных кнопок? Также обязательно сохраните шаблон блога, чтобы, если произошла какая-нибудь ошибка, вы легко смогли восстановить всё назад.

Заходим на share42.com. Выбираете нужные вам кнопки и их размер. Также кнопки можно поменять местами.

Соц кнопки Share42

Во втором пункте вы можете выбрать тип панели с иконками: горизонтальные или вертикальные "плавающие". Я выбрал первые. Также вам предлагают добавить иконку сайта share42. Я отказался. Скачиваем скрипт на компьютер.
Соц кнопки Share42
Загрузится Zip архив, который нужно распаковать. В архиве содержится сам скрипт и png иконки соц.кнопок. Эти 2 файла нужно загрузить на хостинг Google Code. Если не знаете как, то читаем эту статью. У меня вот такой скрипт:

<script src='http://имя проекта.googlecode.com/files/share42.js' type='text/javascript'/>
 <script type='text/javascript'>share42(http://имя проекта.googlecode.com/files/icons.png)</script>


Это код нужно разместить в шаблоне вашего блога после кода <b:includable id='comments' var='post'>, чтобы социальные кнопки находились только в статьях. Также можно добавить css стили, чтобы панел с кнопками выглядела как у меня. Перед строкой ]]></b:skin>
нужно вставить вот этот код:

#share42 {display: inline-block; padding: 6px 0 0 6px; background: #FFF; border: 1px solid #E9E9E9; border-radius: 4px;}
#share42:hover {background: #F6F6F6; border: 1px solid #D4D4D4; box-shadow: 0 0 5px #DDD;}
#share42 a {opacity: 0.5}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}
Вы можете изменить его, если разбираетесь в css. Просматриваем шаблон. Если ошибок нет, то сохраняем.
Всё!
Понравилась статья? Расскажи о ней друзьям::

0 коммент.:

Отправить комментарий