sexta-feira, 7 de outubro de 2011

Como colocar um cabeçalho nas visualizações dinâmicas



Após a implementação das visualizações dinâmicas, muitos devem estar se perguntando como personalizá-las e o primeiro passo para isso é adicionar um cabeçalho para diferenciar seu blog dos demais.

 Veja um exemplo abaixo:



 Se você usa a nova interface: Modelo > Personalizar> Avançado> Adicionar CSS
 Se você usa a antiga interface:  Design > Design de Modelo > Avançado> Adicionar CSS




Copie o código:

.header-bar {
background-color:#738a94 !important; /* Cor de fundo */
background-image:url(URL da imagen) !important; /* Imagem de fundo */
background-repeat:no-repeat; /* Se quiser que a imagem se repita trocar por repeat */
height:149px !important; /* Altura do cabeçalho */
border-bottom:25px solid #3b464b; /* Borda inferior */
}
#header .header-bar .title h1, #header .header-bar .title h3 {display:none;}
#header a:hover {text-decoration:none !important;}
#main {margin-top:115px !important;} /* Distancia entre o cabeçalho e o conteudo */



Cole em Adicionar CSS e troque a URL da imagem no lugar indicado e personalize o restante conforme o indicado em verde. 
 Você pode retirar o borda inferior, deixá-la mais fina, ou mais grossa, conforme desejar.

10 comentários:

EDEN disse...

quais as medidas p/ por imagem no cabecalho?

Daniel disse...

Aki nao deu certo

snoopy.rafa disse...

vocês não sabem como deixar o header bar junto, pois com esse código só fica essa borda sem as páginas e o menu de mudança de visuaalização dinâmica

@AlineKelly disse...

Usei e funcionou, super fácil. Valeu!

Felipe disse...

Não consegui colocar uma imagem de background. Qual será o problema?

 Mauro Cezar disse...
Este comentário foi removido pelo autor.
Jean Mello disse...

o meu blog é o tal do snapshot, eu sou novato no que se refere a blog, piorando a edição do mesmo. eu ate tentei copiar e colar la no meu blog esse código, mas não entendi direito a explicação não sei o que alterar, alguem pode me ajudar

Rojean Wang disse...

Sou iniciante e essa 'postagem' me ajudou bastante. Muito obrigado e espero pode ver mais 'tutu' daqui pra frente pela aqui neste blog. (:

Jamile Moreira disse...

Yes! Consegui. Super fácil esse tutorial. Valeu pelas dicas. Porém, a imagem do cabeçalho ficou fixa na parte superior; não rola junto com o conteúdo, sendo que o espaço para ver as postagens ficou mínimo. Ainda não encontrei nada sobre como resolver isso. O que faço?

http://euexcritora.blogspot.com.br/

Jamile Moreira disse...

Ah, esquece. Já consegui desafixar o cabeçalho :D

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...