Установка поиска для своего сайта: где искать? Часть первая.

Поиск на ваш сайт

Если Вы думаете, что поиск по сайту бесполезная штука, то Вы сильно ошибаетесь. Для пользователей это признак того, что у Вас есть коллекция из нужных им материалов, а для веб-мастера, это еще один способ задержать посетителя на сайте.
У Вас еще нету поисковой строки? А давайте-ка ее установим вместе!

Поиск для сайто/блогов на платформе Blogger.com

Установка

  1. Войдите в панель инструментов Blogger -> вкладка Дизайн  -> Элементы страницы.
  2. Нажмите на Добавить гаджет, в том месте шаблона, где вы хотите разместить окно поиска.
  3. Выберите HTML / JavaScript из списка гаджетов.
  4. Разместите код окна поиска во втором поле и затем нажмите Сохраните.

Внутренний поиск по блогу

Код следующий:

<div class="searchform">
<form method="get" id="searchform" action="/search">
<table width="100%">
<tr>
<td  width="80%"><input id='s' name='q' type='text' value=''/></td>
<td width="20%"><input type="button" Value="Искать" id="sbutton" class="sbutton" alt=""></td>
</tr>
</table>
</form>
</div>

У Вас выйдет вот такая поисковая строка (окно поиска): (она работает, можете пробовать)

Вот какое поисковое окно вышло посредством Blogger: http://www.ipetrenko.ru/p/search.html.
Как бы, основная задача - поиск на сайте - выполнена. Но, наша строка не красивая, давайте придадим ей привлекательного вида!

Стиль 1 

(PSD изображения сделаны Design3edge)

<style type="text/css">
#ip14-searchbox{background:url(http://1.bp.blogspot.com/-_9KF7IQ5NnI/UezYZIUJdCI/AAAAAAAAFUo/WeNdSonxqC8/s000/offside_in_ua_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#ip14-searchform{display: block;padding: 10px 12px;margin:0;}
form#ip14-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#ip14-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="ip14-searchbox">
<form id="ip14-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Поиск..." onfocus='if (this.value == "Поиск..") {this.value = ""}' onblur='if (this.value == "") {this.value = "Поиск...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Стиль 2


<style type="text/css">
#ip14-searchbox{background:url(http://1.bp.blogspot.com/-6s2Vwyn_vv0/UezYZzOUTTI/AAAAAAAAFUw/zHJc9dZ9iow/s1600/offside_in_ua_searchbox2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#ip14-searchform{display: block;padding: 10px 12px;margin:0;}
form#ip14-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#ip14-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="ip14-searchbox">
<form id="ip14-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Поиск..." onfocus='if (this.value == "Поиск..") {this.value = ""}' onblur='if (this.value == "") {this.value = "Поиск...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Стиль 3


<style type="text/css">
#ip14-searchbox{background:url(http://2.bp.blogspot.com/-7IObIJghr5k/UezYapzLBkI/AAAAAAAAFU4/nTn7tS55rp4/s1600/offside_in_ua_searchbox3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#ip14-searchform{display: block;padding: 10px 12px;margin:0;}
form#ip14-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#ip14-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="ip14-searchbox">
<form id="ip14-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Поиск..." onfocus='if (this.value == "Поиск..") {this.value = ""}' onblur='if (this.value == "") {this.value = "Поиск...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Поисковая строка на любой сайт от Яндекса

Вводим адресную строку браузера линк http://site.yandex.ru.

Нажимаем на "Установить поиск".

Здесь вводим название для поиска (техническое и для стандарта Opensearch)/

Нажимаем "Добавить сайты ...".

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


 Также вводим e-почту для уведомлений о нашем поиске. 

 Второй шаг это настройка внешнего вида поискового окна.  

Укажите где вы хотите, чтобы показывались результаты поиска,а также настройте их дизайн.
Я выбрал показывать всё на страницах Яндекса.


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

Теперь нужно проверить наш поиск. Вводим любое слово и любуемся.

Затем копируем код и вставляем его по вышеуказанному способу.

Вот наглядный пример поискового окна от Яндекса на этом блоге: http://www.ipetrenko.ru/p/search.html.

Во второй части Вы узнаете еще несколько новых способов сделать поиск у себя на сайте, в отдельности от Google и Nigma.ru.


Если вам понравиласть эта статья, то поделитесь ей с друзьями. Вам не сложно, а мне приятно ;)
Присоединяйтесь к 200+ блоггерам и получите полезный в подарок
    Blogger комменты
    Facebook комменты

0 коммент. :

Отправить комментарий