Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

Дизайн гаджета окно поиска BLOGGER

поиск по сайту

Привет, друзья. Продолжая тему окно поиска для блога, предлагаю вам сегодня изменить внешний вид родного гаджета <<Поиск>>, чтобы сделать его более уникальным. Понятно, что сначала нужно установить этот гаджет - вкладка дизайн - добавить гаджет - поиск. И вот так выглядит это официальное окно на странице


Внешний вид его очень простой. Немного стилизуем его с помощью CSS. Здесь у меня показаны картинки, коды все рабочие. Смотрите варианты и если что - то приглядели, копируйте нужный код. В некоторых примерах я отметила голубым цветом адреса картинок (лупа). Можно подобрать свои иконки.


Вариант 1. Без кнопки с картинкой - лупой.

поиск по блогу

table.gsc-search-box td.gsc-input{padding-right:5px!important}input.gsc-input{background-color:#fff;border-color:#CCC!important;padding:6px!important;height:17px;font-size:15px;color:#9F999D;border-radius:3px 0 0 3px;border-width:1px 0 1px 1px !important}input.gsc-search-button{margin-left:-1px!important;border:1px solid #CCC;padding:5px;border-radius:0 3px 3px 0;cursor:pointer;font-size:0;height:31px;width:31px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxTRpIu36oi-KFyTFzuH72fzwCKb6zMdnpArhJzEjiAdUorf7g2cppqDVloW_REg88NmG1i1pLYHLz5esTW8IFM2VM3h3-8eopZUIMrDZ3DO9NlVIrT2ngkk1akYjBhbToQF3Ze9bnxKc/s1600/search-icon.png) no-repeat center;border-width:1px 1px 1px 0}


Вариант 2.


input.gsc-input{background-color:#fff;border-color:#CDCDCD!important;padding:6px!important;border-radius:5px 0 0 5px!important}input.gsc-search-button{margin-left:-1px!important;border:1px solid #ddd;padding:5px;border-radius:0 5px 5px 0;cursor:pointer}


Вариант 3.  Изменим цвет кнопки и рамки поля ввода.

поиск по блогу

input.gsc-input{background-color:#fff;border-color:#62B3EC!important;padding:6px!important;height:17px;font-size:13px}input.gsc-search-button{margin-left:-1px!important;border:1px solid #62B3EC;padding:5px;border-radius:0 5px 5px 0;cursor:pointer;font-size:0;height:31px;width:31px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6NBIcA5YTsXGL8-yDPjZgw8P5DP6upXmEgy_09SGz7XYgtVgYj3OdjsYRSwvC8j37Ez6Kgo0BZn9f9koz6gbVKt3vTyiLLRsHdtNt7SoMj6xvlgrdNeszGsEztSZkHKM_hOq5p-dONHbX/s1600/Search-icon.png) no-repeat center;background-color:#62B3EC;background-size:15px}.gsc-search-button:hover{background-color:#3B78E7;border-color:#3B78E7;border-radius:0 5px 5px 0}


Вариант 4. Окно с чёрным фоном.

поиск

table.gsc-search-box td.gsc-input{padding-right:40px!important}.gsc-search-button{display:none!important}input.gsc-input{padding:5px 0 8px 40px !important;height:22px;font-size:13px;color:#fff;border-radius:19px;border-width:0!important;width:100%!important;box-shadow:2px 3px 3px #292929 inset;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6NBIcA5YTsXGL8-yDPjZgw8P5DP6upXmEgy_09SGz7XYgtVgYj3OdjsYRSwvC8j37Ez6Kgo0BZn9f9koz6gbVKt3vTyiLLRsHdtNt7SoMj6xvlgrdNeszGsEztSZkHKM_hOq5p-dONHbX/s1600/Search-icon.png) no-repeat scroll 16px 12px;background-color:#444;background-size:12px;text-shadow:1px 3px 3px #0B0A0A}


Вариант 5. Красиво смотрится на разноцветном фоне за счёт прозрачности.


table.gsc-search-box td.gsc-input{padding-right:0!important}input.gsc-input{background-color:RGBA(0,0,0,0.5);padding:8px 15px!important;height:22px;font-size:15px;color:#fff;border-radius:19px;border-width:0!important;width:100%!important}input.gsc-search-button{margin-left:-5px!important;margin-right:5px!important;padding:5px;border-radius:50%;cursor:pointer;font-size:0;height:30px;width:30px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxTRpIu36oi-KFyTFzuH72fzwCKb6zMdnpArhJzEjiAdUorf7g2cppqDVloW_REg88NmG1i1pLYHLz5esTW8IFM2VM3h3-8eopZUIMrDZ3DO9NlVIrT2ngkk1akYjBhbToQF3Ze9bnxKc/s1600/search-icon.png) no-repeat center;border-width:0}


А сейчас, определившись с выбором и готовым кодом, идём во вкладку Тема и перед строкой ]]></b:skin> устанавливаем код. Для начинающих советую прочитать статью как это просто сделать. Сохраните шаблон и полюбуйтесь результатом.

До встречи. 
👇
Получайте новые сообщения с блога прямо на почту

Введите Ваш email


0 коммент.:

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML