Привет, дорогие друзья! Окно "Поиска по блогу" (search) Blogger обязательный атрибут любого блога. С помощью его вашим посетителям легче находить нужную информацию в вашем блоге. Если контента очень много, порой сам забываешь о чем писал. Достаточно ввести ключевое слово в форму поиска и тут же появляются результаты искомых сообщений.
Окно поиска упрощает навигацию по блогу и так далее.
Поэтому сегодня я хочу предложить вашему вниманию полезный виджет: Окно "Поиск" с эффектом расширения. Для того, чтобы посмотреть и выбрать стиль виджета прошу сгонять в демонстрационный
Окно поиск для Blogger с эффектом расширения
Простое окно поиска, без расширения:
Код для такого стиля:
<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>
Окно поиск с эффектом расширения белый стиль, вариант первый:
Код для вставки:
<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 с расширением, вариант второй, стиль темный:
Код виджета:
<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 - ширина при расширении.
Форма поиска для блога вариант третий:
Код:
<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>
Здесь, ширина такая же. Готово. Удачи.
С уважением, Сергей
Подскажите пожалуйста, как убрать ободок который появляется когда нажимаешь на меню?
Какое меню, здесь речь о форме поиска.
Спасибо, очень помогли, воспользовался первым вариантом без расширения)