Дизайн гаджета окно поиска 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(http://1.bp.blogspot.com/-b7DvNZpfZio/VbJw34qUQOI/AAAAAAAAAFU/MfOQrIYchKQ/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://1.bp.blogspot.com/-ZJ9Ze0-zmMw/V5HsIRIztEI/AAAAAAAAAio/sLQreQ7dM3cnP7RsxkukoWXk9FowVN0sQCLcB/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://1.bp.blogspot.com/-ZJ9Ze0-zmMw/V5HsIRIztEI/AAAAAAAAAio/sLQreQ7dM3cnP7RsxkukoWXk9FowVN0sQCLcB/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(http://1.bp.blogspot.com/-b7DvNZpfZio/VbJw34qUQOI/AAAAAAAAAFU/MfOQrIYchKQ/s1600/search-icon.png) no-repeat center;border-width:0}

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

До встречи. 

👇

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

Введите Ваш email