Окно поиска (search) с эффектом расширения Blogger

Просмотров: 117

search_poiskПривет, дорогие друзья! Окно "Поиска по блогу" (search) Blogger обязательный атрибут любого блога. С помощью его вашим посетителям легче находить нужную информацию в вашем блоге. Если контента очень много, порой сам забываешь о чем писал. Достаточно ввести ключевое слово в форму поиска и тут же появляются результаты искомых сообщений.

Окно поиска упрощает навигацию по блогу и так далее.

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

Окно поиск для Blogger с эффектом расширения

Простое окно поиска, без расширения:

search
Окно поиск

Код для такого стиля:

<style> #s {
margin: 0 auto;
-webkit-appearance: none;
-moz-appearance: none;
padding: 12px 48px 12px 12px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
width: 280px;
height: 16px;
color: #3a4449;
border: none;
outline: none;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
z-index: 2;
background: #fff url(http://2.bp.blogspot.com/-RdCoLqn34t4/UDeUFSTJ17I/AAAAAAAAKqg/GxdClZ5RjXg/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
} </style>
<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Поиск..." />
</form>
<style></style>

Окно поиск с эффектом расширения белый стиль, вариант первый:

search1
Поиск стиль белый

Код для вставки:

<style>
#white #search {
}
#white #search input[type="text"] {
background: url(http://2.bp.blogspot.com/-GOn5C47SlEE/UL10qeX1DAI/AAAAAAAAGcw/AsRxdnyaYXg/s1600/search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 170px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-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;
}
#white #search input[type="text"]:focus {
width: 250px;
}
</style>
<div id="white">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Поиск..." />
</form>
</div>

Ширина виджета 170px в покое. 250px - пределы расширения.

Окно поиска по блогу Blogger с расширением, вариант второй, стиль темный:

search2
Стиль темный

Код виджета:

<style>
#apple #search {
}
#apple #search input[type="text"] {
background: url(http://2.bp.blogspot.com/-GOn5C47SlEE/UL10qeX1DAI/AAAAAAAAGcw/AsRxdnyaYXg/s1600/search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:170px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-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;
}
#apple #search input[type="text"]:focus {
background: url(http://2.bp.blogspot.com/-FV1ILaZlCwM/UL10p9OBzkI/AAAAAAAAGcs/u7FnTmL4EKo/s1600/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 230px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
</style>
<div id="apple">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Поиск..." />
</form>
</div>

170px - ширина в покое, 230px - ширина при расширении.

Форма поиска для блога вариант третий:

search3
Форма поиска для блога

Код:

<style>
#dark #search {
}
#dark #search input[type="text"] {
background: url(http://2.bp.blogspot.com/-FV1ILaZlCwM/UL10p9OBzkI/AAAAAAAAGcs/u7FnTmL4EKo/s1600/search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 170px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-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;
}
#dark #search input[type="text"]:focus {
width: 230px;
}
</style>
<div id="dark">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Поиск..." />
</form>
</div>

Здесь, ширина такая же. Готово. Удачи.

С уважением, Сергей


3 комментария к “Окно поиска (search) с эффектом расширения Blogger”

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

    Ответить
  2. Спасибо, очень помогли, воспользовался первым вариантом без расширения)

    Ответить

Оставьте комментарий

 необходимо принять правила конфиденциальности