Оформляем блок кнопок Мы в соцсетях на 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/AVvXsEhLK0Br4A_ymoH5m49o5dcmgHPH3xJ9ILWJnR_sMp7GHCu7REJ-Y_1bPKIUVSBbytTwkn00PEhs1hcc8YrZl-djkzlcVa8479Ay1I1wx9UYgeWscbB_JM05VsuSzltHtFnKzdUGE3UyLbE/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/AVvXsEhYMLBGayi0swPL290YQgznA1QSGXjDcRqofJFjxEVW7IWgJOc5vvCdj17Fcai4IXuPkditKA3xLi4ZMF1qMtesd8yhyphenhyphenHbgjZ8BTGqKcSs3-dB2PNsjldpYMfgbboKuwGr-XoWxnxND-50/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/AVvXsEjg5WZcK3KSw0se84nZFligS1DEt4fShT3XWgeiTL_6Rye-T-JZQSirfqhL-8uAQK3ztNlah8iJIft7NUXPQVdbDIZ8siJ6kNcZUoByaYaopc0bOMeN6dcMbg1iM_aNtoYF2XtPuryy0d8/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/AVvXsEgAKV3405K6Asjne06BskpA1CyO60005q3dsWz53mAhBTSBCGLRu9QnakI-HO73mjC0mdLtXNj5T_RJbAb-mCY_4TnnUfJQ3qk1T_ev5KcclbSmHfRO8kOlLRaLp80VzsHUaDHwIJEmmbE/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.