Modificando o blog! 2 - cabeçalho -

modificando o blog, cabeçalho

Olá pessoal! Mais uma vez o Superpoint vem trazer um novo artigo e tutorial da série modificando o blog! Hoje nós iremos tratar de mais um assunto um pouco complexo para a maioria dos blogueiros iniciantes...
Como fazer o seu cabeçalho personalizado, como eu sempre digo em minhas postagens, é extremamente importante que você seja diferente dos outros, tanto na internet como fora dela, pensando nisso você deve ver desde pequenas coisas até grandes coisas, ser diferente engloba tudo em um blog. Desde coisas simples como ter um template diferente e inovador até mesmo construir bons artigos, de qualidade, com muita informação para os leitores.
Todo site de sucesso tem um cabeçalho que marca a cabeça de quem entra, cabeçalhos legais fazem com que o leitor sempre reconheça do que se trata, mesmo que alguém roube o seu cabeçalho, se você tiver um leitor perseverante que encontrar esse cabeçalho em outro site com certeza saberá que é o seu, isso é importante, ter uma "identidade visual" vamos dizer assim. Mais uma vez essa postagem será bem cansativa, sem muitas imagens espero que você tenha paciência.

Materiais:
NotePad++: Como eu já disse na postagem anterior a essa, você não vai precisar desde programa para fazer as mudanças, é bem pessoal decidir se vai ou não utilizá-lo, afinal de contas ele só será usado caso você esteja em dúvida na hora de fazer alguma alteração.
LogoMaker, Photoshop ou qualquer outro programa de arte digital: É importante ser diferente, mas como você será diferente dos outro se apenas pegar uma imagem legal do google e colocar no seu cabeçalho? Nem pensar, no nosso blog você só aprende o melhor e o melhor é fazer o seu cabeçalho manualmente, caso não saiba, veja o tutorial onde eu ensino a fazer uma logomarca facilmente. Não precisa necessariamente ser uma logo marca, mas é sempre bom ter uma bem inovadora para gravar na cabeça do leitor aquela imagem e fazer com que se ele ver novamente saberá do que se trata.

Exemplo de cabeçalhos:

Cabeçalho SuperPoint


blog da fulaninha, cabeçalho, exemplo de cabeçalho


Materiais em mãos, vamos trabalhar!

Entre no Painel do Blogger>>Design>>Editar HTML.

Agora aperte CTRL+F e secreva na lacuna que aparecer isso: HEADER, aperte Enter para que ele te leve a segunda linha de código que está escrito Header, lá está todo o seu cabeçalho, e abaixo disso algumas outras coisinhas que aprenderemos a modificar em aulas mais futuras.

Você deverá ver algo semelhante a isso:

/* Header-----------------------------------------------*/
#header-wrapper{width:950px;margin:0px auto 0px;height:139px;background: url(#) left center no-repeat;overflow:hidden;}
#header-inner{background-position:center;margin-left:auto;margin-right:auto}
#header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:47%;overflow:hidden;}
#header h1{margin:0 5px 0;padding:20px 0 0 0px;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;font-size:48px;color:#2B2B2B;}
#header .description{padding-left:10px;color:#939393;font-size:14px;padding-top:0px;margin-top:0px;}
#header h1 a,#header h1 a:visited{color:#2B2B2B;text-decoration:none}
#header h2{padding-left:15px;color:#736f74;font:14px Arial,Helvetica,Sans-serif}
#header2{float:right;width:51%;margin-right:0px;padding-right:0px;overflow:hidden;}
#header2 .widget{padding:30px 0px 0 10px;float:right}

Vamos modificar por partes, começaremos na segunda linha de código:

#header-wrapper{width:950px;margin:0px auto 0px;height:139px;background: url(#) left center no-repeat;overflow:hidden;}

Bom, na parte vermelha eu destaquei duas palavras, width e height, width é largura, é lá onde você colocará a medida da largura do seu cabeçalho, então se você quiser mais largo coloque um número maior, se você gostar da largura que está, então deixe como está ok? Height é a altura, aqui é onde mais se modifica nos templates, aqui sendo a altura você colocara a medida que quiser de altura para o seu cabeçalho, então deixo uma dica, não faça muito largo, cabeçalhos muito grandes perdem o interesse, o leitor quer clicar e abrir logo o que deseja e não ter que ficar descendo a barra de rolagem para chegar na postagem, cabeçalhos muito grandes são um verdadeiro problema para usuários com conexão lentas, então não exagere. E na parte que eu destaquei colocando "#", bom isso é o local onde você deve colocar o URL da sua imagem, sim a imagem deve estar hospedada na internet.

Se você nunca mexeu antes no seu template e ele não tiver uma imagem no cabeçalho, mas sim um espaço vazio com o nome do blog, você terá um pequeno problema...
Quando não se vem com uma imagem é preciso modificar algumas coisas a mais no seu cabeçalho, então dê uma olhada no seu código, se ele estiver mais ou menos igual ao código que eu passei acima, ótimo, mas se ele estiver faltando o background, então você terá que colocar, veja o exemplo:

Se ele estiver assim não será possível colocar uma imagem:

#header-wrapper{width:950px;margin:0px auto 0px;height:139px;overflow:hidden;}

Então você tem que adicionar isso background: url(#) left center no-repeat; no 139px, que na verdade pode ser qualquer número, resumindo ele tem que ficar assim:

#header-wrapper{width:950px;margin:0px auto 0px;height:139px; background: url(#) left center no-repeat;overflow:hidden;}

Porque tem que ter o background?

É importante ter o background com um URL qualquer para que você possa colocar uma imagem, da internet, assim fica mais legal, pois você explora o máximo da modificação.

Se agora estiver tudo certo, com o background e o URL que você deseja veja agora algumas dicas para evitar problemas maiores:

Faça uma montagem no photoshop ou qualquer outro programa de designer, tente fazer com as cores combinando, lembre-se que quando for começar o seu projeto utilize os números que estão no seu header, ou seja, no nosso caso temos isso:

width:950px;margin:0px auto 0px;height:139px

Então quando for criar e o programa pedir o tamanho do documento, coloque exatamente o mesmo número que está indicando no seu blog, caso contrário a imagem ficará grande demais e você provavelmente não quer isso, então faça as coisas de maneira correta, sem preguiça ok?

Modificando o blog 2, cabeçalho, superpoint

Pronto, fez a montagem? Fez a montagem com as coordenadas corretas? Então está tudo certo, acho que podemos prosseguir.

Entre no seu editar html e escreva HEADER no CTRL+F como vimos anteriormente, agora você vai fazer o seguinte:

1° Pegue a imagem que você montou e entre no site tinypic, faça a hospedagem da sua imagem no site.
2° De todos as opções de tipo de postagem que tiverem, você vai copiar a ultima opção, a que é um URL.
3° Agora entre no seu "editar html" e escreva no lugar do # o URL da imagem que acabou de copiar.
4° Agora salve e visualize a página para ver como ficou!

Se você não sabe hospedar uma imagem na internet clique aqui.

Caso não tenha ficado do tamanho certo, ou você acha que deve diminuir um pouco a resolução da imagem, então pode fazer isso, nem sempre as modificações ficam perfeitas, pois quando o template é gratuito muitas vezes encontramos diverssos problemas com os quais temos que aprender a lidar, já que somos "leigos".

Espero ter ajudado a todos, até a próxima!

Os tutoriais citados acima para auxiliação da montagem do cabeçalho serão colocados posteriormente, obrigada.

7 comentários:

Claudio disse...

coonseguui <o/ eu vou casar com o teu blog em kkkk

Unknown disse...

Não vai não ele já é meu!!! Tira o olho piranha! kkkkkkk brinks

Claudio disse...

tanéh kakkakkk

Érica disse...

nenhum desses tem virus né?

Unknown disse...

Não existe nada que tenha virus nesse site, pode ficar tranquilo.

Locos por RBR disse...

eu num consigo, merda kkkkkkkkkkj

Unknown disse...

kkkkkkkkkkkkkkkkk faz parte! O que que está acontecendo de errado, me conte e vamos tentar resolver o problema juntos.

Postar um comentário

Leia antes de fazer seu comentário:
- Os comentários do blog são moderados e serão liberados após constatação de que estão de acordo com o assunto do post.
- Palavras ofensivas serão removidas.
- Os comentários não refletem a opinião do autor.

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Sweet Tomatoes Printable Coupons