27.12.12

Caixa de Pesquisa personalizada


Boa Tardee Meninass!!
Hoje eu trouxe um tutorial muito fácil e muito lindo pra vocês! Eu coloquei aqui no blog hoje, podem ver a caixa de pesquisa, como ela está personalizada, porque vou ensinar a ficar daquele jeito, ok? Vamos ao tuto! Eu aprendi esse tuto lá no Crazy HTML.

                      Vá no seu HTML aperte F3 e procure por ]]></b:skin>

                                               Acima dessa tag cole o código seguinte:

.search{
float: left;
font-family: arial !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 120px; /*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:27px; /*Largura do botão*/
height:20px; /*altura do botão*/
border: 0;
padding:2px;
}
Agora é só alterar as cores, e o resto que falta. Eu peguei alguns botões do Crazy HTML pra vocês usarem:

                                 

              Agora vá em Layout  Adicionar um gadget  HTML JavaScript e cole o seguinte código:

<form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" /> <input class="searchbut" type="submit" value="" /> </form>
 Se você quiser mudar o que está dentro da caixinha é só apagar o 'Digite o que procura' e colocar outra coisa.

Agora é só salvar e pronto! Fácil não é?! 
Se usar esses botões ou esse tutorial, creditem, ok?!
Bjoks ;*

12 comentários:

  1. Bem fácil e útil o tuto (:
    Adorei !!

    Beijos (:

    http://pensamento-jhenny.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Realmente é muito fácil e obrigado por comentar! Já estou seguindo seu blog viu? Bjks!

      Excluir
  2. Amei o tuto, essa caixa de pesquisa é linda, seu blog é muito kawaii
    Seguindo aqui, tem como seguir de volta?

    Adolescente Nerd

    ResponderExcluir
    Respostas
    1. Obrigado ><
      Já estou te seguindo! Beijos ;*

      Excluir
  3. Adorei o post floor ;) Já estou seguindo aqui, retribui lá!
    Adorei sua visita.

    Beijos ;*

    ResponderExcluir
    Respostas
    1. Obrigado ^^
      Desculpa mas eu tentei acessar seu perfil para visitar seu blog, mas o perfil está bloqueado :(
      Pode mandar o link do seu blog? Bjoks ;*

      Excluir
  4. hahahahaha vlw a dica flor...seguindo! www.golden-mila.blogspot.com :3333

    ResponderExcluir
    Respostas
    1. Valeu você por ter comentado! Eu adorei seu blog ^^

      Excluir
  5. Acho lindo! ahsuah Já fiz lá no blog!
    Muito legal o tuto!
    Beijos, Batom De Framboesa.

    ResponderExcluir
    Respostas
    1. Obrigado por comentar!!
      Beijoss ;*

      Excluir
  6. Seu blog eh fofo!
    Amei!
    Seguindo sim, kissus.
    GB

    ResponderExcluir

Oii, obrigado por comentar! Só tenho algumas regrinhas:

♥ Não comente com palavras ofensivas, não xingue e nem fale palavrões;

♥ Leia a FAQ antes de fazer qualquer pergunta;

♥ Respeite essas duas regras e você será bem vindo aqui ^^