1º Passo - Vá em Layout>Adicionar um gadget>Escolha o de HTML/JavaScript. Dentro coloque o código a seguir, mas não coloquem título no gadget.
2º Passo - Agora vá em Modelo>Editar HTML, pressione Ctrl+F ou F3 e pesquise por }]]></b:skin> e ante dele cole:<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="GO" />
</form>
.search{ /* Geral */float: Right; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */margin-Right: 0px;margin-top: -85px; /* 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: 210px; /* Largura da barrinha */margin-left:0px;margin-top:-150px; /* Margem superior, edite se precisar, - sobe e + desce */margin-bottom:-18px; /* Margem inferior, edite se precisar, - sobe e + desce */color: #000; /* Cor da fonte da letra que será escrita quando procurarmos por algo */border:solid 1px #F0F0C0; /* 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: #A3D7D3; /* 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 #48AEA0; /* Sombra */text-shadow:0 -1px #48AEA0; /* Sombra no texto Go */}.searchbut:hover { /* Botão Hover */background:#8EB9B9; /* Cor do fundo do botão hover */}div#qTip {padding: 3px; /*Espaço entre a borda e o texto*/border: 1px solid #7EC9BF; /* Estilo da borda */display: none; /*Não mexa*/background: #50B6A8; /* Cor de fundo */color: #fff; /*Cor da fonte*/font-family: Verdana; /*Tipo de fonte*/font-size: 9px; /*Tamanho da fonte*/position: absolute; /*Não mexa*/z-index: 1000; /*Não mexa*/}
Agora é só personalizar as cores, visualizar e se estiver rudo certinho, é só salvar e pronto.
A barra ficará na mesma localização da minha, caso queiram mudar, é só as 3 primeiras linha do código:
float: Right; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */margin-Right: 0px;margin-top: -85px; /* Margem superior, edite se precisar, - sobe e + desce */
Olá !! Vim fazer uma visitinha e fiquei feliz em ver que o número de visitas está crescendo.
ResponderExcluirNosso GRUPO ENTRE BLOGS também está crescendo dia a dia, você já viu? São blogs diversificados e muito interessantes. Não deixe de visitar os blogs afiliados e colocar o comentário dizendo que chegou lá através do ENTRE BLOGS.
Veja as DICA ENTRE BLOGS que tenho postado creio que vão ajudar.
Vamos crescer juntos!!!
CONVIDO A CONHECER TAMBÉM MEU OUTRO BLOG
Crescimento Cristão-Maturidade
BJUUSS
CRIS
Blog Crescimento Cristão
Entre Blogs Grupo de Divulgação
Fan Page Cristãos em Construção
Olá Thiago, bom dia! Estou passando para conhecer o seu espaço...Adorei viu! Gosto muito de blogs explicativos,e a explicação dada neste texto é de muita utilidade...Parabéns pelo curso, eu também gostaria muito de fazer um curso de designer, acho bem legal. Te vi no Grupo Entre Blogs e cá estou para ficar com muito gosto.
ResponderExcluirBeijos ღ˘◡˘ღ
Marilene
Blog folhas flores e sutilezas
Obrigado ...
ExcluirParabéns Tiago , sou a blogueira do http://tornandomoda.blogspot.com.br/ , gostei do seu espaço aqui . Segui o seu blog ! Parabéns
ResponderExcluirBeijoooo
Que bom que gostou u.U
ExcluirMe ajudou muito esse tutorial (= Obrigada. QuasePerfeita
ResponderExcluirEu que agradeço por ter vindo aqui.... ^^
Excluir