Добро пожаловать, дамы и господа! Используйте кнопки соцсетей, чтобы добавить меня в друзья.

Как добавить социальные кнопки в шапку блога

social_media_bloggerВсем большой привет, от меня и моего блога! Мы привыкли устанавливать всё на боковую панель блога Blogger, в том числе и социальные кнопки ваших профилей в соцсетях, а он не резиновый, там место очень драгоценное. Так вот, мы можем освободить местечко в сайдбаре для более полезных виджетов или рекламных блоков, убрав от туда иконки социальных сетей "Присоединиться".

Да нет, кнопочки у вас будут в блоге, только в шапке блога. Там им будет уютней и посвободней. Согласны со мной? Ну и хорошо.

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

Как добавить социальные кнопки в шапку блога
Социальные кнопки в шапке блога

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

Как установить социальные кнопки в шапку Blogger

Первым делом нам нужно добавить стили для кнопок, для этого найдите в шаблоне вашего блога такой тег ]]></b:skin> и чуть выше её добавляем код CSS:

Смотрите скрин:

vstavka-kod-socknopok
Установка стилей социальных кнопок в шаблон

Затем, находим в шаблоне такую строчку <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> и выше её добавляем сам код кнопок:

vstavka-koda-socknopok
Установка социальных кнопок в блог

Здесь, в коде кнопок подставляем ваши имена профилей, адрес вашего блога для RSS. Кнопки представлены следующие, самые популярные: Facebook; Twitter; Google Plus и RSS. Обратите внимание, сами иконки вы можете заменить на свои и ещё добавить несколько дополнительных соцкнопок по желанию, вставив до закрывающих тегов </ul></div> такую строку:

<li class='media_icon'><a href='Link URL'><img border='0' src='URL картинки'/></a></li>

Естественно, указав адрес соцсети, с именем профиля и URL изображения иконки. Ориентируйтесь по готовым строчкам. На этом, дамы и господа, у меня всё. Разрешите с вами попрощаться, совсем не надолго. Удачи вам и до новых встреч. Пока, пока.

Комментарии

  • Спасибо!
    У меня иначе, через виджеты, но получилось 🙂
    Но теперь такой вопрос:
    у меня сверху слева виджет с ссылками, справа с соцкнопками. но, так как в моём шаблоне верхние виджеты не могут стоять в ряд, то соцкнопки или ссылки ниже другого. как выставить их в ряд?

  • Добрый вечер. Скажите, а как удалить из шапки темы кнопки соц. сетей. Тема iconic one были установлены вместе с темой. Всё бы хорошо, только при нажатии на них выдаётся «Сервер не найден». Хочу удалить и установить заново как положено.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Решите задачку: *