
Код совершенно простой и устанавливается в Блоггере через гаджет 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>
<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 и перетаскиваем его в нужное место макета блога.
Сегодня у меня всё. Спасибо за внимание и до новых встреч.
здесь можно оформить подписку на новые шпаргалки
Выглядит очень мило, ненавязчиво. Спасибо, Виктория. Попробую применить
ОтветитьУдалитьЛюбовь, мне тоже понравилось пока их лепила. И вроде как не навязчево и в то же время эффект делает своё дело.
ОтветитьУдалитьИ мне нравится. Очень приятные, деликатные на вид кнопки с красивым эффектом и понятной инструкцией установки.
ОтветитьУдалитьНаташа, значит мы где-то на одной волне. так что ли.
УдалитьУ меня, как-то перестала отображаться иконка вконтакте и я убрала код и благополучно забыла где он теперь обитает. У тебя тоже этой сети нет? Утащила код к себе. Спасибо, Викусь
ОтветитьУдалитьИрина, как-то хотела тебе по поводу ВК написать. Периодически заглядываю к тебе. Можно подобрать её, но пока совсем в запаре. Да ладно, Бог с ней. пользуйся на здоровье.
Удалитьспасибо
ОтветитьУдалитьВика, спасибо. У меня получилось! Мне кнопочки нравятся.
ОтветитьУдалитьЛюбовь, я рада за вас. Вот оказывается мелочь а приятно.
УдалитьВиктория! Мне больше нравятся кнопки внизу под вашими постами! Они у вас ведь закрыты от индексации? Вы много пишите об установлении кнопок соц. сетей.Подскажите, где мне можно почитать?
ОтветитьУдалитьИрина,у меня есть отдельный раздел в гаджете разделы блога. Там соц. сети. Ну вот даже ссылку сейчас вам дам по поводу всего что у меня есть. http://www.shpargalochki.ru/search/label/%D1%81%D0%BE%D1%86%D1%81%D0%B5%D1%82%D0%B8?max-results=40
УдалитьА кнопки у меня от Яндекса.
Виктория! Я изучила все ваши посты о соц. сетях. СПАСИБО за ссылку! В последние сообщения своих блогов я вставила новые кнопки от Яндекс (от Гугл пока не убрала, только собираюсь, чтобы не было лишних внешних ссылок). Все кнопки вроде работают (Twitter, Facebook, Google+, Tumblr и даже в Одноклассниках смогла поделиться именно сообщением, а не блогом)(ещё след. посты попробую). Проблема в Pinterest. В Яндекс share про Пинтерест написано, что надо вставить картинку (уже непонятно). Я вставила ссылку со своей странички. Когда нажимаю кнопку на посте, открывается доска с моей страницей, но поделиться нельзя. Картинка не отображается. Без картинок поделиться нельзя. Может быть я сделала неправильно? Когда делилась с Пинтерест изображение было вставлено не по ссылке, а настоящая картинка.
ОтветитьУдалитьС Pinterest. не зная. Там ведь нужно на сколько мне известно устанавливать код в шаблон блога. Поищите информацию в интернете. Мне попадалась такая.
УдалитьВиктория! В этот раз кнопки от Яндекса вставляла в конец каждого сообщения в редакторе. Здесь они лучше работают!
ОтветитьУдалитьИрина, ну и замечательно.
УдалитьВиктория! Спасибо я поищу информацию!
ОтветитьУдалитьДа, Ирина. Я давно это делала на одном из блогов. Но что-то посчитала, что мне это не нужно.
Удалить