Ola pessoinhas, tudo bom? Quanto tempo, parece que alguem sumiu de novo, cof cof. Mas nao se preocupem, eu estou bem, mas nao garanto que estarei tao presente por aqui nos proximos meses. Voces sabem, coisas de fim de ano que pessoa do terceiro ano devem se preocupar. Hoje trago pra voces um tutorial que estive a muito tempo procurando e que finalmente consegui achar: uma caixa de pesquisa personalizada que inicialmente e apenas um botao, e que ao clicar no icone de pesquisa ela aparece por completo. Exemplo: E um tutorial muito simples, por incrivel que pareca. Vamos la?1. Primeiro, procure por ]]></b:skin> e acima deste codigo cole:#search { } /*-- Caixa de pesquisa geral, nao precisa adicionar nada, se nao quiser --*/#search input[type="text"] { background: url("http://static.tumblr.com/wkafvsi/jcLmsk7dm/teste1pesquisa.png") no-repeat 8px 8px; border: none; font-size: 16px; color: #fff !important; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; /*-- Bordas arredondadas --*/ width: 0px; /*-- Tamanho inicial do icone --*/ padding: 6px 15px 6px 35px; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s;}#search input[type="text"]:focus { width: 250px; /*-- Tamanho final da caixa de pesquisa --*/ background: url("http://static.tumblr.com/wkafvsi/jcLmsk7dm/teste1pesquisa.png") no-repeat 13px 8px rgba(255,255,255,0.5); /*-- fundo da caixa de pesquisa apos clicar, o link e a LUPA e o codigo rgba e o fundo branco com opacidade --*/ outline: none;}2. Faca as alteracoes necessarias e salve.3. Va ate a parte do blog que quer adicionar a caixa de pesquisa (um widget HTML/JavaScript ou ate mesmo o proprio codigo fonte do blog) e cole o seguinte codigo:<form action='/search' id='search' method='get'><input name='q' type='text'/></form>4. Nao e necessario nenhuma alteracao, salve.Prontinho, qualquer problema com o codigo entre em contato atraves dos comentarios ou pela ask. Tchau :3Creditos: x e x Ola! Estou bem, e voces? Sim sim, algum tempo parado. O We Heart HTML e uma otima fonte de conhecimento para quem tem como objetivo conhecer um pouco sobre HTML e CSS ou apenas quer decorar seu blog. Mas como sei que nem tudo que voces procurao vai estar disponivel aqui, trouxe uma postagem que ira auxiliar voces a encontrarem o que procuram: uma recomendacao de sites que me ajudaram e que com certeza irao ajudar voce!Border Radius VisitarBorder RadiusSimples, rapido e pratico, sao as palavras que podem descrever este site. Ele prepara o seu codigo para ter bordas arredondadas em qualquer navegador, tudo que voce precisa e inserir um valor, e pronto, seu codigo esta pronto, voce so precisa copia-lo.Unsplash VisitarUnsplashCompletamente gratis. Imagens em qualidade incrivelmente boa, gratis e de qualquer tipo! O site reune fotos de diversos fotografos ao redor do mundo, que disponibilizaram seus materiais para o site, deixando eles completamente sem qualquer tipo de custo. O site alem de reunir fotos dos mais variados tipos, faz eventualmente colecoes com fotografias que aparentam ter o mesmo tema.Colour Lovers VisitarColour LoversFuncionando em forma de 'forum', os participantes do site se inscrevem e podem ter acesso completo a todos os materiais, que sao disponibilizados tanto pela equipe do site quando pelos usuarios. O site conta com um acervo de paletas,