Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  понедельник, июля 04, 2011  

Форма поиска в Blogger с кнопкой-картинкой
Продолжая тему виджетов поиска, добавлю в коллекцию еще несколько простых, но забавных форм поиска для блога. Их главная отличительная и одновременно объединяющая особенность - наличие оригинальной картинки вместо стандартной кнопки для вывода результатов поиска.

Установка виджета поиска:

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

Итак, выберите нужную форму поиска, скопируйте соответствующий ей код и установите себе в блог.

<form action="/search" method="get" target="_blank">
<input id="form-query" name="q" placeholder="Введите запрос..." value="" /> <input height="30" src="http://4.bp.blogspot.com/-0E8mG3lxork/ThDRCMmwhqI/AAAAAAAABB8/mOo0_rPITME/s1600/search+%25282%2529.png" style="padding: 0; vertical-align: bottom;" type="image" width="30" /></form>

<form action="/search" method="get" target="_blank">
<input id="form-query" name="q" placeholder="Введите запрос..." value="" /> <input height="30" src="http://1.bp.blogspot.com/-4sPuCpHBN2I/ThDe8z_potI/AAAAAAAABCM/xdjMyBEQ8wQ/s1600/binoculars_128.png" style="padding: 0; vertical-align: bottom;" type="image" width="30" /></form>

<form action="/search" method="get" target="_blank">
<input id="form-query" name="q" placeholder="Введите запрос..." value="" /> <input height="30" src="http://3.bp.blogspot.com/-iBrpcqdb6DQ/ThDe9oFzPiI/AAAAAAAABCQ/ZHhB1FYGqhU/s1600/find.png" style="padding: 0; vertical-align: bottom;" type="image" width="30" /></form>

<form action="/search" method="get" target="_blank">
<input id="form-query" name="q" placeholder="Введите запрос..." value="" /> <input height="30" src="http://2.bp.blogspot.com/-stXNmvUdWuM/ThDfAKLfNHI/AAAAAAAABCU/biY5Quql6B0/s1600/kghostview.png" style="padding: 0; vertical-align: bottom;" type="image" width="30" /></form>
<form action="/search" method="get" target="_blank">
<input id="form-query" name="q" placeholder="Введите запрос..." value="" /> <input height="30" src="http://4.bp.blogspot.com/-Qe3dzkqgxdk/ThDfAqLQ8LI/AAAAAAAABCY/OeORiwJDzeY/s1600/perspectivebutton-search.png" style="padding: 0; vertical-align: bottom;" type="image" width="30" /></form>

<form action="/search" method="get" target="_blank">
<input id="form-query" name="q" placeholder="Введите запрос..." value="" /> <input height="30" src="http://4.bp.blogspot.com/-E-4kci7iyBc/ThDfBIvZI4I/AAAAAAAABCc/yxLai94NLec/s1600/rechercheinternet.png" style="padding: 0; vertical-align: bottom;" type="image" width="30" /></form>

<form action="/search" method="get" target="_blank">
<input id="form-query" name="q" placeholder="Введите запрос..." value="" /> <input height="30" src="http://3.bp.blogspot.com/-44oASnaU85I/ThDfBpEJThI/AAAAAAAABCg/wsz8pFyIa_s/s1600/search+%25281%2529.png" style="padding: 0; vertical-align: bottom;" type="image" width="30" /></form>

<form action="/search" method="get" target="_blank">
<input id="form-query" name="q" placeholder="Введите запрос..." value="" /> <input height="30" src="http://4.bp.blogspot.com/-RA1f_60183E/ThDfCL2C9SI/AAAAAAAABCk/DEDfDekUyeA/s1600/search+%25283%2529.png" style="padding: 0; vertical-align: bottom;" type="image" width="30" /></form>

<form action="/search" method="get" target="_blank">
<input id="form-query" name="q" placeholder="Введите запрос..." value="" /> <input height="30" src="http://4.bp.blogspot.com/-r8WhyH2lxzo/ThDfFP0dsnI/AAAAAAAABCo/kEiXmZf0XW0/s1600/search.png" style="padding: 0; vertical-align: bottom;" type="image" width="30" /></form>

<form action="/search" method="get" target="_blank">
<input id="form-query" name="q" placeholder="Введите запрос..." value="" /> <input height="30" src="http://1.bp.blogspot.com/-fjXyj-hjrHY/ThDfFql_1JI/AAAAAAAABCs/VW_Yrwy-RP0/s1600/search2.png" style="padding: 0; vertical-align: bottom;" type="image" width="30" /></form>
При желании в любой из перечисленных кодов вы можете добавить свой адрес картинки для отображения вместо указанного, регулируя размеры изображения с помощью переменных width="" и height="" со своими числовыми значениями.

К сожалению, в ненаглядном Internet Explorer эффект, отображающий текст по умолчанию в поле ввода поискового запроса и убирающий его при клике, не работает. Это, конечно, мелочь, но если велико желание все-таки лицезреть его в IE, тогда в коде выбранного виджета строку <input id="form-query" name="q" placeholder="Введите запрос..." value="" /> замените на:
<input
 onblur="this.value=(this.value=='')?this.title:this.value;"
 onfocus="this.value=(this.value==this.title)?'':this.value;"
 value="Поиск"
 title="Поиск"
 type="text"
/>



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.