15 de dez de 2012

Tutorial: Caixa de Pesquisa Igual à do Blog



Hey peoples!!
How are you??

Bem, hoje eu não tive tempo de fazer quase nada aqui pro blog. Ontem também foi um dia corrido porque tive que ir no oftalmologista(sempre achei que fosse oftomologista mas não é..) e por isso, tive que ir pro "trabalho" que não se faz nada da minha mãe(caso se interessem, vou ter que usar óculos- 1.25- sim, é muito alto). 

Mas no meio dessa correria e falação toda, eu consegui fazer umas imagens pra vocês usarem nesse tutorial. É um tuto do The Lovers. Então, todos os créditos vão à Lary.

Vamos ao tuto??


Vá em seu HTML, dê um CTRL + F  e procure por:

]]></b:skin>

Acima da tag, cole o seguinte código:


.search{float: left;font-family: arial !important; /* Fonte do campo de texto*/}.searchbar{height: 25px; /*Altura da caixa*/width: 200px; /*largura da caixa*/text-align:center;color:#000000; /* cor da fonte da caixa*/background:#dcdcdc!important; /* cor de fundo da caixa */box-shadow: inset 1px 1px 6px  #dcdcdc; /* sombra interna*/font: 11px arial !important; /*fonte do texto*/border: 2px solid  #000000; /* borda */-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}.searchbut{background: url('URL DO BOTÃO');width:30px; /*Largura do botão*/height:30px; /*altura do botão*/border: 0;padding:2px;}

Altere as cores tudo certinho. Mude URL DO BOTÃO pelo link de sua imagem e faça os ajustes necessários. Fiz alguns botões para vocês usarem. Se forem usar outros botões, ajuste a largura e a altura, porquê as medidas que estão aí, já são as medidas dos botões que fiz.

Agora, os botões:





 Fiz mais modelos de por achar que seriam os mais usados.

Gostaram?
Comentem por favor.

Beijos,
Pâm

2 comentários:

  1. ótimo tuto!Só uma pergunta quando você faz o layont como faz para a pessoa baixar o layont que você fez para ela?

    ResponderExcluir
    Respostas
    1. Ahn, obrigada.
      Eu coloco todos os códigos do layout num blog de testes, e aí falo pra você no seu blog. Se tiver mais dúvidas. Olhe a página de informações no portfólio, clicando lá na imagem do gadget recomendo.

      Excluir

Informações Básicas de Comentários(IBC):
-Ler não mata, então leia o post antes de comentar
- Não serão aceitos comentários ofensivos.
- Aceito pedidos para seguir, se estiver seguindo o blog...
- Respondo e retribuo todos os comentários.


Obrigada por Comentar!!