Home»Приложения и сервисы»Вертикальные социальные кнопки для Blogger (Blogspot)

Вертикальные социальные кнопки для Blogger (Blogspot)

0
Shares
Pinterest Google+

Эта статья будет посвящена вертикальным социальным кнопкам, или, как их еще называют, «плавающие». Я давненько мечтал себе установить именно такие и наконец поставил.

Установка очень проста и не займет много времени. Итак, приступим.

Переходим по адресу: share42, выбираем размер и количество кнопок, по желанию, кнопочку наверх, rss. Ставим галочку «Вертикальная плавающая», выбираем кодировку для сайта для Blogger UTF-8, вставляем ссылку вашего rss-канала (если выбрали), и можете просмотреть, как будет все это выглядеть.

Скачиваем готовый скрипт на рабочий стол вашего компьютера, извлекаем файлы из архива, опять же, на рабочий стол, чтоб не искать потом.

Далее эти файлы нужно залить на ваш хостинг, создаём проект и заливаем туда оба файла — сам скрипт и картинку с иконками соцкнопок.

Соцкнопки

Нажимаем на загрузки в панели управления хостингом, выбираем файл, который только что загрузили, например, share42.js. Жмем правой кнопкой мыши на файл и копируем адрес ссылки, которую будем вставлять в скрипт.
Вот сам скрипт:
<script src=’http://share422311.googlecode.com/files/share42.js’ type=’text/javascript’/>
<script type=’text/javascript’>share42(http://share422311. googlecode.com/files/icons.png)</script>
<div class=’share42init’ data-margin=’250′ data-top1=’300′ data-top2=’20’/></div>.

С помощью этой строчки меняем расположение кнопок и отступы.

Теперь готовый скрипт вставляем в блог через админку блога, для этого нужно выбрать: дизайн — добавить гаджет, выбираем HTML/Java Script-гаджет и ставим туда скрипт. Сохраняем расположение и смотрим, что получилось.

Можно придать эффект кнопкам. Для этого в админке выбираем шаблон — изменить HTML — расширить шаблоны виджета, — и ищем ]]></b:skin>.
Прямо перед ним вставляем файл стилей:
<script>
#share42 {padding: 6px 6px 0; 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}
</script>, жмем просмотр, если все нормально, сохраняемся.

Тут можно поэкспериментировать с тегами <script> и </script>, без них виджет кнопок будет выглядеть немного иначе.

Эти кнопки хороши тем, что они построены на css-скрипте и не перегружают блог в отличие от HTML-кнопок. Может, кому-то понравится горизонтальный вариант, который вы найдете там же, на SHARE42.
Делайте все как я описал, и у вас все получится.