Boas, hoje aqui no blog Tuga Design Web vamos ensinar a personalizar as caixas de pesquisa para blogger. Como devemos saber o Google já possui essa caixa de pesquisa, o que nós vamos fazer é personalizá-la. Então para personalizarmos a nossa caixa de pesquisa, em primeiro lugar vamos colocá-la. Para colocar a nossa caixa de pesquisava vamos a Esquema -> Adicionar Mini aplicação e adicionamos Caixa de pesquisa.
Feito isto, vocês já possuem vossa caixa de pesquisa no seu blog, agora vamos personalizá-la.
Para personalizar a nossa caixa de pesquisa vamos a Modelo -> Editar HTML
Pressionamos:
Ctrl + F
E pesquisamos por:
]]></b:skin>
Feito isto, vamos escolher a caixa de pesquisa que eu personalizei, abaixo dela terão o código para personalizar a caixa de pesquisa que deverão colocar antes da parte pesquisada.
form.gsc-search-box {
background: rgb(125,126,125);
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
}
form.gsc-search-box {
background: rgb(167,207,223);
background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,207,223,1)), color-stop(100%,rgba(35,83,138,1)));
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
background: -o-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
background: linear-gradient(to bottom, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 );
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
}
form.gsc-search-box {
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
background: rgb(240,249,255);
background: -moz-linear-gradient(top, rgba(240,249,255,1) 0%, rgba(203,235,255,1) 47%, rgba(161,219,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,249,255,1)), color-stop(47%,rgba(203,235,255,1)), color-stop(100%,rgba(161,219,255,1)));
background: -webkit-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%);
background: -o-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%);
background: -ms-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%);
background: linear-gradient(to bottom, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 );
}
E pronto, mais uma aula de Tuga Design Web, espero que tenham gostado das caixas de código personalizadas para blogger, se quiserem uma só para seu blog com outras cores, peça nos comentários ;)
