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

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

Код совершенно простой и устанавливается в Блоггере через гаджет 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