Hoje eu trouxe pra vocês um tutorial de personalização pro blog, o código eu não lembro onde peguei (pois é oque estou usando nesse template, então peguei do meu próprio blog pra postar aqui) , mas mesmo assim tá valendo não é ? (kkkk)
Vamos começar, primeiro vá em layout > adicionar um Gadget > Html/JavaScript copie o código abaixo e cole na caixa do gadget
<style type="text/css"><!--#barra-busca {width: LARGURADACAIXADEPESQUISApx;height: ALTURADACAIXADEPESQUISApx;float:right;margin-top:0px;margin-right:10px;}#form-busca {background: none;}#form-busca #sprocura{height: 28px;width: 240px;margin-top: 8px;margin-left: 8px;color: #CORDAFONTEDACAIXA;border: 2px solid #CORDABORDADACAIXA;float: left;padding:0px;background-color: #CORDOFUNDODACAIXA;}#bt-busca {height: ALTURADO'OK'px;width: LARGURADO'OK'px;background: url(LINKDO'OK') no-repeat;border: none;margin-top: 7px;float: right;cursor: pointer;margin-right: 10px;}--></style><div id="barra-busca"><form id="form-busca" method=get action="SUAURL/search"><input id="sprocura" type=text name=q maxlength=255 value="" /><input name=btng type=submit id="bt-busca" value="" /><input type="hidden" name="domains" value="SUAURL" /><input type="hidden" name="sitesearch" value="SUAURL" /></form></div>
Mude TODOS os locais em caixa alta ou então dará erro, para encontrar cores vá numa > tabela hexadecimal <
O 'ok' deve ter dimensões de 25x25 pra ficar certinho com a caixa, você pode criar um ou mesmo pegar do google, caso criem um recomendo o site Imgur para a hospedagem da imagem.
Depois de tudo mudado, basta salvar e visualizar seu blog.
1 Comment:
coloca ai para mudar também a lado de posicionamento da caixa, como minha coluna lateral fica do lado direito, a barra "bugou" ficou mais da metade para fora da coluna, nesse caso tem que mudar o "float:right" para "float:left" para que se enquadre corretamente '-' (right: a barra irá para o lado direito, é ideal para templates com coluna lateral esquerda, o left é o contrario)
Postar um comentário