BloggaRolla
Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxtwy7fZVecnXnNhpQDcbqOHGv9NRg0dMQ4jjTYYl5dadMkJAxNynv5R5-BS1eTBYvIA82RLE3IyKS81AgKD-UpJpHd5Bwz82vwKXaxF8ZpNyog349CJUgYOzFir5sAfm3GxeFyABmHVzJ/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuL7Sc5ygV0teZogvWScmDyQllwwpt6fSzwTioOopXRGKMPzkNjaHKKXHO8K1lFCfXSwXV3Rqu1HmZzYxo974-ijSksYS_Lr2faKWa3zy-4byqNihyDboo-JY3SznFBN-PnN1yOIFhKK8h/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVGZO2oEG5NyO-zBcKp5Xo0yxayKhyphenhyphen0TrdeMfOCz962QHlSBrypNo19TrxEPdA5K1sQD8DhsbxQYNHGa8wsEG2xdYKDoofHctXGW4Evbz9ra2qzXfKvcr8Yc-KbOACcOBbPxS94-qnV7K/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqsffqA-SKr8W37wAaPLn3W-SYuV9MhwL4sx5HzmsV4woiGiAO88HqrdvM-9dAw44mrpfXTl4TcG5E5qt73MbDh7cbmggi31VIknWDM7rVIftUE56hdfdGlQsqBY5Twt6biKZ5YMEdDvE5/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7I1Tp60qGNXk2CoWCooiq3VYAnE3HmMC-URC8vnrbX5OhyphenhyphenUS-sMV8QltrPywMDqPcNJwvxqWvf6DW1anhQAa-raA02reKZ_JsIagPwHJRgU4rbLYJ4VSAyLjL5u4lixh5YD9hJLWLy9AV/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho2le9J9v3nJuxTtfOV9t2-hujFzErT2kn415hBBeFMUkPohak2SVXKUwn4AIIgxdG5-WX_y_m5pdTGPNk1vq_1jGajvF5GbNv06h2L9m49qL6jHOdMYq1PSTy0sv1OJGFaZT3YYYuB9vB/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisEeEZX26oJcTQOLuCUkK8Pzpf2u3jpBKoJxdwHqKvr3IpAR0jctbmfO7B-e-hAiJ1vvgvE9CDffvDlmt4URPCbdBJ2VNyPDbWflBwWRa_aB1GGVGaP19RYHtkGVxu-6_xnmhDyTc54Ie-/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNyLBDiPhh9v1bev1bHqJy-uTHlRndeJ-uKNudpZzQnCDWfWRdapKLqYyzpz3UGB5CNzo74MHngYhu4-tnaKvRjHSbI2GS7veC0ajeQQhOXv4jglhP3Jz5RXQVcn0zog55QleZXeFSrgqI/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdf2RWoN9G7rPDOQumS_8W2VOHO0-01NM3kKBTYlV4J3XyeBXlhs3yRFDKkg588_AmqAdYaPB2LYGPbX0NkZctrYVRADS98bZuO9GQxa45VV3WP883m2gzcrRdFNZNpI6uiLpJSgLoXVKV/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNTFLCeGpyMAA9ODIBGjnVP90asWdyDgujbce_7V2e96DjViNgGOsSJo_ynfcN1LEbQT5hdWf5H_vM-PefXNeImHKIXYajZk5MLRc4nWsmGs5OzB_3PjWHpG0aZNVFebmlkhOOO3A578XC/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 ниже.