Сегодня мы продолжим поиски смысла жизни и для этих благородных целей я приведу еще один виджет поиска в блог, решение которого было найдено на сайте boxtuffs.com. Это достаточно элегантная и стильная вещица, которая украсит ваш блог. Единственный коварный минус этого поиска - он абсолютно не функционален в браузере Internet Explorer. Тем не менее, надеюсь, человечество все-таки уже перешло на нормальные браузеры и данный виджет актуален.

Полный пример поиска приводить не буду, так как он не совсем способен сотрудничать с моим шаблоном блога, выложу скриншоты. Несмотря на это, смею уверить, что виджет абсолютно рабочий, кроме вида в IE, о чем говорилось ранее.



Как видно, при наведении мыши на виджет, он "расползается", открывая поле для ввода поискового запроса.

Данную форму поиска можно установить в любую часть шаблона Blogger, но гораздо проще это сделать с помощью гаджета HTML/JavaScript.
На странице "Дизайн" добавьте новый элемент HTML/JavaScript и в его поле впишите код:

<style>
  #wrap-search {
    margin: 0 auto;
    width: 100px;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    text-indent: 0px;}
  #wrap-search br { display: none; }
  #wrap-search #search {
    background: -moz-linear-gradient(center bottom , #9b9b9b 0%, #a9a9a9 50%, #cacaca 50%, #d3d3d3 2550%);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9b9b9b),color-stop(0.5, #a9a9a9),color-stop(0.5,  #cacaca),color-stop(25.5, #d3d3d3));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9b9b9b', EndColorStr='#cacaca');
    border-radius: 5px;
    padding: 4px;
  }
  #wrap-search:hover { width:200px; }
  .form-search {
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#ebebeb), to(#bcbcbc));
    background: -moz-linear-gradient(-90deg, #bcbcbc, #ebebeb);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ebebeb', EndColorStr='#bcbcbc');
    border: 1px solid #747474;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px #575555, 0 1px 0 #fff;
    height: 32px;
    position: relative;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  .form-search input[type='text'] {
    background: none;
    border: none;
    color:#6E7074;
    height: 34px;
    line-height: 34px;
    padding: 0 27px 0 6px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-shadow: 0 1px 0 #fff;
  }
  #wrap-search:hover input[type='text'] { color:#597c84; }
  #wrap-search:hover .form-search {
    background: -moz-linear-gradient(-90deg, #9cc2ca, #dfecef);
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#dfecef), to(#9cc2ca));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dfecef', EndColorStr='#9cc2ca');
    box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #fff;
    color: #25464d;
  }
  .form-search input[type='image'] {
    height: 32px;
    opacity: .5;
    filter:alpha(opacity=50);
    position: absolute;
    right: 0px;
    top: 0px;
    width: 32px;
  }
  .form-search input[type='image']:hover {
    opacity: 1;
    filter:alpha(opacity=100);
  }
</style>

<div id="wrap-search">
<div id="search">
<form class="form-search" method="get" action="/search" target="_blank">
<input src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnuJAgDccVO_U0Sj3C-jhCRUXQfFvgdrcdB5X2_wuy31L143XdcWGhl5AR3fxRa0x9IH5TDdJaQJS-GtrgYtsaOZYTFHYK4ceLBtzbnh1ofu1eo71oGDCaDsj93MWfR2f7t3gw2zJJZsAL/s1600/search.png" type="image"/>
<input type="text" name="q" value="поиск" onfocus="this.value='';" onblur="this.value='поиск';" onmouseover="this.value='';" onmouseout="this.value='поиск';" />
</form>
</div>
</div>

Далее сохраните элемент и расположите в нужном месте шаблона.

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

• #wrap-search { width: 100px; - длина виджета в "собранном" состоянии;
• #wrap-search:hover { width:200px; } - длина виджета при наведении мыши.