quarta-feira, 24 de setembro de 2014

Criar caixas de pesquisa personalizadas - Blogger


   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 ;)

4 comentários:

  1. Olá! Faço parte da Agenda dos Blogs, vi seu blog na listagem e vim conhecer! Já fui ficando por aqui e seguindo é claro para não perder nada! Quando puder vem conhecer o meu também, vou adorar sua visita!
    Beijos!
    http://solzinhartes.blogspot.com

    ResponderEliminar
  2. Hey, Sol Oliveira espero que tenha gostado e que acompanhe meu blog, qualquer dúvida já sabe! Irei visitar seu blog!

    ResponderEliminar
  3. Oi Gonçalo, gostei tanto que voltei pra agradecer sua visita em meu blog! Abração!

    ResponderEliminar
  4. olá!vim agradecer a visita e o carinho no meu blog,tenha uma linda tarde de domingo! bjss!!

    ResponderEliminar