Миниатюрные кнопки социальных сетей с красивым эффектом.

кнопки социальных сетей для блога
Всем, доброго времени суток. Без кнопок социальных сетей сейчас не обходится ни один блог. Это кнопки поделиться с друзьями и присоединится к аккаунту или группе в социальных сетях. Предлагаю вам сегодня вариант миниатюрных кнопок с красивым эффектом при наведении курсора,
которые недавно установила на блоге шпаргалки блогерши. Посмотрите вверху над сообщениями.

Код совершенно простой и устанавливается в Блоггере через гаджет HTML/JavaScript.
Единственное что нужно - это правильно вписать адреса ваших страниц в той или иной социальной сети. Новичкам поможет статья как просто узнать адрес RSS канала, канала на You Tube и свой ID в Гугл+.

Сам код. Скопируйте его в блокнот, так как он заключён в полосу прокрутки, иначе просто работать не будет корректно. И так удобнее будет вносить соответствующие изменения.

<ul class="spicesocialwidget">
<li class="facebook">
<a rel="nofollow" href="адрес страницы в facebook " target="_blank" title="facebook">
</a></li>

<li class="googleplus">
<a rel="nofollow" href=" адрес страницы в Гугл+" target="_blank" title="googleplus">
</a></li>

<li class="twitter">
<a rel="nofollow" href=" адрес страницы в twitter" target="_blank" title="twitter">
</a></li>
<li class="rss">
<a rel="nofollow" href="http://feeds.feedburner.com/shpargalochkiru " target="_blank" title="rss">
</a></li>

<li class="youtube">
<a rel="nofollow" href=" адрес канала в youtube " target="_blank" title="youtube">
</a></li>
</ul>
<style>
ul.spicesocialwidget {float:right;}
ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;}
ul.spicesocialwidget li a{background-color:transparent;background-image:url('http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 0}

ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}
ul.spicesocialwidget li.rss a{ background-position:-192px 0}
ul.spicesocialwidget li.twitter a{ background-position:-256px 0}
ul.spicesocialwidget li.youtube a{ background-position:-320px 0}
ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}
ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}
ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}
ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}
ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}
</style>

Если в каких то из перечисленных вариантов у вас нет страницы, то просто уберите из кода один из соответствующих строчек такого вида ( я для примера отметила красным цветом всё, что в коде касается канала youtube). Со всеми остальными аналогично.

<li class="youtube">
<a rel="nofollow" href=" адрес канала в youtube " target="_blank" title="youtube">
</a></li>

ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}

ul.spicesocialwidget li.youtube a{ background-position:-320px 0}

Готовый код миниатюрных кнопок социальных сетей устанавливаем в гаджет HTML/JavaScript и перетаскиваем его в нужное место макета блога.

Сегодня у меня всё. Спасибо за внимание и до новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


17 комментариев:

  1. Выглядит очень мило, ненавязчиво. Спасибо, Виктория. Попробую применить

    ОтветитьУдалить
  2. Любовь, мне тоже понравилось пока их лепила. И вроде как не навязчево и в то же время эффект делает своё дело.

    ОтветитьУдалить
  3. И мне нравится. Очень приятные, деликатные на вид кнопки с красивым эффектом и понятной инструкцией установки.

    ОтветитьУдалить
    Ответы
    1. Наташа, значит мы где-то на одной волне. так что ли.

      Удалить
  4. У меня, как-то перестала отображаться иконка вконтакте и я убрала код и благополучно забыла где он теперь обитает. У тебя тоже этой сети нет? Утащила код к себе. Спасибо, Викусь

    ОтветитьУдалить
    Ответы
    1. Ирина, как-то хотела тебе по поводу ВК написать. Периодически заглядываю к тебе. Можно подобрать её, но пока совсем в запаре. Да ладно, Бог с ней. пользуйся на здоровье.

      Удалить
  5. Вика, спасибо. У меня получилось! Мне кнопочки нравятся.

    ОтветитьУдалить
    Ответы
    1. Любовь, я рада за вас. Вот оказывается мелочь а приятно.

      Удалить
  6. Виктория! Мне больше нравятся кнопки внизу под вашими постами! Они у вас ведь закрыты от индексации? Вы много пишите об установлении кнопок соц. сетей.Подскажите, где мне можно почитать?

    ОтветитьУдалить
    Ответы
    1. Ирина,у меня есть отдельный раздел в гаджете разделы блога. Там соц. сети. Ну вот даже ссылку сейчас вам дам по поводу всего что у меня есть. http://www.shpargalochki.ru/search/label/%D1%81%D0%BE%D1%86%D1%81%D0%B5%D1%82%D0%B8?max-results=40
      А кнопки у меня от Яндекса.

      Удалить
  7. Виктория! Я изучила все ваши посты о соц. сетях. СПАСИБО за ссылку! В последние сообщения своих блогов я вставила новые кнопки от Яндекс (от Гугл пока не убрала, только собираюсь, чтобы не было лишних внешних ссылок). Все кнопки вроде работают (Twitter, Facebook, Google+, Tumblr и даже в Одноклассниках смогла поделиться именно сообщением, а не блогом)(ещё след. посты попробую). Проблема в Pinterest. В Яндекс share про Пинтерест написано, что надо вставить картинку (уже непонятно). Я вставила ссылку со своей странички. Когда нажимаю кнопку на посте, открывается доска с моей страницей, но поделиться нельзя. Картинка не отображается. Без картинок поделиться нельзя. Может быть я сделала неправильно? Когда делилась с Пинтерест изображение было вставлено не по ссылке, а настоящая картинка.

    ОтветитьУдалить
    Ответы
    1. С Pinterest. не зная. Там ведь нужно на сколько мне известно устанавливать код в шаблон блога. Поищите информацию в интернете. Мне попадалась такая.

      Удалить
  8. Виктория! В этот раз кнопки от Яндекса вставляла в конец каждого сообщения в редакторе. Здесь они лучше работают!

    ОтветитьУдалить
    Ответы
    1. Ирина, ну и замечательно.

      Удалить
  9. Виктория! Спасибо я поищу информацию!

    ОтветитьУдалить
    Ответы
    1. Да, Ирина. Я давно это делала на одном из блогов. Но что-то посчитала, что мне это не нужно.

      Удалить

Пользовательский поиск