Вставить форму поиска Google в блог на Blogspot



Как создать, настроить, получить код формы поиска Google и вставить в шаблон блога

Обновление 29.09.2015 года. Здравствуйте друзья. Сегодня будем создавать и настраивать пользовательский поиск Google для своих ресурсов. В черновике Blogger нажимаем-обзор. Спускаемся чуть вниз и нажимаем справа открыть Search Console.                                                                     
Начинаем создавать поисковую систему для блога
Выбрать блог

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

Нажимаем пользовательский поиск
Другие ресурсы-пользовательский поиск

Откроется окно создать новую систему поиска

Заполняем поля для создания поиска
Заполнить все нужные поля и внизу нажать создать

Заполняете поля: введите url адрес блога; выбрать язык; название поисковой системы Google впишет автоматически; Внизу нажмите создать, тем самым Вы соглашаетесь с условиями использования.

Вас поздравят с установкой на сайт системы пользовательского поиска

Посковая система создана, получаем код
Поисковая система создана, получаем код

Для дальнейшей настройки нужно изменить поисковую систему, переходим в панель управления

Настроим основные сведения поисковой системы

Настройка основных сведений поисковой системы
Настройка основных сведений

Впишите описание поисковой системы; ключевые слова; включите поиск изображений, внизу нажмите обновить, затем справа получить код. 

Нас просят вставить код в блок <div> HTML кода своего блога. Копируем правой кнопкой мыши-выделить все-копировать. 

Заходим в шаблон-изменить шаблон, клавишами Ctrl+F вызываем поиск, вписываем туда <body> и ниже вставляем код <div>код поиска</div> Нажимаем-просмотреть шаблон, и если все нормально-сохранить шаблон.

Также можно установить обычным гаджетом дизайн-добавить гаджет. Проверила, поиск ищет по блогу, все нормально работает. Вы получили код стандартной формы поиска, теперь нам надо настроить вид, цвет, фон. Об этом читайте в новом сообщении.




Автор статьи ✎ Olga Protasova Выпуск ✹ 7/28/2013 Ярлыки ►


Открыть комментарии →

20 коммент. :

  1. Добрый вечер Ольга! Сегодня открыла сайт для общего пользования, ehzoterika.ru, стала настраивать поиск внесла ее в страницу "поиск" ehzoterika.ru/p/poisk. но он у меня почему-то не работает, пишет, что ничего не найдено, может не так настроила? Буду рада вашей оценке моего первого блога. С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, здравствуйте. А где Вы взяли этот код поиска? Если Вы настраивали в вебмастере гугла, там совсем другой код. Плюс в этом коде ошибка: goo.gl/X3ZAtj
      #white #search {
      } удалите, стиль CSS поиска открыт и сразу закрыт.

      В вебмастере Google настройте, скопируйте и вставьте код поиска дизайн-добавить гаджет.

      Или еще проще дизайн-добавить гаджет-Поиск вот статья как оформить на CSS:

      http://www.bdblogov.ru/2016/01/making-gadget-search-Google-and-others-with-using-CSS.html

      Пользуйтесь родными гаджетами по возможности, с конца августа гугл не поддерживает много скриптов.

      И все таки, сколько смотрю Ваш шаблон, где закрывающий тэг head, и много ошибок.

      Оформление мне понравилось, только с загрузкой будут проблемы. Конечно, дизайн оформлен по теме, но если Вы хотите попасть в ТОР10 поисковиков, все движущееся надо сократить.
      Tata, разбирайтесь с поиском, напишите результат.

      Удалить
  2. Ольга спасибо за увиденную ошибку, у меня два поиска один в сайтбаре, в котором вы нашли этот "косяк", а второй отдельно вызывающийся с меню вертикального справа и открывается на отдельной странице, хотела его поместить в модальное окно не смогла сообразить как, ehzoterika.ru/p/poisk.html. А про head это я наверно наделала ошибок когда только начинала "вмешиваться" в шаблон, вносила коды, а не убирала если он не работал. очень много было соблазнов, фишек, которые хотелось применить, синдром "новичков" думаю многие через это проходят. Это сейчас более или менее как-то "соображаю", только как все это исправить сейчас не знаю! Это вы видите и читаете опытным глазом, что и как. Стараюсь вставлять движущиеся на css без скриптов или они все равно тормозят? И еще так как сейчас можно посмотреть блог, я так и не нашла как убрать Технологию блоггер на мобильной версии, этой строки не находит через ctrl-F. Ольга, если можно те ошибки, которые вы видите укажите пожалуйста, постараюсь их исправить. С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, два поиска это лишнее для блога. Понимаю, что хочется и это красиво, но выбирайте середину. Мой первый блог был похож на новогоднюю гирлянду, пришлось менять все.
      Сейчас поисковики отдают предпочтение мобильному трафику. Поэтому по возможности убрать что движется и переливается.
      CSS надо сокращать, влияет на загрузку. Но при этом некоторые гаджеты перестают корректно работать, надо проверять.

      Вы проверьте свой блог в программе PageSpeed Insights для мобильных и компьютеров, там правда не все ошибки есть возможность исправить, но многие можно.
      В вебмастере Google, вкладка "другие", перейдите на сайт сервиса PageSpeed Insights.

      Строку Технология блоггер для мобильных ишите с конца шаблона, раскройте все стрелки слева, и найдете.

      В шаблоне в самом начале зачем скрыт футер

      .post-footer-line-1 {display: none;} удалить вместе с тэгом style.

      В секции CSS удалить подсказки типа /*---тень---*/

      Работайте пока, позже еще посмотрю шаблон.

      Удалить
  3. Доброго времени суток Ольга! Все исправила, по поиску: удалила негугловский поиск, но этот почему-то по прежнему не работает, уже попробовала установить гаджетом, все равно пишет "результатов нет". Проверила Технологию Блоггер не получилось убрать, т.к. не смогла найти строку b:widget id='Attribution1' locked='false' title='' type='Attribution', раскрыла все стрелки увы их нет, может можно это в css прописать. В PageSpeed Insights проверила загрузка 75/100, но как все исправлять не очень понимаю написано "Оптимизируйте работу CSS на следующих ресурсах" а как это делать не могу понять? С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Tata. Почему не работает поиск, не знаю. Вы в вебмастере гугл его создавали? Гаджетом может и не работать на блогах с личным доменом, так как гугл перешел на https шифрование, а наши блоги с личным доменом подключить нет возможности. Попробуйте создать в вебмастере.

      По CSS: надо сокращать html и css коды. Для сокращения html вот ссылка goo.gl/KYg86x

      Для CSS ищите в интернете, такой же компрессор, не могу у себя найти ссылку. Сократили коды html и css и смотрите, как работает, а может вообще перестать работать, тогда оставляйте как есть.

      Технологию блоггер скрыли #Attribution1{display:none;} или удалили
      всю секцию? Если скрыли ищите строку выше закрывающего тэга body. Если удалили секцию, строки не будет. В статье у меня написано, что вставить для мобильных, если скрыли атрибуцию.

      Что программа пишет для мобильных: Удобство просмотра для мобильных устройств.

      Удалить
  4. Вставила в свой блог на личном домене поиск гаджетом, все работает. Ищет по ярлыкам.

    ОтветитьУдалить
  5. Ольга, поиск создавала в вебмастере, по вашей инструкции вышеуказанной, удалила с гаджета оставила пока на странице ehzoterika.ru/p/poisk.html. Извините может глупый вопрос, коды какие сокращать? В гаджетах? или то что было изменено?
    Технологию блоггер я удалила секцию. Теперь невозможно будет это убрать с мобильных? - Программа для мобильных пишет "Удобство для пользователей" 99/100 Увеличьте размер активных элементов на странице. С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Сокращать для скорости загрузки HTML коды в гаджетах, стили CSS.

      Дизайн-добавьте гаджет Атрибуция вниз макета блога. В шаблон вставьте #Attribution1{display:none;}, чтобы скрыть. В изменить-шаблон найдите нужную строку и далее в конце статьи почитайте, ссылка:

      http://www.bdblogov.ru/2013/07/blogger.html

      Проверьте шаблон для мобильных. Строки Технологии Блоггер быть не должно.

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

    У меня тоже также пишут. Вы с главной страницы скройте кнопки, некоторые гаджеты. Оставьте по минимуму.

    ОтветитьУдалить
  7. Доброго времени суток Ольга! Ура! Получилась как по "книжке"!!! Спасибо большое за совет, убралась надпись Технология Блоггер.

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

    Ольга скажите пожалуйста, я установила Яндекс метрику и liveinternet, они у меня оказались внизу блога справа, я хочу их убрать в гаджет (у меня установлен в футуре скрывающий гаджет), могу я их так сказать спрятать, и как это можно сделать? С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, счетчик яндекса настройте без информера. Скриншот

      goo.gl/TJBoSC

      Скопируйте код и вставьте в шаблоне ниже открывающего тэга body.
      Код счетчика liveinternet тоже вставьте в шаблон, ниже body. Информеры будут невидимы, а статистика учитываться.

      Удалить
  8. Доброго времени суток Ольга! Убрала надпись Технология блоггер с мобильного, а сейчас заметила, что в компьютере он установился в футуре, в css я внесла #Attribution1{display:none;}, причем в инструмент настройки тоже не могу убрать , он почему-то все равно виден в блоге? Как теперь его убрать, чтоб он не был виден на компе? С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, я не нашла по коду в шаблоне стиль CSS скрыть гаджет Атрибуция. Просмотрела в тэге style, все равно не нахожу.

      Как понять виден в настройках инструментов? Если в макете блога (вкладка дизайн), то он будет виден, Вы скрываете гаджет со страниц блога. А в макете он останется.

      Удалить
  9. Доброго времени суток Ольга! вот скрин в шаблоне стиль CSS скрыть гаджет Атрибуция goo.gl/fIujHu, а здесь goo.gl/hCbgZ4 не могу скрыть "инструменты" b:include name='quickedit , вставляю эти сохраняю, перехожу на блог эти "инструменты" не исчезают почему-то? С уважением Тата.

    ОтветитьУдалить
  10. Tata, здравствуйте. То есть Вы закрываете в строке ссылку,
    а значок все равно виден? Нужен скриншот, хочу посмотреть в шаблоне. Если все делаете правильно, ссылка должна быть закрыта.

    А вот с гаджетом непонятно. Скиньте мне строку в виджете атрибуция, как Вы скрыли для мобильных. В комменте строка может не отобразиться, поэтому скриншот.
    Проверьте ID гаджета атрибуция. Попробуйте вместо решетки поставить точку.
    .Attribution1{display:none;}
    Жду два скриншота: скрыть ссылку; скрыть атрибуцию для мобильных.

    ОтветитьУдалить
  11. Доброго времени суток Ольга! Поставила точку .Attribution1{display:none;} все равно осталось по прежнему. У меня все в одном скриншоте: скрыть ссылку; скрыть атрибуцию для мобильных goo.gl/5cXrVm. при чем сохраняю, вроде все "стрелки" на месте, выхожу из шаблона, опять захожу, а их нет, будто ничего и не делала! С уважением Тата.

    ОтветитьУдалить
    Ответы
    1. Tata, сравните код виджета атрибуция, version="1" откуда?
      Второе, уберите пробел, соедините стрелки слева с угловой скобкой. Скриншот: goo.gl/fr4giC

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

      Удалить
  12. Доброго времени суток Ольга! Код виджета атрибуция, version="1", он сам установился когда я установила гаджет "Атрибуция". удалила version="1", но пока все без изменения, убрала пробел с угловой скобки, все осталось как было! С уважением Тата.

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

      Удалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *