Поиск по блогу для Blogger

 

Форма поиска по сайту CSS для Blogger | Примеры
Форма поиска по сайту CSS для Blogger | Примеры

 

Каждый веб ресурс имеет свой поиск по блогу/caйту. Для чего нужно окно для поиска? Если на вашем блоге много контента, то стоит задуматься как посетители будут находить нужную информацию.

 

Для навигации по сайту существуют меню, карта сайта, рубрики, категории, но этого мало. Пришел допустим на блог посетитель и задержался у вас, не разобрался например в меню, в перелинковке, не нашел полностью ответ на свой запрос, тогда он смело может ввести в поиск слово или фразу, и откроются все статьи по заданному запросу.

 

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

 

Гаджет «Окно поиска» для Blogger

 

На платформе Blogger (Blogspot) по умолчанию встроен гаджет «Окно поиска». Установка: Админ панель > Дизайн > Добавить гаджет. Из списка стандартных гаджетов выбираем «Окно поиска». В настройке гаджета изменяем название Заголовка на свой текст.

 

Гаджет «Окно поиска» для Blogger
Гаджет «Окно поиска» для Blogger

 

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

 

Пользовательский поиск от Google. Заходим на сайт  http://www.google.ru/cse/ регистрируемся, получаем код, добавляем в блог как обычный гаджет. Читать полностью >>>

 

Поиск по сайту через Яндекс устанавливается аналогично поиску от Google. Заходим на http://site.yandex.ru/ проходим регистрацию, получаем код. Бытует мнение, что при наличии поиска от Яндекса сайты индексируются быстрее. Читать полностью >>>

 

Можно добавить свою форму поиска по блогу. Заходим в административную панель Blogger > Дизайн > Добавить гаджет > Html/Javascript. Добавляем в окно стиль СSS.

 

Форма поиска по сайту CSS для Blogger | Примеры

 

Красивая форма поиска по сайту CSS

 

</style><form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Поиск..." />
<input id="button-submit" type="submit" value="" />
</form>

 

Стильное окно поиска по сайту CSS

 

}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Поиск..." />
<input id="button-submit" type="submit" value="" />
</form>

 

Строгая форма поиска по сайту CSS

 

Строгая форма поиска по сайту CSS
Красивая форма поиска по сайту CSS

Форма поиска по сайту CSS для Blogger | Примеры

<style>
#searchbox {
width: 240px;
}
#searchbox input {
outline: none;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input[type="text"] {
background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #6A6F75;
width: 160px;
padding: 14px 17px 12px 30px;
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
text-shadow: 0 2px 3px #fff;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}
#button-submit{
background: url(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Поиск..." />
<input id="button-submit" type="submit" value=" "/>
</form>

 

Классическое поле для поиска по сайту CSS

 

Классическая форма поиска по сайту CSS
Поле поиска css

 

<style>#searchbox {    background: #d8d8d8;    border: 4px solid #e8e8e8;    padding: 20px 10px;    width: 250px;}input:focus::-webkit-input-placeholder {    color: transparent;}input:focus:-moz-placeholder {    color: transparent;}input:focus::-moz-placeholder {    color: transparent;}#searchbox input {    outline: none;}#searchbox input[type="text"] {    background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff;    border-width: 1px;    border-style: solid;    border-color: #fff;    font: bold 12px Arial,Helvetica,Sans-serif;    color: #bebebe;    width: 55%;    padding: 8px 15px 8px 30px;}#button-submit {    background: #6A6F75;    border-width: 0px;    padding: 9px 0px;    width: 23%;    cursor: pointer;    font: bold 12px Arial, Helvetica;    color: #fff;    text-shadow: 0 1px 0 #555;}#button-submit:hover {    background: #4f5356;}#button-submit:active {    background: #5b5d60;    outline: none;}#button-submit::-moz-focus-inner {    border: 0;}</style><form id="searchbox" method="get" action="/search"><input name="q" type="text" size="15" placeholder="Поиск по блогу..." /><input id="button-submit" type="submit" value="Искать" /></form>

 

Будь вместе с Я блоггер

 

Будь в тренде!

Получай материалы прямиком в свою почту

Я даю согласие на сбор и обработку своих персональных и не персональных данных согласно действующей на сайте — политике конфиденциальности.
* Нажимая на кнопку "Отправить", "Подпишись" или "Комментировать" Вы соглашаетесь с пользовательским соглашением.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика