Este tutorial é muito útil.
Esta caixinha é para facilitar a nossa busca quando entramos
em um blog. Vamos ao tutorial:
- Vá em Design - Elementos de Página
- Clique em Adicionar Gadget, procure pelo gadget HTML/JavaScript e cole o código abaixo:
Você pode trocar a palavra "Go" pela palavra que desejar, é ela que fica dentro do botão para pesquisar.
Esta caixinha é para facilitar a nossa busca quando entramos
em um blog. Vamos ao tutorial:
- Vá em Design - Elementos de Página
- Clique em Adicionar Gadget, procure pelo gadget HTML/JavaScript e cole o código abaixo:
< input class="searchbar" id="s" name="q" type="text" value="" />
< input class="searchbut" type="submit" value="GO" />
< /form>
Você pode trocar a palavra "Go" pela palavra que desejar, é ela que fica dentro do botão para pesquisar.
Agora entre no seu HTML, aperte no seu teclado ctrl f para abrir a caixinha de busca,
quando abrir digite ]]></b:skin> dê enter, quando encontrar acima dele coloque o código abaixo:
.search{ /* Geral */float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
margin-left: 0px;
margin-top: 6px; /* Margem superior, edite se precisar, - sobe e + desce */font-family: Tahoma, Tahoma; /* Fonte da letra que será escrita quando procurarmos por algo */
}
.searchbar{ /* Barrinha onde se digita */height: 18px; /* Altura da barrinha */width: 230px; /* Largura da barrinha */margin-left:0px;
margin-top:-45px; /* Margem superior, edite se precisar, - sobe e + desce */margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce */color: #ccc; /* Cor da fonte da letra que será escrita quando procurarmos por algo */border:solid 1px #ddd; /* Borda */padding:3px 5px;
border-radius:2em; /* Bordas Arredondadas */box-shadow:0 1px 0px rgba(0,0,0,.1); /* Sombra interna */background: #fff; /* Cor do fundo */background:-webkit-gradient(linear, left top, left bottom,from(#fff),to(#ededed));
background:-moz-linear-gradient(top, #fff, #ededed);
filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed');
-ms-filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')
}
.searchbut{ /* Botão */border:0 !important;
float: right;
background: #D9D9D9; /* Cor do fundo do botão */cursor: pointer;
color:#fff; /* Cor do texto */padding:0 5px 2px 5px;
height:26px; /* Altura do botão */margin-top: -20px; /* Margem superior, edite se precisar, - sobe e + desce */margin-right: -35px; /* Margem direita, edite se precisar */border-radius:25px; /* Bordas Arredondadas */box-shadow:0 0 2px #aaa; /* Sombra */text-shadow:0 -1px #aaa; /* Sombra no texto Go */}
.searchbut:hover { /* Botão Hover */background:#F3A7C2; /* Cor do fundo do botão hover */}
Visualize e se estiver tudo certo salve!
não achei isso }]]> no meu HTML :/
ResponderExcluirDuas Garotas, o código está corrigido.
ExcluirNão funcionou :/
ResponderExcluirRachel, o código foi testado,
Excluirvocê deve estar esquecendo de colocar algum código,
ou alguma pontuação.
Tente outra vez.