Плавающие (статические) социальные кнопки на JQuery

Приветствую вас, дорогие друзья! Во первых хочу доложить вам, что создать блог на движке WordPress, по моему, самое лучшее решение, которое я принял за последнее время. Освоить его не составит большого труда. На просторах интернета, существует огромное количество блогов, в помощь начинающим и в том числе мой - https://wordpressmania.ru.

блог на WordPress
Создать блог на WordPress проще простого

Советую всем вам , как можно быстрей познакомится с WordPress. Не пожалеете, обещаю.

Сегодня я продолжаю популярную тему социальных кнопок. Предлагаю вам виджет - статические социальные кнопки на JQuery с красивым эффектом. Расположение кнопок - на краю блога. Всего кнопок популярных социальных сетей шесть, это facebook, twitter, google plus, pinterest, youtube, rss.

social_ bookmark
Кнопки facebook, twitter, google plus, pinterest, youtube, rss

При наведении курсора мышки на иконку, кнопка эффектно выдвигается. Предлагая посетителям вашего блога добавить вас в друзья. Посмотреть работу панели социальных кнопок и добавить меня в друзья, можно в демо блоге (уже удалил, прошу прощения). Там же, можно ознакомиться с формой комментариев - как в WordPress только для Blogger. Как установить такие комментарии читайте здесь.

Как установить панель плавающих социальных кнопок в Blogger

Заходим в панель управление blogger - Шаблон - Изменить HTML. Находим строчку ]]></b:skin> и перед ней (чуть выше) вставляем код стиля CSS:

Регулировка положения кнопок, расстояние от вверха блога: top: 130px; Далее, находим тег </head> и перед ней (чуть выше) добавляем скрипт:

Если у вас подключена библиотека JQuery, то первую строчку копировать не надо. Дальше последнее. перед </body> вставляем такой код:

В этом коде заполняем свои данные социальных сетей - your FB, your twitter, your G+ и так далее. Сохраняйте шаблон. Готово. Удачи.

С уважением, Сергей

Комментарии

  • Приветствую, меня интересует такой вопрос: можно ли из кода убирать ненужные социальные иконки? К примеру, на Pinterest и Youtube меня нет, соответственно, мне они не нужны. От этого код не пострадает, если убрать?

    • Привет, Эдуард. Думаю, что можно. Останется четыре кнопки, но уже как то не то. Будут ли они смотреться?

  • Как можно сделать, что бы только у меня был, вконтакте, фейсбук, твиттер, ютубе и все ? проблема в иконках сейчас у меня, ссылки я могу по менять )

    • Удали в стилях эти строчки:
      .social-buttons #rss-btn .social-icon,
      .social-buttons #pinterest-btn .social-icon,

      .button-left #rss-btn span {
      background-position: right -80px;
      }
      .button-left #pinterest-btn span {
      background-position: 11px -177px;
      }
      .button-right #rss-btn span {
      background-position: 11px -80px;
      }
      .button-right #pinterest-btn span {
      background-position: 11px -177px;
      }
      .social-buttons #rss-btn:hover .social-icon {
      background-color: #FF8B0F;
      }
      .social-buttons #pinterest-btn:hover .social-icon {
      background-color: #D43638;
      }

      Далее, удали в самом коде две строчки- оставь только нужные соцкнопки.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Решите задачку: *