Что очень удобно для наших посетителей. К тому же, на мой взгляд, оно очень красиво смотрится на странице.
Установка его на блоге займёт буквально считаные минуты. Заходим в панель администратора, вкладка дизайн, добавить гаджет, HTML/JavaScript. Вставляем в него код, который приведён ниже.

Вот этот код
<div class='noop-searchbox' id='noop-searchbox'>
<form action='/search' id='noop-searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='что искать...'/>
<button id='sbutton' type='submit'>
<span id='simg'/>
</span></button>
</form>
</div>
<style type="text/css">
#sbutton {
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
border: 1px solid #3079ED;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{ background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url("http://4.bp.blogspot.com/-gAHYfEEtPjg/T0t5-AtLCmI/AAAAAAAAAJ8/w87kGhEAYyQ/s1600/searchicon.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.noop-searchbox {
display: block;
position: fixed;
right: 0;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
</style>
<form action='/search' id='noop-searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='что искать...'/>
<button id='sbutton' type='submit'>
<span id='simg'/>
</span></button>
</form>
</div>
<style type="text/css">
#sbutton {
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
border: 1px solid #3079ED;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{ background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url("http://4.bp.blogspot.com/-gAHYfEEtPjg/T0t5-AtLCmI/AAAAAAAAAJ8/w87kGhEAYyQ/s1600/searchicon.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.noop-searchbox {
display: block;
position: fixed;
right: 0;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
</style>
В коде, при желании можно поменять на своё усмотрение то что выделено красным. Поменять надпись в окне (в коде синим цветом). После того как установили код не забудьте сохранить.
Переместите этот гаджет в любое место блога, сохраните расположение. И посмотрите, как он выглядит на странице. Посоветую ещё прочитать статью как сделать простое горизонтальное меню с окном поиска здесь. Тоже подходящий вариант.
Я мне остаётся пожелать вам хороших выходных. У нас они снежные-снежные. Увидимся.
Ой, а что это там ниже? Ну надо же! Нажимаем!
оформите подписку на новые шпаргалки
Вика, замечательная перестановочка на блоге! Всегда радуюсь, когда ты полезностями делишься, которые устанавливаются при помощи гаджетов))) Спасибо!
ОтветитьУдалитьИрина, привет. Спасибо. Я только дизайн немного изменила и шрифт. Помнишь как-то ты сетовала что без кнопок осталась. Как такие которые слева в блоге. Через гаджет тоже.
ОтветитьУдалитьВика, привет! Спасибо за фиксир. поиск. Очень классный! и постоянно на виду, не надо лететь в начало стр.Я только немного изменила вид, чтобы не наскакивал на сообщения.
ОтветитьУдалитьТолько не смогла поменять белое поле в окне поиска. Синий мне нравиться, а белый хотела добавить синевы, но не нашла.
ОтветитьУдалитьВика, привет! Спасибо за фиксир. поиск. Очень классный! и постоянно на виду, не надо лететь в начало стр.Я только немного изменила вид, чтобы не наскакивал на сообщения.
ОтветитьУдалитьИрина, мне он тоже нравится. Забегу потом к тебе посмотреть. Бегло обратила внимание, что у тебя уже там изменения некоторые.
УдалитьА фон тут полно надо менять он вот так прописан в коде #4D90FE 0%, #4787ED 100%)
Фиксированный поиск - классный, но только он загораживает некоторые важные функции, такие как "Новое сообщение", "Настроить". Как Ирина Корсун его изменила? У нее спросить? Я пока поставила этот гаджет на тестовый блог.
ОтветитьУдалитьИрина, так перемести в разделе дизайн его в другое место
ОтветитьУдалитьВиктория, куда бы я его не поставила. Он все равно вверху оказывается.
ОтветитьУдалитьИрина, так он и называется фиксированный.
ОтветитьУдалить