| » APRENDA HTML e CSS , HACKS BLOGGER
Este tutorial serve para os modelos do Blogger 2006. Com a atualização do Blogger 2010 ficou mais fácil mudar estas imagens pela própria interface do Blogger.
De qualquer forma vale a pena dar uma lida para aprender um pouco sobre o que é header (cabeçalho), medidas, margens, altura, largura, etc. Várias informações úteis para você aprender e personalizar o seu blog.
Clique nas Imagens e Siga as Orientações Contidas Nelas
INSTRUÇÕES PARA COLOCAR UMA IMAGEM NO CABEÇALHO (HEADER):
1º- O tamanho da sua imagem em pixels deve ser o mesmo do header;2º- Você deve hospedar sua imagem em algum servidor de imagens; Ex: Tinypic ou o próprio blogger;
3º- Copie o endereço (URL) do link da imagem e cole entre os parênteses do código abaixo:
background: url("URL-link da imagem") top center no-repeat;Entenda:
» top center no-repeat→ indica que a imagem irá se localizar no topo, centro e não vai se repetir.♦Aprenda mais sobre códigos CSS-Folhas de Estilo nesse endereço: Introdução: o que são Folhas de Estilo? ;
» Se sua imagem for menor que o espaço destinado à ela e você queira colocar uma cor neste espaço, diferente da cor do fundo, coloque o código html da cor onde está representado em verde:
background: #FFFFFF url(URL link) top center no-repeat;PARA COLOCAR BORDA NA SUA IMAGEM (BORDER):
» Se for colocar em torno de toda imagem (4cantos), use o código:border: 1px solid #000000;» Apenas do lado esquerdo:
border-left: 1px solid #000000;» Apenas do lado direito:
border-right: 1px solid #000000;» Apenas no topo:
border-top: 1px solid #000000;]» Apenas no rodapé:
border-bottom: 1px solid #000000;Entenda:
[1px] → Indica a largura da borda → é aí que entra a alteração da largura ou altura do [#header-wrapper]Ex: Se colocar uma borda de 10px em todos os cantos da imagem terá que aumentar 20px na altura [height] e 20px na largura [width] do [#header-wrapper], ou se não der para aumentar o diminuir [#header-wrapper] por causa da largura total do template -> diminua a imagem essas medidas e depois coloque-a; [solid]->Indica o tipo de borda:
- solid=linha
- dashed=tracejada
- dotted=pontilhada
- ridget=cume
- inset=inserido
- outset=outset
- none=nenhuma
Se quiser saber mais sobre CSS e HTML clique na categoria: ♦APRENDA HTML E CSS
Excelente explicação!
ResponderExcluirParabéns e obrigada pelo seu blog!
O seu blog tem me ajudado muito!!!
ResponderExcluirMuito obrigada pelas suas dicas...
Parabéns pelo seu blog!
Seu site foi essencial pra mim!!
ResponderExcluirObrigado!
Muito bem pelo post.....parabens...vou treinar no meu blog
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirDentre vários tutoriais que pesquisei , o seu foi o melhor exposto, deu para se orientar muito bem, (a combinação com as imagens foi perfeita).
ResponderExcluirBlog do Mijadinha Não imagina o quanto fico honrada com suas palavras, que me deixam muito feliz! Obrigada!
ResponderExcluirOlá,
ResponderExcluirEstou encantada com seu blog!! Estou começando a engatinhar em blogs, tô achado mais complicado que site, já tive um, mas blog, é mais difícil!!!
Obrigada pelos tutoriais!!
Um beijo grande,
Florisa Leal
de mta utilidade !!!
ResponderExcluirobrigado funcionou
ResponderExcluirtutorial muito útil, graças a ele acabou minha aflição
ResponderExcluirmuito obrigado
Olá espero que possa me ajudar ?
ResponderExcluirGostaria de deixar o header e o rodapé igual a deu seu site por inteiro!
Veey Muito Obrigado Eu Tinha Feito Um Banner Mais Ele Estava Maior Que O Cabeçalho!
ResponderExcluirVlw Mesmo Vcs Estão me ajudando muito com Templates e Ferramentas
Parabéns pelo blog!!!!!é realmente muito bom! Conteúdo Original!!![...]
ResponderExcluirola e parabens pelas dicas sao senpre bastante uteis para quem esta a comecar como eu.
ResponderExcluirMas tenho uma duvida...como faco para colocar a imagem de cabecalho, a ocupar a pagina de ponta a ponta. nao tendo margens do lado esquerdo, direito e em cima.
os codigos sao diferentes no meu html. ora veja:
/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
_background-image: none;
color: $(header.text.color);
-moz-border-radius: $(header.border.radius);
-webkit-border-radius: $(header.border.radius);
-goog-ms-border-radius: $(header.border.radius);
border-radius: $(header.border.radius);
}
.Header img, .Header #header-inner {
-moz-border-radius: $(header.border.radius);
-webkit-border-radius: $(header.border.radius);
-goog-ms-border-radius: $(header.border.radius);
border-radius: $(header.border.radius);
}
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: $(header.padding);
padding-right: $(header.padding);
}
.Header h1 {
font: $(header.font);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: 130%;
}
ajudem s.f.f
gostava de ter um cabecalho igualzinho a este blog. inagem difrente claro mas do mesmo estilo.
obrigado
ruin naum gostei!!! sou mais novotemplate para o BLOGGER
ResponderExcluirTá de parabens amigo , valeu mesmo pela dica !!!!!!!
ResponderExcluire fixe
ResponderExcluirMuito obrigado pela dica, me salvou.
ResponderExcluirSua linda!
Ótima explicação, parabéns!
ResponderExcluirMuito Bommmm!!!!!!!!!!!!!!! *-*
ResponderExcluirVlwww ae Belo Blog!!! ^^
Parabens pelo blog, bem explicado e me ajudou muito
ResponderExcluirparabens pelo seu blog e de grande ajuda vlw
ResponderExcluirDeu certo!obrigado!
ResponderExcluirNão conseguir achar isso de /-Header no meu blog cara, oq faço?
ResponderExcluirpode me ajudar, ñ tem esse código no meu
Não estou conseguindo :( Peguei um template para modificá-lo, porém o cabeçalho dele é só uma cor sólida de fundo, mas eu queria substituí-lo por uma imagem. Tentei de todas as formas que está escrito no tutorial e não consegui. Me ajudem? meu e-mail é thaislto@hotmail.com
ResponderExcluirObrigada.
otimo artigo que vcs fizeram parabens
ResponderExcluirGente não hospeda no picasa ele muda o tamanho de imagen eu consegui no Photobucket vlw
ResponderExcluirAjudou-me muito! Valeu, tudo de bom.
ResponderExcluirAjudou pra kct!!!! obrigado msm!!!
ResponderExcluirFiz questão de comentar devido ao fato de esse ter sido o ÚNICO lugar que me ajudou, não só por fornecer a informação correta, mas pela linguagem simples e pelo post auto-explicativo. Parabéns, de verdade, Pelas dicas e pela competência.
ResponderExcluirhehe
Muito grata,
Erica.
@Erica Mello
ResponderExcluirObrigada Erica,
Fico muito feliz em ter ajudado!
Seja sempre bem vinda!
valeu!!!
ResponderExcluirSeja sempre bem vinda Andreia!
ExcluirOla, eu não estou conseguindo achar o header no blog. O meu está parecendo códigos diferentes. Sou nova e ainda estou aprendendo como fazer, se puder me ajudar, agradeço. Obrigada
ResponderExcluirOlá Allegra Fest,
ExcluirO modelo de template que você usa é 2010. Você pode fazer estas alterações no próprio blogger.
Estas alterações deste artigo se aplicam aos modelos mais antigos onde não tínhamos tantos recursos legais no blogger.
Ok, obrigada. Se eu quiser aumentar a imagem do meu cabeçalho eu consigo? Conhece tutoriais deste novo template, queria modificar algumas coisas e ter algumas dicas...Obrigada!
Excluiraff seria mais facil fazer um video
ResponderExcluir