Розміщення і дизайн користувальницького пошуку від Google (gcse)
поту як
Швидко організувати пошук по сайту можна використовуючи, готову систему користувальницького пошуку (СПП) від Google Inc, а знаючи необхідні селектори, дуже просто за допомогою CSS, змінити дизайн пошукового рядка і кнопки пошук в формі на власний відповідний до загального оформлення.
Даний пост детально містить докладний опис і приклади того, як розмістити пошуковий рядок від Гугла в меню сайту або блогу і легко змінити її зовнішній вигляд за допомогою CSS.
Для того, щоб встановити пошукову систему від Google на сайт, необхідно зареєструватися на сайті Google CSE.
Далі створити нову систему пошуку для свого сайту:
Після цього можна клікати "Отримати код"
В результаті отримуємо два коду - скрипт, який завантажує пошукову форму і HTML-тег, в який буде завантажуватися форма.
Як додати пошуковий рядок Google в меню
Щоб розмістити пошуковий рядок в блоці або в одному з розділів горизонтального або вертикального меню, досить в потрібний блок додати тег-контейнер, який був отриманий разом зі скриптом пошукової системи Гугла.
В результаті код буде виглядати приблизно так:
Щоб надалі спростити роботу з оформленням і розташуванням, краще обернути тег пошуку в додатковий блок, і привласнити йому окремий клас, наприклад - .search-row. Так буде зручніше вносити зміни в CSS саме для нього.
Форма підганяється автоматично щодо до ширини батьківського блоку
Як змінити дизайн форми користувальницького пошуку від Google
Як було показано вище, для розміщення пошукового рядка на сайті достатньо розмістити спеціальний тег в потрібному місці, все решта HTML-елементи форми пошуку і стандартні стилі оформлення, будуть завантажені скриптом, що називається, "на льоту". Однак це не заважає користувачам змінити дизайн форми пошуку на власний розсуд, застосовуючи власний CSS, хоча і створює деякі, цілком можуть бути вирішені труднощі.
До речі сказати, використовуючи наведений нижче приклад, можна без праці змінити оформлення Blogger-гаджета "Вікно пошуку". який, по-суті, використовує ту ж саму СПП від Google.
Щоб доданий до СПП персональний CSS був застосований правильно, в деяких випадках, до значень властивостей потрібно буде додати параметр! Important.
А селектори краще прописувати з урахуванням тегів і селектор батька:
HTML структура блоку:
Приклад простого CSS:
/ * Основний блок * /
# Search-row margin: 2% 27%;
min-height: 48px;
>
/ * Обнуляємо все що тільки можна * /
div.gsc-control-cse,
table.gsc-search-box,
table.gsc-search-box td.gsc-input,
table.gsc-search-box td.gsc-search-button,
form.gsc-search-box background: transparent;
border: 0;
padding: 0;
margin: 0;
outline: 0;
>
table.gsc-search-box border-style: none;
border-width: 0;
border-spacing: 0 0;
width: 100%;
margin-bottom: 2px;
>
div.gsc-control-cse,
form.gsc-search-box,
table.gsc-search-box position: relative;
>
/ * Якщо хочеться анімуємо елементи * /
form.gsc-search-box * transition: all ease 1s;
>
/ * Додамо напис * /
td.gsc-input :: before content: 'Search. ';
color: # 999;
position: absolute;
top: 10px;
left: 5px;
font-size: 32px;
>
/ * Змінимо напис при наведенні на форму пошуку * /
form.gsc-search-box: hover td.gsc-input :: before content: 'What to search?';
>
/ * Стилі для поля запиту * /
td.gsc-input> input.gsc-input position: relative;
background: transparent! important;
background-image: none! important;
border: none;
border-bottom: 5px solid transparent;
color: # 000;
cursor: pointer;
font-size: 32px;
height: 100%;
min-height: 48px;
width: 0;
>
/ * Стилі при наведенні на осередок з полем пошукового запиту * /
td.gsc-input: hover> input.gsc-input border-bottom: 5px solid #BBBABA;
color: # 000;
cursor: text;
width: 98%;
margin-left: 0;
>
/ * Поле в фокусі при введенні запиту * /
td.gsc-input> input.gsc-input: focus border-bottom: 5px solid #BBBABA;
background-color: #fff! important; / * Однаковий з кольором фону сторінки * /
color: # 000;
cursor: text;
width: 98%;
margin-left: 0;
>
/ * Кнопка пошуку * /
td.gsc-search-button> input.gsc-search-button background-image: url (data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAjVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADqhzP4AAAALnRSTlMABPf6CUXQsarovPLVg2xTSDIho31MJRMC48mel5SHdWNdGw3cwcCnTkA9Ku2295chDQAAAUVJREFUeAHt0tlygjAUxvEPCLIgIouI + 75Y2 / P + j9dJgqNojsJ1 + 7v84t8MDJD + 7VLXTXdoKYt7pPTjEp9tZw7d5Vt8cP6mhijBWwN6scIbazIYgJXapB2LzaYISXNSMKoeKeEVSvlDSt + C2YaU5X2JSVnDTF8ww4OFvgJGV5ImAg / EXo3pm1e6YkaDnKQtGsZq9GFykEcBnkzkOuWfuYcnU / 6p1dGe + RsTTx7ZAg2WLdcQJkuSXDR8qXEBkxFJHhpOakxgIqLXK / QF9g5G + jsIyvuSBfXXYpbZunBRu + jfOyUYBWneUADC9UlbgmMd6SaYOHSTV + CM + 2SSW3xxIJMTX1iFTQ8chxSfL5DNI6pF8yxpUUAMYz8M / XgkAPAF51wXXuti1L2wuxbDW1F1LdboWMzRmquKAToUEVEo0ME4uVT4w34BCRBRLUjouvMAAAAASUVORK5CYII =);
background-repeat: no-repeat;
display: block;
background-position: 50% 50%;
background-color: transparent;
font: normal normal 0 sans-serif;
color: transparent;
border: 8px solid transparent;
border-radius: 50%;
margin: 0 0 0 10%;
height: 48px;
min-width: 48px;
width: 48px;
>
td.gsc-search-button> input.gsc-search-button: hover background-color: # AECEF5;
>
/ * Приховуємо кнопку очищення пошукового рядка * /
td.gsc-clear-button> div.gsc-clear-button display: none;
>
В результаті маємо отримати так:
ПРИКЛАД
P.S. Приклад бажано дивитися через сучасні браузери, тому як для "дідів" я особливо не морочився.
На цьому все. Подальші дослідження цілком залежать від фантазії шукачів та знань отриманих ними при вивченні властивостей каскадних таблиць стилів.
Тут все просто, такі ж стилі застосовуєш, тільки до кнопки. Але ось що тобі, твій готовий CSS, навіть спрайт тобі зробив :), тільки до себе перезалешь щоб коли видалю його не пропав у тебе.
3.bp.blogspot.com/-q1bs9vyvFHI/USvKHN-hVWI/AAAAAAAAFQo/Jge56ZVFSao/s1600/sw-(2).png
:
input.gsc-search-button background: url ( '. /sw-(2).png') 0 0 no-repeat # 000! important;
font: normal normal 0px sans-serif! important;
color: transparent! important;
border: 1px solid # 666! important;
height: 30px! important;
width: 30px! important;
min-width: 30px! important;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
>
input.gsc-search-button: hover background: url ( '. /sw-(2).png') 0 -32px no-repeat # 00baff! important;
border: 1px solid # E6E6E6;
height: 30px! important;
width: 30px! important;
>
Розміри картинки 32х32, а тебе там все по 30 пікселів, якщо що обрізаєш, але і так, начебто, нормально стає
Ні, цього я не знаю, швидше за все щось змінилося в самому скрипті, доступ до нього є в засобах розробника, але там там я ще не Копашов.