By: Melina Souza |
Há bastante tempo vi um tutorial de como fazer uma barra de busca no blog da Gizaa, e acabei adaptando o estilo que ela usou no tutorial ao código da barra que eu já usava, e deu nisso que eu vou ensinar! rs
Bem, é super simples, antes de começar a mexer com html, vá em Layout > Adicionar um gadget > Escolha o de HTML/JavaScript. Dentro desse gadget cole:
<form action="/search" class="search" method="get">Você pode trocar a palavra Go pela palavra que desejar, é ela que fica dentro do botão pra pesquisa.
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="GO" />
</form>
Agora entre no seu HTML (Modelo > Editar HTML) e procure (F3) por }]]></b:skin> e acima dele colar o seguinte código:
.search{ /* Geral */Visualize e se estiver tudo certo salve!
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 */
}
Em breve trago o tutorial de como fazer os balões de comentários que estão me pedindo tanto! Kisses :*
Ameii o tuto , show e o que eu tava precisando me ajudou bastante !! Bjs flor seu blog e mto lindo super cute .... blogdaissll.blogspot.com
ResponderExcluirEu tava a procura disso esses dias rs
ResponderExcluiradorei muito! nada melhor que deixar seu blog cada vez mais a sua cara né? amei! lelusantos.blogspot.com.br
ResponderExcluirFlorzinha, já tentei várias vezes arrumar meu layout, mais quem disse que dou conta? Mais adoro ver os post ensinando.
ResponderExcluirBeijos da Bia
www.biancasales.com
Sorteio: http://www.biancasales.com/2012/12/sorteio-de-uma-camisa-cansei-de-ser.html
Instagram: @blogbiancasales
mds.. n consigo editar de jeito nenhum o html kkkkk nem mesmo com o tutorial...
Excluiranny, faz um tutorial de como colocar essas barrinhas rosas nos gadgets. pvf
ResponderExcluiraaamei vou fazer no meu http://diariodeuumagarota.blogspot.com.br/
ResponderExcluirAnny,Faz um tutorial dessas Barrinhas Pink no Gadget do Blog ! Eu Amei Seu blog tá Lindo!
ResponderExcluirAi que lindo! Amei o tutu *-*
ResponderExcluirFlor, tá tendo uma importante pesquisa lá do blog para melhorá-lo. Será que você pode ajudar?
http://deumjeitosomeu.blogspot.com.br/2013/01/como-podemos-melhorar-o-blog-pesquisa.html
Obrigada :3 e um Beijo
Jesus te ama *-*
Bem útil estava atrás desse tutorial,rs. Já estou usando! Beeijos!
ResponderExcluirhttp://revolutionstartshere-oficial.blogspot.com.br/
Mto util esse tutorial :)
ResponderExcluirbjos,
www.theattitudeincluded.blogspot.com.br
Nossa Otimo O tutorial
ResponderExcluirsigam ; http://wemoustache.blogspot.com.br
Muito bom o tutorial.
ResponderExcluirwww.teenlist.blogspot.com
Anny ensina como deixar o gadget tipo o seu. Tipo Categorias acima do gadget, por favor?
ResponderExcluirficou super legal, to usando ><
ResponderExcluirimagine-com-biebs.blogspot.com/
Lindo !! eu não sabia fazer isso ai tive que chamar mei amigo que é programador vim me ajudar kkk
ResponderExcluirFaz uma visita ??
http://peoplecrazystipoeu.blogspot.com.br/
se seguir avisa para que eu retribua !!
Muito útil, sempre uso =D
ResponderExcluirEba! Estava precisando desse tuto ^-^
ResponderExcluirxoxo
http://cloudl4nd.blogspot.com.br/
Este comentário foi removido pelo autor.
ResponderExcluirAmei o post (alias,amo seu blog! Haha)
ResponderExcluir>_<
http://girls-x-girls.blogspot.com.br/
Ouch eu não consegui achar :/
ResponderExcluirOiie fofa, tudo bom?
ResponderExcluirEu indiquei seu blog em uma tag que existe lá no meu blog ''Os Melhores Blogs 3013!''. Aqui está o link para você visitar: http://lincymods.blogspot.com.br/2013/01/os-melhores-blogs-de-2013.html
Beijos, espero que goste!
Ensina a fazer essa data na bolinha tracejada e os comentários no balão do pensamento eu ameii ensina por favor
ResponderExcluirOi fofa! Que bom que gostou de ser indicada lá no blog, fico feliz. Então, sobre as perguntas que você fez sobre o meu quarto, vamos lá: A minha parede, foi pintada com tinta preta e corante avermelhado misturado com branco, eu e minha irmã pintamos :) os vidrinhos, eu consegui em um encontrinho de Harry Potter (sabe como é vício, né, kkkkkkkk!), eu e minha irmã estamos fazendo um desses vidrinhos! Se sobrar, eu te mando um, e o Perry, eu comprei na Disney!
ResponderExcluirBeijos linda, até logo!
www.lincymods.blogspot.com
Nossa, jurei que era contact haha
ExcluirPena que não tem encontros onde eu moro :(
Queria ir no Hogwarts Convention, mas né, em São Paulo fica foda :/ #xatiada
Ai que legal, eu quero haha #brinks
Lindo o Perry!
Olá, adoro seu blog,sempre indico para minhas leitoras,
ResponderExcluirnão deixa de postar não viu?ha a ilustração no cabeçalho ficou linda,
tbm ilustro,se quiser dar uma olhadinha...
http://lancedefolhetim.blogspot.com.br/
Amei o tutorial! Anny faz um ensinando como deixar o número de comentários nesse balãozinho que nem do seu blog?
ResponderExcluirAmei, já estou usando!!
ResponderExcluirhttp://glossdementta.blogspot.com.br/
Muito bacana este tuto. Minha caixinha custou ficar do jeito que queria (:
ResponderExcluirBjs,Dani
http://www.avidaemletras.com/
Ameeii essse tuto,super criativo e vou usar e creditar.Teria como vc arumar esse post aqui >> http://goimagines.blogspot.com.br/2012/08/personalizar-o-menu-padrao-do-blogger.html#more quero fazer mas o botao ''mostrar'' nao ta funcionando.Please?
ResponderExcluirColoquei um agradecimento pra você no meu blog (:
ResponderExcluirhttp://meninaeseuestilo.blogspot.com.br/2013/01/omenagem-aos-blog-que-me-ajudaram.html
Obrigada.
Nossa que legal..adorei!!
ResponderExcluirObrigada pela dica!
Post Novo: Look do Dia! Vamos conferir ?
http://nakitaaraujo.blogspot.com.br/
Beijo!
Adorei o tuto,acho que vou usar no meu próxmo layout . Seu blog é muito lindo,conheci ele hoje mas já adorei , rs , seguiindo . Criei meu blog ontem,gostaria tanto que você fizesse uma visitinha,estou agurdando ansiosamente,beijos!
ResponderExcluirhttp://yasmincriistina.blogspot.com.br/
Adoro seu tutoriais.
ResponderExcluirHoje em dia a caixa de pesquisa é muito importante em um blog. Tenho até que colocar uma rsrs
Estou devolta a blogsfera. Se poder dar uma passadinha
Beijos
princess-intheclouds.blogspot.com.br
Oii adorei a postagem e estava procurando a caixinha personalizada e encontrei!!
ResponderExcluirSeguindo!!
BJSS
meumundomaisteen.blogspot.com
Oi *-* Usamos, o problema foi na hora de mudar as cores que não deu certo.Se você entrar no blog vai vê como está, mesmo assim, obrigada <3 Dei uma olhada em seus tutoriais e estou utilizando alguns pro layout que to preparando (sou nova nesse mundo blogger sabe? hehehe) Beijos
ResponderExcluirhttp://garotas-entendem.blogspot.com.br/
Heeey, amei seu blog, lindo e com um ótimo conteúdo!
ResponderExcluirSeguindo ^^
Bjzuuus, Gabii..
http://perpink.com
ótimo tutorial! muito útil! amei seu blog, é perfeito!
ResponderExcluirbeijos (aguardo sua visitinha)
link:Espaço Butterfly
own, amei seu blog! uma amiga me indicou e não pude deixar de seguir ! seguindo tá? lindo o seu cantinho ♥
ResponderExcluirhttp://ilovestarandbooks.blogspot.com.br/
Olá Alana, eu gosto MUITO do seu blog e queria te pedir (se você quiser, ou ainda tiver) o seu layout antigo, aquele da menina com o gatinho no ombro? *---* Please, é perfeito! Beijinhos.
ResponderExcluir- Klara Alessandra.
ola lindinha , lindo blog em :) ja estou seguindo , segue la devolta ! http://www.blogthaisbrito.blogspot.com.br/
ResponderExcluirOlá, ameei seu blog! Já estou usando a caixa de busca no meu! Aliás váááárias coisas são daqui rs' você esta de parabéns mesmo.
ResponderExcluirxoxo
http://eoventolevou-ju.blogspot.com.br/
Alana por favor me responde ou faz um tutorial ensinando como você faz o titulo da postagem continuar personalizado quando se clica nele, pf pf pf pf *-* Preciso muito desse tutorial, eu conseguir personalizar o titulo da postagem do meu blog, mas quando eu clico nele ele volta ao padrão, por favor faz esse tutorial
ResponderExcluirUaal, muito bom esse tutorial em, gostei muito .
ResponderExcluirAmiga voltei com o blog, estava sem tempo para posta ai desativei um pouco rs, mais já voltei, e tem um post novo lá falando o que será as novidades do blog, da uma passadinha lá, ficareei muito feliiz !
Beijos, Liiah ;*
SenhoritaAmbulante.blogspot.com
Eu lancei meu blog agora então talvez eu use :)
ResponderExcluirbjs,
http://umolhardoparaisoblog.blogspot.com.br/
Oi Anny! Finalmente apareci por aqui, rsrs. Então, eu acho bem importante um caixa de pesquisa no blog, principalmente depois que pus um menu com as tags mais importantes e acaba facilitando a busca não é? Achei a tua linda e é claro que tinha dedo da *linda* da Anny por aí! Hahaha. Já tô usando e deu certinho lá no blog, depois passar lá pra ver! (-:
ResponderExcluirUm beijo,
@annolivers
http://world-cutest.blogspot.com.br/
Muito legal o tuto! Já fiz lá no meu blog e ficou muito legal!
ResponderExcluirLindo seu blog! A cada dia fica mais perfeito!
Beijão
Batom De Framboesa.
Anny,tem como você fazer um tutorial explicando como fazer esse "rodapé" igual ao seu?
ResponderExcluirEsse lugar onde você deixou fan box do facebook,afiliados e tal
e também,se der,faz um layout free igual ao seu,porque é lindo!
ou se não disponibiliza bases para cabeçalho.
resumindo:faz um tuto explicando como ter um blog igual ao seu
Adorei a caixinha, estava procurando esses dias para colocar no novo lay, mas ai eu não achei um bonitinha, agora já era!! No próximo, eu volto aqui e coloco!
ResponderExcluirBeijinhos
duunogueira.blogspot.com
oi, ehhh mas uma ehhhhh eu amei o seu blog, seguindo, retribua http://coffeein-paris.blogspot.com.br/
ResponderExcluirOi flor, estou amando o seu Blog, simplesmente lindo. Esta de parabén.... tenho o meu faz pouco tempo. E já procurei em toda parte e nunca acho.
ResponderExcluirCOMO COLOCO ESSE BUTAOZINHO QUE VC TEM PARA COMENTAR: (0 COMENTARIOS) EU QUERIA PERSONALIZAR O MEU.
Achei o seu lindo que fica logo de baixo da data ficou maravilhoso, nos ensina como fazer esse tudo? E ainda como colocar um Blockquote divo como o seu abaixo das postangens? Axo que chama assim? rsrsrs
Bjsss e muito sucesso.
http://www.amoglamour.com/
oii flor amei a postagem, e o seu blog achei muito lindo parabéns e eu queria saber se vc nao podia fazer algum tutorial de como criar um template se puder eu fico agradecida beijos linda
ResponderExcluiraaa visita o meu blog
http://mlleglamour.blogspot.com.br/
Oi! Eu já fiz uma caixa de pesquisa personalizada, mas tirei pois não combinou com o layout :( ;)
ResponderExcluirKisses!
The Fun Day (perfil)
querida faz um tutorial dizendo como faz pra colocar o balao de comentarios e de data em cima da postagem,igual ao seu.ja estou te seguindo bjs
ResponderExcluirTambém estou "louca" para saber, ficou muito fofo. =)
ExcluirSeguindo ela tb, que blog mas lindo né? Apaixonei
Ahhh, esse tuto caiu do céu, viu? Já estou usando esse 'search' no meu blog e não tive nenhum problema pra colocá-lo lá. Apenas ajustei a largura para caber na minha barra lateral e mudei a cor do hover do botão. Ficou ótimo. Aliás, diversos tutoriais do seu blog são ótimos. <3
ResponderExcluirBeijos, Liliane.
lileh-likes-coffee.blogspot.com/
adorei muito util *-*
ResponderExcluirbjsz
ooi linda, eu adorei mesmo o tutorial, mais eu queria que você colocasse alguns bottons para a caixa de pesquisa, você faz flor ?
ResponderExcluirSeguindo aqui tá? Retribui a visita linda ?
Link - Style Of Me
Oi Anny, amei o tutorial e estou usando! ♥
ResponderExcluirÓtimo tutorial!!!!
ResponderExcluirÉ fácil achar como colocar a normal, mas a personalizada eu só encontrei aqui.
Oi Anny, me ajuda! Segui um tutorial de um blog para tirar aquela barrinha de modelo travel, depois disso, não consigo mais procurar códigos naquela caixinha, nem achar os códigos no meu blog, poderia me ajudar??? PFV PFV PFV !!! Urgente!
ResponderExcluirBeijos, aguardo resposta em CONTATOS no meu blog ok??
http://teimosasim.blogspot.com.br/
Muito obrigada ajudou muito! :)
ResponderExcluirAdorei!
ResponderExcluirPersonalizei o meu <3
Tão fácil. Gostei tanto...
ResponderExcluirMas quando fui observar como fica em outros navegadores, aparece a caixinha desconfigurada :((
será que há solução?
Adorei , super fofo *-*
ResponderExcluirhttp://maniadeallstar.blogspot.com.br/
Alana, funcionou direitinho! Obrigado!
ResponderExcluirAmeeeeei :D Estou usando no meu blog, obrigada :D
ResponderExcluirwww.amoraoprimeirorimel.blogspot.com
Adorei o tutorial! Super fácil, obrigada!
ResponderExcluirhttp://bellaflormakeup.wordpress.com/
oii gostei muito dos seus tutorias mas os html mudaram :/ não são mais esses como faço ?
ResponderExcluirOlá Alana,amei seu site e as postagens!
ResponderExcluirmas eu gostaria de saber..
como faço para colocar novamente imagem de fundo na caixa de busca?
Agradeço desde já!!
Ate + :)
Meeeiiii ;3 perfect
ResponderExcluirConsegui \o/ No começo eu não conseguia. Obrigado, Alana :'D
ResponderExcluirMuito foda esse tutorial!
ResponderExcluirSempre venho aqui a procura deste tuto rs!
ResponderExcluir- #quasemeianoite
Muito bom! Meu ajudou muito. Graças a esse tutorial eu consegui fazer o que eu queria!
ResponderExcluirhttp://my-little-candy.blogspot.com.br/
Obg :3 Tutorial Muito Bom!
ResponderExcluirhttp://falajohn.blogspot.com.br/
Ki fofinho seu blog, mais queria mais tutoriais como: como enfeitar a data estou doida pra saber como faz beijo de cinthia. Blog: cinthiaemanuella.blogspot.com.
ResponderExcluirMuito bom!No meu blog ( http://jaqueeditionsoficial.blogspot.com.br/ ) deu certo e eu achei muito fofo!
ResponderExcluirOi,
ResponderExcluirEsse eu conseguir usar.
Obrigada :3
ResponderExcluirOlha o meu não vai
ResponderExcluirHeey, adorei o post, mas queria que fizesse um tuto sobre como colocar a nossa própria imagem do lado do nome do blog?? tipo, o meu ainda tem a imagem do "B" lá em cima, ooq faço gatita?? oobg *--*
ResponderExcluirmariedudreams.blogspot.com *--*
Obg, mais n deu certo :/.... Estou seguindo, segue de volta ? *-*
ResponderExcluirhttp://confde2adolescentes.blogspot.com.br/
o meu nao esta achando esse codigo. pq?
ResponderExcluirPerfeito tuto, sou nova no blog e vou começar a ver mais ele pq ate agr to adorando td s2
ResponderExcluirVc tem um blog incrível
ResponderExcluirpoxa queria mt fazer.. mais no meu nao acha o codigo: }]]>
ResponderExcluirtipo q nao tem esse codigo no meu..
me ajuda pfv??
Funcionou, muito bom!
ResponderExcluirOlá Alana, li bastante posts seus, você escreve muito bem, parabéns, seus tutoriais também são bastante informativos, estou voltando a blogar agora, depois de alguns anos, será que poderíamos fazer uma parceria? Dês de já um abraço, e sucesso :)
ResponderExcluirhttp://ummarinheiro.blogspot.com.br/
Ameii, consegui fazer direitinho hehe obgg
ResponderExcluirxoxo
may
Não estou conseguindo ir em ''pesquisar'' quando aperto Ctrl+F3 não da nada e quando aperto Ctrl+F4 a página fecha, o que eu faço?
ResponderExcluirAmei a postagem ! Beijos
ResponderExcluirVisitem meu blogger -> http://jenniferfivestars.blogspot.com.br
bom essas coisas que estao entre /* eu acho tem que colar no html tambem?
ResponderExcluirSalvou minha vida obrigada, vai lá e confere como ficou ?
ResponderExcluirhttp://desaltto-alto.blogspot.com.br/
Adorei a postagem foi muito útil. Obrigada pela Dica!
ResponderExcluirhttp://cantinhodocs2.blogspot.com.br/
http://cardslovee.blogspot.com.br/
Este comentário foi removido pelo autor.
ResponderExcluir