Blogger: Как добавить в блог окно поиска

 

Blogger - blogspot, как добавить (установить) на сайт - блог стильное поисковое окно.

Всем привет. Вот и наступила среда, неделя добралась до экватора. А мы продолжаем изучать виджеты и гаджеты для сайтов и блогов. И вот наконец-то на этой недели мы добрались к действительно интересной теме: "Поисковое окно для сайта - блога". Думаю особого разъяснения о том, что это и для чего нужно, оно не требует. И так понятно, что польза поискового окошка заключается в том, чтобы пользователь мог быстро найти нужный ему контент вашего веб-ресурса. Если же сайт не содержит в себе много информации к примеру он одностраничный или состоит из нескольких постов, в таком случае добавлять этот виджет нет смысла. Как будет выглядеть поисковое окно вы можете увидеть на одном из наших шаблонов.
Обладает оно эффектом удлинения при наведении на него курсором мыши.

Для установки нужно перейти в раздел Шаблон - Изменить HTML найти код ]]> и перед ним вставить следующий код:

CSS/* Search Box
----------------------------------------------- */
#searchformfix
{
float:right;
overflow:hidden;
position:relative;
margin-right: 0px;
margin-top: 3px;
}
#searchform
{
margin:7px 0 0;
padding:0;
}
#searchform fieldset
{
padding:0;
border:none;
margin:0;
}
#searchform input[type="text"]{
background: ;
border: none;
float: left;
padding: 0px 10px 0px 15px;
margin: 0px;
width: 150px;
height: 34px;
line-height: 34px;
transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-moz-transition: all 300ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-webkit-transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-o-transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
color: #333;}
#searchform input[type=text]:hover,#searchform input[type=text]:focus
{
width:200px;
}
#searchform input[type=submit]
{
background:url(/4.bp.blogspot.com/-R8OKVUsis3s/UgZEksy0V1I/AAAAAAAAAT4/QtN9sBHMZis/s1600/icon-search.png) center 9px no-repeat;
cursor:pointer;
margin:0;
padding:0;
width:37px;
height:34px;
line-height:34px;
background-color: #FF3D00;
}
input[type=submit]
{
padding:4px 17px;
color:#ffffcolor:#585858;
text-transform:uppercase;
border:none;
font-size:20px;
background:url(gradient.png) bottom repeat-x;
cursor:pointer;
margin-top:10px;
float:left;
overflow:visible;
transition:all .3s linear;
-moz-transition:all .3s linear;
-o-transition:all .3s linear;
-webkit-transition:all .3s linear;
}
#searchform input[type=submit]:hover
{
background-color:#444 ;
}
.selectnav {
display:none;
}