Фиксированное окно поиска.

Доброго времени суток, читатели и гости блога. Сделаю небольшую шпаргалку о том, как установить в блоге фиксированное окно поиска. Вариантов такого окна достаточно много. Это же вариант хорош тем, что блок окна всегда будет на виду при прокрутке страницы.
Что очень удобно для наших посетителей. К тому же, на мой взгляд, оно очень красиво смотрится на странице.
Установка его на блоге займёт буквально считаные минуты. Заходим в панель администратора, вкладка дизайн, добавить гаджет, 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 == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRdykBM2taFktae4JygU4npmKoSj2TAyD2cxDJ3NmAUiRGUrjue3gKQv20TSsie5pec26-anxL9H0o5ctMQeQOYb8UrtDP0BCsNsQD_nPZXF2d1Q1VlB8Ramfn3-79tpfDQHpglZpYCXQ/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>

В коде, при желании можно поменять на своё усмотрение то что выделено красным. Поменять надпись в окне (в коде синим цветом). После того как установили код не забудьте сохранить.
Переместите этот гаджет в любое место блога, сохраните расположение. И посмотрите, как он выглядит на странице. Посоветую ещё прочитать статью как сделать простое горизонтальное меню с окном поиска здесь. Тоже подходящий вариант.

Я мне остаётся пожелать вам хороших выходных. У нас они снежные-снежные. Увидимся.

Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :