Google Мой путь к успеху!: Установка кнопок в шапку блога Blogger

вторник, 1 октября 2013 г.

Установка кнопок в шапку блога Blogger


Установка кнопок социальных сетей в шапку блога Blogger


Я уже описывала, как установить кнопки соцсетей от Яндекса в конце каждой статьи, а также фиксированные кнопки от сервиса Pluso слева от блога.


Сегодняшний мой пост я пишу в ответ на один из комментариев. Автору комментария никак не удаётся установить кнопки от социальных сетей в правую часть шапки блога. Как он пишет, они у него «расползаются».

Я пообещала, что установлю такие кнопки у себя на блоге и опишу, как это сделать. Установила я кнопки на тестовый блог от того же сервиса Pluso, хотя так же можно установить любые кнопки (или баннер).

Затем идем в админ панель блога → Шаблон →Изменить HTML. Советую скопировать весь код шаблона в Notepad++ (щелкаем мышкой в любом месте кода → комбинацией клавиш Ctrl+A выделяем весь код → комбинацией клавиш Ctrl+C копируем его → открываем Notepad++ → комбинацией клавиш Ctrl+N создаем новый документ → комбинацией клавиш Ctrl+V вставляем в него скопированный код). Сделайте две копии в двух разных вкладках. С одной Вы будете работать, а вторая останется эталонной копией.

Ищем место, куда нужно вставить код кнопок.

Поиском ищем строку:

<b:includable id='description'>

 А перед ней три такие строки:

    </div>

  </b:if>

</b:includable>

Вот перед первой из них </div> и вставьте код кнопок с сервиса Pluso (как их получить, смотрите статью о фиксированных кнопках соцсетей, только выбирайте горизонтальное расположение).

Вставив код, копируйте его в шаблон (я иду обратным путем: Ctrl+A - выделяю код  уже в Notepad++ → Ctrl+C - копирую его → иду в шаблон → щелкаю мышкой в коде → Ctrl+A – теперь выделяю весь код в шаблоне → CTRL+V - заменяю код в шаблоне на код из редактора).

Не сразу сохраняйте изменения, а сначала нажмите «Просмотреть шаблон». Если в окне показа Ваш блог откроется, а не выйдет какая-нибудь диагностика об ошибке, тогда нажимайте «Сохранить шаблон», в противном случае возвращайте код из эталона и повторяйте внимательно всё заново.

Предупреждаю, что на блоге кнопки сначала будут стоять совсем не так, как Вам хотелось, но с этим мы еще будем работать.

Итак, Вы получили кнопки, но стоят они слева и ниже заголовка блога (по крайней мере, у меня было так). Мы же хотим их установить справа и примерно на уровне заголовка.

Снова идем в рабочую вкладку Notepad++. Сейчас будем пытаться переместить кнопки в нужное место.

Ищем такую строку: 

.Header h1 {

(header может быть написан с маленькой буквы) и вставляем ниже нее код:

display: inline-block;

Выглядеть это будет примерно так:

.Header h1 {

  font: $(header.font);

  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);

  display: inline-block;

}

А затем вставим такой код:

.pluso {

  left: 495px;

  position: absolute!important;

  top: 26px;

}

Скопируйте снова весь код (или только вставки, если уверены в себе) в шаблон и посмотрите, как изменилось расположение кнопок. За счет изменения значений :
  • left – отступ от левого края блога,
  • top – отступ от верхнего края шапки

Вы сможете добиться такого расположения, какое Вас устроит.

Я проверила блог в браузерах Google Chrome, Firefox, Opera и Internet Explorer (версии 7-10), всё смотрится отлично. Да, забыла главное: посмотреть можно на моем тестовом блоге.

Теперь Вы знаете, как установить кнопки социальных сетей в шапку блога Blogger.

TEXT.RU - 100.00%

В заключение - развлечение:



Вам понравилась статья? Чтобы не пропустить новые полезные статьи, подпишитесь на обновления:

Ваше имя:
Ваш E-Mail:

А также нажмите на кнопочки! Вам не сложно, а мне приятно, и Вашим друзьям может пригодиться:

4 комментария:

  1. Большое спасибо! Все получилось!

    ОтветитьУдалить
    Ответы

    1. Еще такой вопрос: нужно ли закрывать ссылки этих кнопок от индексации или они не воспринимаются поисковиками как внешние?

      Удалить
    2. Я не закрываю. Ни один сервис анализа сайта, которыми я пользуюсь, не показывает эти ссылки как исходящие

      Удалить