Blogger: Как добавить в блог окно поиска

 

Blogger - blogspot, как добавить (установить) на сайт - блог стильное поисковое окно.

Всем привет. Вот и наступила среда, неделя добралась до экватора. А мы продолжаем изучать виджеты и гаджеты для сайтов и блогов. И вот наконец-то на этой недели мы добрались к действительно интересной теме: "Поисковое окно для сайта - блога". Думаю особого разъяснения о том, что это и для чего нужно, оно не требует. И так понятно, что польза поискового окошка заключается в том, чтобы пользователь мог быстро найти нужный ему контент вашего веб-ресурса. Если же сайт не содержит в себе много информации к примеру он одностраничный или состоит из нескольких постов, в таком случае добавлять этот виджет нет смысла. Как будет выглядеть поисковое окно вы можете увидеть на одном из наших шаблонов.
Обладает оно эффектом удлинения при наведении на него курсором мыши.

Для установки нужно перейти в раздел Шаблон - Изменить HTML найти код ]]></b:skin> и перед ним вставить следующий код:


/* Search Box
----------------------------------------------- */
#searchformfix
{
float:right;
overflow:hidden;
position:relative;
margin-right: 0px;
margin-top: 3px;
}
#searchform
{
margin:7px 0 0;
padding:0;
}
#searchform fieldset
{
padding:0;
border:none;
margin:0;
}
#searchform input[type="text"]{
background: ;
border: none;
float: left;
padding: 0px 10px 0px 15px;
margin: 0px;
width: 150px;
height: 34px;
line-height: 34px;
transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-moz-transition: all 300ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-webkit-transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-o-transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
color: #333;}
#searchform input[type=text]:hover,#searchform input[type=text]:focus
{
width:200px;
}
#searchform input[type=submit]
{
background:url(http://4.bp.blogspot.com/-R8OKVUsis3s/UgZEksy0V1I/AAAAAAAAAT4/QtN9sBHMZis/s1600/icon-search.png) center 9px no-repeat;
cursor:pointer;
margin:0;
padding:0;
width:37px;
height:34px;
line-height:34px;
background-color: #FF3D00;
}
input[type=submit]
{
padding:4px 17px;
color:#ffffcolor:#585858;
text-transform:uppercase;
border:none;
font-size:20px;
background:url(gradient.png) bottom repeat-x;
cursor:pointer;
margin-top:10px;
float:left;
overflow:visible;
transition:all .3s linear;
-moz-transition:all .3s linear;
-o-transition:all .3s linear;
-webkit-transition:all .3s linear;
}
#searchform input[type=submit]:hover
{
background-color:#444 ;
}
.selectnav {
display:none;
}
  
Сохраняете шаблон.

Следующий код вы можете разместить в разделе Дизайн - добавить гаджет - HTML\Javascript. Вот сам код:

<div id='searchformfix'>
          <form action='/search' id='searchform'>
            <input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Поиск...&quot;;}' onfocus='if (this.value == &quot;Поиск...&quot;) {this.value = &quot;&quot;;}' type='text' value='Поиск...'/>
            <input type='submit' value=''/>
          </form>
        </div>
  
Сохраняете гаджет и радуетесь появлению на сайте - блоге стильного поискового окна.



Поделиться в социальных сетях:
Facebook Twitter Vkontakte

Рекомендуем

11 Коммент.

Оставить комментарий
avatar
ELZA XATUN
августа 22, 2019

Здравствуйте.Я добавила на сайт - блог поисковое окно.Не работает. Почему?

Ответить
avatar
Mark Korvin
августа 23, 2019

Здравствуйте. Потому что в вашем блоге созданы страницы, а поиск осуществляется только по сообщениям блога.

Ответить
avatar
ncvitek
сентября 30, 2021

у меня много запланированных сообщений. стандартный поиск ищет и в них. соответственно, на первой странице результатов может быть менее 20 результатов. как избежать поиск по ещё не опубликованным сообщениям. ну и как изменить количество результатов на странице - 20 уж больно много. В поиске по ярлыкам нашёл где поменять, а в поиске не могу. подскажите, если знаете, пожалуйста

Ответить
avatar
Mark Korvin
октября 01, 2021

Самому интересно, как поиск блога может выводить еще неопубликованные сообщения, впервые слышу о таком. Что касается количества сообщений на страницах поиска вот инструкция - https://www.shablonu-dlya-blogger.ru/2015/11/nastroit-kolichestvo-soobshhenij--dlja-jarlyka.html в самом конце статьи.

Ответить
avatar
ncvitek
октября 01, 2021

а он и не выводит. он просто их учитывает. предположим, критериям поиска соответствуют 3 неопубликованных сообщения - тогда на первой странице результатов будет не 20, а 17. если критериям поиска соответствуют 27 запланированных сообщений, то на первой странице результатов будет пусто, но есть кнопка Next Posts, нажав на которую можно перейти на вторую страницу результатов, где будет 13 результатов. на следующих по 20, если столько результатов найдётся. с черновиками не проверял, учитывает ли он. но стало даже интересно )

Ответить
avatar
Mark Korvin
октября 01, 2021

Быстрее планируйте) в общем понятно это не страшно, с этим можно жить)

Ответить
avatar
ncvitek
октября 01, 2021

Писал, писал... и всё пропало.

Перевёл неопубликованные в черновики - не помогло, черновики тоже учитывает.

В общем, есть такая вещь в blogger - status:published. Но на поиск в blogspot она не распространяется. Или я не знаю, как её туда прописать.

В принципе, эту проблему можно было бы обойти двумя способами

1) Сортировать по дате от старых к новым (строка сортирует от новых к старым), но я не знаю, как это прописать. Тогда в конце поиска появятся пустые странички, ну и чёрт бы с ними )

2) Выдавать все результаты на одной странице. Но насколько я понял, у blogspot есть ограничение по максимальному результату на страничке - методом проб у меня получается 25. Можно ли это обойти?

Ну и ещё один вопрос. У меня на главной и при поиске по ярлыкам вместо кнопки Next Posts номера страниц. Как их добавить в результаты поиска (количество результатов и постов на главной совпадают)?

Если у Вас есть ответы и возможность ответить - расскажите, пожалуйста.

Ответить
avatar
Mark Korvin
октября 01, 2021

Как вариант пробуйте разные виджеты поиска, нужно искать в шаблонах, например такой же поиск, как на моем сайте есть в шаблоне invert blogger template, пробуйте его.

Так и должно быть, когда открывается страница с ярлыком, должна отображаться навигация, если отображаются номера страниц, значит это нумерованная навигация, если хотите кнопку Next Post, удалите из шаблона нумерованную навигацию.

Ответить
avatar
ncvitek
октября 01, 2021

Nо есть Вы не знаете, как встроить status:published в поиск в blogspot? B как сортировать в поиске от старых к новым? Жаль. Буду искать.

Как вариант пробуйте разные виджеты поиска, нужно искать в шаблонах, например такой же поиск, как на моем сайте есть в шаблоне invert blogger template, пробуйте его.

Спасибо, посмотрю.

Так и должно быть, когда открывается страница с ярлыком, должна отображаться навигация, если отображаются номера страниц, значит это нумерованная навигация, если хотите кнопку Next Post, удалите из шаблона нумерованную навигацию.

Так мне как раз надо, чтобы в результатах поиска была нумерация, а её нет. Хотя при поиске по ярлыкам есть.

Ответить
avatar
Mark Korvin
октября 02, 2021

То есть тут обычными атрибутами, как например "количество постов" не настроишь сортировку, да есть атрибут "by-date" но он сортирует от самого нового поста до самого старого, а вот атрибута, который бы отвечал за реверс нету. Решение можно сделать только скриптом.

Насчет нумерованной навигации на страницах поиска, опять таки под это нужно отдельно писать скрипт.

Ответить
avatar
ncvitek
октября 03, 2021

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

спасибо за ответы

Ответить