24 февр. 2014 г.

Оформляем блок кнопок Мы в соцсетях на 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="http://lh6.googleusercontent.com/-AIS5jEdf4e0/UwnLGG60UnI/AAAAAAAAEmU/AP5-CrDEo2M/s800/feed-48x48.png" width="48" height="48" title="RSS-подписка" /></a><a href="Ссылка_на_страничку_в_Facebook" target="_blank"><img src="http://lh4.googleusercontent.com/-oen9LfojZQo/UwnLE8CbdQI/AAAAAAAAEmM/rs3MWjdRhbs/s800/facebook-48x48.png" style="margin-left: 5px;" width="48" height="48" title="Страница на Facebook" /></a><a href="Ссылка_на_страничку_В_контакте" target="_blank"><img src="http://lh6.googleusercontent.com/-jz3oYYl-NAE/UwnLI9EpmYI/AAAAAAAAEmc/1kNJtI3P8Z4/s800/vkontakte-48x48.png" width="48" height="48" style="margin-left: 5px;" title="Страница В контакте" /></a><a href="Ссылка_на_страницу_в_Gogle+" target="_blank"><img src="http://lh3.googleusercontent.com/-df-nF2snGzo/UwnMiDE9mBI/AAAAAAAAEmw/CqyWcuBBECM/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.

5 комментариев

Viktoria Cherry

Очень красивые кнопочки, радуют глаз и поднимают настроение! Светлана, можете еще рассказать, как заменить вид тих кнопочек на свои или такие как у вас в правой части, изменить их дизайн на свой... Было бы интересно научится этому.

Viktoria Cherry

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

Светлана Ковалева Светлана Ковалева

Viktoria, прошу прощения, в код ошибочка закралась, поправила. Теперь не должно быть близко. Пожалуйста, меняйте кнопки на какие хотите. Я же дала это во втором варианте и ссылки на описание процесса есть в сообщении.

Danylo Makieiev

Поставил себе, листаю ваш блог, большое Вам спасибо!

Ирина Шмелева

Супер все работает))))

Отправить комментарий