Добавляем либо ремонтируем поиск по блогу

среда, 7 апреля 2010 г.

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

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

<div class='feed'>
    <div class='widget-body'>
        <h2 class='widget-title'>Поиск</h2>
        <div class='search_widget'>
            <form action='/search/' id='searchform' method='get'>
                <fieldset>
                    <input class='search_term' id='s' name='s' type='text'/>
                </fieldset>
            </form>
        </div>
    </div>

Я долго мучился пока нашел как заставить данный скрипт работать. Все что необходимо было сделать, это изменить буквы s на буквы q в строчках выделенных красным, так что конечный код выглядел бы так:

<div class='feed'>
    <div class='widget-body'>
        <h2 class='widget-title'>Поиск</h2>
        <div class='search_widget'>
            <form action='/search/' id='searchform' method='get'>
                <fieldset>
                    <input class='search_term' id='q' name='q' type='text'/>
                </fieldset>
            </form>
        </div>
    </div>

После проведения изменений поиск прекрасно заработал.

Гаджет поиск по блогу:

Если же у вас нет поиска по блогу, либо ваш поиск не работает, вы можете воспользоваться следующим скриптом:

<form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 200px;" value="Введите запрос…" name="q" onclick="this.value=''" type="text"/><input id="searchButton" value="Искать!" type="submit"/></form>

Вы можете добавить данный гаджет в пустой HTML/java script  в любом понравившемся месте.
Если вы хотите поработать немного над дизайном, то можете установить данный скрипт:

<form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 150px; height: 15px; color: #FFFFFF; font-size: 14px; background-color: #000000;" value="Введите запрос…" name="q" onclick="this.value=''" type="text"/><input id="searchButton" style="border-color: #000000; background-color: #FFFFFF; color: #000000;" value="Искать!" type="submit"/></form>

width: 150px;

Изменяя это значение вы сможете придать необходимую ширину окну поиска!!!

height: 15px;

Изменяет высоту окна поиска.

color: #FFFFFF;

Изменяет цвет слов “Введите запрос…”

font-size: 14px;

Изменяет размер шрифта “Введите запрос…”

background-color: #000000;

Изменяет цвет фона окна поиска.

background-color: #FFFFFF;

Изменет цвет фона кнопки “Искать”

color: #000000;

Изменяет цвет текста кнопки поиск.

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

Похожие статьи