Добавляем гаджет над заголовком в Blogger(Blogspot)

Добавляем гаджет над заголовком в Blogger(Blogspot)Иногда возникает необходимость разместить гаджет над шапкой блога на Blogger. Добавить на это место рекламу или меню, а может что еще. И как оказалось, чтобы сделать это, никаких особых усилий прилагать не нужно. Необходимо только чуть подкорректировать HTML код шаблона, а точнее , изменить уже существующие значения...
  Итак, открываем "Дизайн" - "Изменить HTML" и находим там с вот такую строку кода :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  Полностью она выглядит так:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id="Header1" locked="false" title="Название вашего блога (заголовок)" type="Header">
</b:widget></b:section>
  Но чтобы иметь возможность добавлять гаджеты над секцией с заголовком, необходимо изменить значение некоторых параметров:
- maxwidgets - это количество гаджетов которое вы хотите разместить, цифра указывает сколько максимально можно расположить виджетов в этой секции, например: 1, 2, 3 и т.д. Если ни указано ничего, количество не ограничено. Нам необходимо поменять "1" на любое нужное число.
- showaddelement - параметр, который делает видимым поле для добавления виджета - "Добавить гаджет". Изменяем no на yes

  Так будет выглядеть итоговый вариант:
<b:section class="header" id="header" maxwidgets="3" showaddelement="yes">
...

  Теперь легким движением руки и курсора перетягиваем гаджет в поле над шапкой. Там можно разместить дополнительное меню или рекламный баннер, а может и флеш-презентацию тут уж кто на что горазд :)
Скриншот админ панели Blogger
Размещение гаджета над шапкой

  Вот и все. Буду рад вашим комментариям.

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

  1. Спасибо, помогли. Сделала гаджет на верху и пустила бегущую строчу. Красота!

    ОтветитьУдалить
  2. Очень нравится ваш блог! И по оформлению и по изложению материала

    ОтветитьУдалить
  3. А как сделать, чтобы Заголовок и гаджет (скажем, окно поиска) поставить на одном уровне?

    ОтветитьУдалить
    Ответы
    1. Как-то не задавался этим вопросом для гаджета "Окно поиска", но думаю сделать такое можно при помощи CSS. Узнать идентификаторы и вперед, пример кода стиля будет примерно такой:
      #BlogArchive1 h2 {
      background: #fff1f0;
      color: #000;
      text-align: center;
      padding-top: 20px;
      float: left;
      height: 100px;
      width: 20%;
      }
      #ArchiveList {
      float:right;
      background: #f1f1f0;
      height: 120px;
      width: 80%;
      overflow-y: auto;
      }
      З.Ы. Эксперименты проводились над "Архив блога" расположенном горизонтально вне колонок.

      Удалить
    2. Пытаюсь сделать так:

      #PageList1 {
      background: #ffffff;
      color: #000;
      text-align: center;
      padding-top: 20px;
      float: left;
      height: 100px;
      width: 80%;
      }
      #HTML1 {
      float:right;
      background: #ffffff;
      height: 100px;
      width: 20%;
      overflow-y: auto;
      }

      Оба виджета становятся в ряд, но не работают (ни тот, ни тот).
      Тогда убираю строки float, они работают, но становятся друг под друга (((
      Не знаю что придумать.
      И ещё вопрос -- что значит # и точка вместо него?

      Удалить
  4. Спасибо за инструкцию, но есть маленькая проблема.
    Я вставил панель ссылок над шапкой, но теперь, она отображается не горизонтальной полоской, а вертикальным списком. Подскажите как поправить.

    ОтветитьУдалить
    Ответы
    1. Первое - что за панель и каких ссылок? Стандартная (гаджет "Список ссылок" или самописная(по-иному - "левая")? Ссылки в списке (UL - LI) или просто в блоке?

      Если это стандартный гаджет "Список ссылок", то рецепт такой -
      #LinkList1 li {
      display: inline; /*можно inline-block*/
      list-style: none; /*убираем маркеры*/
      }
      /*это бонус - стиль для самих ссылок в гаджете (если понадобится). Свойства и значения по-вкусу*/
      #LinkList1 li>a {
      color: #C6F;
      }

      Удалить
    2. Вставлял обычный гаджет "список ссылок", или список страниц блога. Оба списка над заголовком отображаются вертикально, а под заголовком - горизонтально.

      Удалить
    3. Стили выше пробовали применять? И откройте блог, чтобы можно было посмотреть, наощупь как-то не очень понятно где копать.

      Удалить
    4. http://cosmos--o.blogspot.ru/
      Стили менять не пробовал, в редакторе HTML подобных строчек не нашел, а с css еще не разобрался

      Удалить
    5. В редакторе подобных строчек и не будет, т.к. гаджет этот добавочный и стили к нему по умолчанию не прописаны, поэтому их нужно добавлять самостоятельно.
      На всякий случай изучаете статью Добавляем CSS в HTML шаблона Blogger(Blogspot)

      Про гаджет "Страницы" тут воял:
      гаджет "Страницы" в Blogger(Blogspot)

      Но вам должен помочь такой стиль:
      #PageList1 li {
      display: inline; /*можно inline-block*/
      list-style: none; /*убираем маркеры*/
      }
      Иногда нужно записывать так (если первый вариант не помог)
      .header section #PageList1 li {
      display: inline;
      list-style: none;
      }

      Удалить
  5. Спасибо огромное, помог первый вариант, но только с "inline-block".

    ОтветитьУдалить
  6. Единственный ньюанс в том, что после смены стилей, расстояние между ссылками на страницы уменьшилось, видимо до минимального. Не подскажете где найти параметр отвечающий за это?

    ОтветитьУдалить
    Ответы
    1. Используйте свойства padding - отступ внутри, и margin - отступы снаружи, чтобы выставить расстояния, также можете указать высоту - height , ширину - width.
      Пример:
      #PageList1 li {
      height: 30px;
      width: 150px /*можно указать auto, если регулировка ширины происходит за счет padding*/
      padding: 5px 15px 10px 20px;
      margin: 0 2px;
      }
      Значения для padding и margin записываются так:
      4 значения - верх, право, низ, лево;
      2 зн. - верх/низ, право/лево;
      1зн. - все стороны.

      Также можете поэкспериментировать с #PageList1 li a {...} - так вы будете влиять на сами ссылки, а не на блоки в которых они расположены.

      Удалить
  7. Доброе время суток! А у меня такой вопрос! Все сделал, понравилось ибо работает, но! Баннер висит только на главной странице! По статьям банер не висит! Не знаете как поправить? Блог - спул.рф Спасибо!

    ОтветитьУдалить
    Ответы
    1. Честно говоря с таким не сталкивался, надо смотреть по исходному коду, возможно там прописан условный тег.

      Удалить
  8. И еще вопросик! Дайте свои контакты куда мне можно написать с вопросиком по блогу! Очень сложно нагуглить нужный ответ! Спасибо за полезную информацию!

    ОтветитьУдалить
    Ответы
    1. Все мои контакты есть во разделе меню "Присоединяйся", там ссылки и на скайп и на почту. Пишите и добавляйтесь.

      Удалить
  9. Добрый день. А мне бы хотелось строку поиска добавить в один ряд с меню (как у Вас тут на блоге). По идее, у меня (http://edodina.blogspot.ru/) - это оба гаджета (страницы и HTML/JavaScript соответственно). Как подобное реализовать?
    Заранее спасибо за ответ.

    ОтветитьУдалить
    Ответы
    1. У меня это все дело самописное, в одну из секций меню добавлен пользовательский поиск.
      Про него тут - http://www.magentawave.com/2013/02/gcse-simple-css-design.html
      Не забудьте сделать резервную копию шаблона, прежде чем приступить к изменениям!
      Итак самый простой вариант: размещаете ваш гаджет с поиском в той же секции что и гаджет страницы - просто перетяните его туда в админке. Он должен стать выше или ниже меню. Теперь переходите в настройки шаблона и добавляете CSS(можно через панель, можно в код - http://www.magentawave.com/2012/02/adding-css-to-html-blogger.html) - для гаджета Страницы - это PageList1, для поиска (гаджет HTML/JS) - это HTML1 - его порядковый идентификатор.
      #PageList1 {
      width: 45%;
      display: inline-block;
      float: left;
      }
      #HTML1 {
      display: inline-block;
      width: 45%;
      float: right;
      }
      Подробно про гаджеты - http://www.magentawave.com/2012/02/change-widget-style.html
      Важный момент - перед размещением(перетаскиванием) гаджета просмотрите в исходном коде параметры для секции, в которой размещен Страницы и будете размещать Поиск, а именно maxwidgets его значение должно быть больше одного("1") или его вообще не должно быть, что гаджет добавился именно в эту секцию.

      Удалить
    2. Александр, спасибо, но по Вашему рецепту не получилось. Несмотря на то, что страницы отображались слева, а строка поиска справа, они располагались в два ряда, как бы друг под другом. Проблему решила, разделив поле гаджета под заголовком на два по рецепту: http://shpargalkablog.ru/2010/11/gadzhety-dlya-blogger.html#razdelit

      Но всё равно спасибо за участие)

      Удалить
    3. Евгения, это второй способ, Просто не стал писать статью в комментарии :) Но и то, я делаю не так - участвуют не секции, а блоки с секциями, как по мне, то так правильнее. но вариант Натальи тоже нормуль, простой :))

      Удалить
    4. Извините, что достаю. Я всё пробую выстовить свои гаджеты (PageList1 и HTML) в один ряд, вверху.
      Теперь я пришла к следующему: я могу выставить в ряд их таким способом:

      #PageList1 {
      display: inline-block;
      float: left;
      }
      #html1 {
      display: inline-block;
      float: right;
      }

      в этом случае, они становятся в ряд (правда ниже, чем мне хотелось бы -- когда виджет страницы один, он стоит выше, почти вплотную с краем), но! оба виджета не работают.
      тогда я меняю "html1" на "social-icons" и соцкнопки начинают работать (не знаю как система понимает что такое social-icons, вроде бы нигде не прописано, но это работает).
      теперь маюсь -- не знаю какое имя дать PageList1, чтобы и странички заработали вновь?
      и хотелось бы их всё-таки поднять выше...

      Удалить
    5. Возможно вам помогут приемы описанные в этой статье
      http://www.magentawave.com/2012/10/why-not-droping.html
      там есть описаны некоторые моменты, которые могут помочь в решении вашей проблемы.

      Удалить
  10. Анонимный26.05.2014, 09:11

    Спасибо! Все работает! А как добавить гаджет в самый низ блога? У меня не стандартный шаблон и они скорее всего удалены! можно добавлять только под сообщения в само тело...

    ОтветитьУдалить
    Ответы
    1. Вы можете добавлять гаджеты в любое место самостоятельно, для этого вам нужно просто создать для него новую секцию (оболочку), примерно так как это показано в примере, в нужном месте.
      <b:section class='footer' id='footer-one' maxwidgets='1' showaddelement='yes'>
      </b:section>
      Она появится в админке и вы сможете добавлять новые гаджеты из нее.

      Вот дополнительная информация из справки по Blogger: https://support.google.com/blogger/answer/46888?hl=ru&topic=12449&ctx=topic

      Удалить
    2. Анонимный28.05.2014, 10:19

      Спасибо за помощь и за полезный сайт...еще нашел у Вас такую вещь как закрытие сайта до полной его загрузки,но у меня почему-то не ставится код в шаблон,пишет ошибка Html и выделяет тег body... не подскажите,что бы это могло быть...

      Удалить
    3. Вы допускаете ошибку при установке кода в шаблон, нужно быть внимательным если шаблон не стандартный. Это может быть из-за неправильного добавления скрипта или недописанного закрывающего тега. Относительно скриптов можно почитать здесь:
      http://www.magentawave.com/2013/03/how-connect-scripts.html
      Просмотрите внимательно добавленный код, но в любом случаи чтобы разобраться с такой проблемой нужно смотреть на исходный код вашего блога с добавленными элементами.

      Удалить
    4. Анонимный29.05.2014, 10:17

      Спасибо...будем пробовать еще...

      Удалить
  11. Спасибо получилось! Люблю Ваш блог за то что все всегда отлично воплощается.

    ОтветитьУдалить
  12. Спасибо! Все получилось.

    ОтветитьУдалить
  13. Спасибо огромное! Умеете не только сделать, но и преподать урок для самыхъ непонятливых

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

Следующее Предыдущее

BestProject