Оформляем блок кнопок Мы в соцсетях на Blogger

Как вам веселые кнопочки слева? Классно, да?! Они оживают, вращаются, словом вызывают желание на них нажать. Если хотите такие же, давайте приступим к установке блока "Мы в соцсетях".

Есть два варианта установки блока кнопок на Blogger

1. Просто добавить нужный код в гаджет HTML/JavaScript.
2. Править Html шаблон для добавления блока в нужном месте блога.

Добавляем код блока в гаджет HTML/JavaScript

Это самый простой способ, как говориться, "для чайника". В этом случае не надо залезать в шаблон. Для некоторых это принципиально, так как многие боятся случайно напортачить и нажить себе ненужных проблем. Особо ничего настраивать, в этом случае, не придется, только добавить ссылки на ваши странички в социальных сетях.

Итак, процедура стандартная, добавляем в Дизайне гаджет HTML/JavaScript, называем его - "Мы в соцсетях" или как-то еще, а в тело гаджета код ниже. Вместо текста, который выделен цветом, добавьте ссылки на ваши странички в соцсетях.

<style>#social a:hover { background-color: transparent;opacity:0.7; } #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }</style>
<div id="social" align="center">
<a href="Ссылка_на_RSS_канал_блога" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhexG-qLn-_Pv7uFo-KNQS5DGcUq2mdY_mpYzhxPj9pOsyWSolQb3-HCzye9BO-k1yqxM17B9geYQPYuLKamwb_aCzENtWaX_OSbeEIkpzqpjSAIPUjmsFag4lDDMuqqeuyLYXA2o-N0vs/s800/feed-48x48.png" width="48" height="48" title="RSS-подписка" /></a><a href="Ссылка_на_страничку_в_Facebook" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivzylVrylXcK3wwUl9g42QGI7zDpdmgI-nqwPedVSd4BIZCYBPfvDnUXluoRO0JfBglR18MqQc42zGWCk19PE4FgkEupr9qkSJ8q8SLR-Aik1WjhTq1vqE6-j5IAi2RB3x90oZaGhnyWs/s800/facebook-48x48.png" style="margin-left: 5px;" width="48" height="48" title="Страница на Facebook" /></a><a href="Ссылка_на_страничку_В_контакте" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicNwrcRM8Q3Zz69ibvYT3hGu9u5Eje4KHvCBfcKGAPFejTexYe0W1NjORsuk8U6kaSLFbUOmAeGJT8j-CH6xEz1VPPctlcA8nj6yVsMeSiM3xcd0FyMWnpH8erydIekfo90AMsws-2ghs/s800/vkontakte-48x48.png" width="48" height="48" style="margin-left: 5px;" title="Страница В контакте" /></a><a href="Ссылка_на_страницу_в_Gogle+" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxUEKRG8viZnab54UIHEUlk_opzwGjTLyFUGb-3WN8yxmjKrepTq7zcZP-W3aa5pOMsRT3h5rRb-K816HV667LozT_9l0AEOs8lXZfKBOhfRX13OXuy1TSts4lOeJXGVe1DExLIylxhxg/s800/google%252Bicon.png" width="48" height="48" style="margin-left: 5px;" title="Мы в Google+" /></a>
</div>

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

Добавляем код блока "Мы в соцсетях" в Html код шаблона

Этот вариант подойдет для более продвинутых пользователей, для тех, кто хотел бы расположить кнопки, например, в конце сообщений или добавить кнопок, использовать свои картинки иконок соцсетей и т.д.

Я уже описывала этот процесс для WordPress, поэтому повторяться не буду, возьмем за основу это сообщение, с той лишь разницей, что на Blogger стили кнопок вставляем перед ]]></b:skin> в Шаблон - Изменить Html, а доработанный код в том месте, где вы хотели бы его разместить. Если в футере сообщений, то перед <div class='post-footer-line post-footer-line-3'>.

Не забывайте, что нужный код в шаблоне удобно искать при помощи комбинации клавиш Ctrl+F.