Alterando a altura do Header

OBS: px, é um sistema de medida no qual significa pixels (1 px, 700 px, 2 px, etc)

Para alterar o tamanho da altura do Cabeçalho, você deverá alterar o valor de Height (que significa altura), na secessão do mesmo trecho que foi utilizado para mudar a largura: #header-wrapper. (Se você não viu o post de alteração de largura clique aqui)
O único problema, que apartir de agora deixará de ser problema, é que, em alguns templates, como o Mínima, não vem a medida de height, então basta você escrever, dentro da sessão Header, a palavra height com a medida que você deseja e ficará da seguinte maneira

/* Header----------------------------------------------- */

#header-wrapper {
width:850px;
height: 35o px;
margin:0 auto 10px;border:8px solid #FFD7EB; }

DICA: SEMPRE ESCREVA UM ITEM EM CADA LINHA (WIDTH, HEIGHT, BORDER), POIS ASSIM FICA MAIS FÁCIL ENCONTRÁ-LOS PARA POSSÍVEIS ALTERAÇÕES E NÃO SE ESQUEÇA JAMAIS DE FINALIZAR CADA LINHA COM UM PONTO E VÍRGULA (;)

Alterar largura do Header

OBS: px, é um sistema de medida no qual significa pixels (1 px, 700 px, 2 px, etc)

Pessoal, eu falo Header porque, na minha opinião, é um termo mais bonitinho que Cabeçalho, mas é a mesma coisa rs.
Um problema muito freqüente que acontece com pessoas, que assim como eu fazem imagens que acabam ultrapassando o tamanho do Header e fica aquela coisa horrível quase saindo fora da página, são as medidas.
Bom, eu vou explicar aqui como resolver o problema do Header pequeno ou grande demais, isso pra quem insere imagens direto pelo HTML, porque na inserção automática de imagens pelo layout de edição, ele redimenciona a imagem conforme o tamanho do cabeçalho do seu template.
É necessário muita paciência, porque medida é algo bastante delicado.

Para quem quer simplesmente aumentar a largura do topo, siga essas etapas:

1º Encontre no códogo do seu template o seguinte trecho:

/* Header----------------------------------------------- */
#header-wrapper

{ width:800px;
height: 35o px;

margin:0 auto 10px;

border:8px solid #FFD7EB;

}

(Pode acontecer de que em alguns templates venha escrito diferente, mas vale ressaltar que eu estou utilizando como base o template Mínima)

2º No trecho acima, mude o valor de width (que significa largura), para um valor maior ou menor conforme a sua preferência. Se o valor do seu width for 800 px e você quiser um header maior, mude a largura para um valor maior que 800 px e vice-versa

3º Essa etapa é muito importante, pois é o que adaptará a estrutura do seu template ao novo valor da largura do seu Header. Encontre o trecho:

/* Outer-Wrapper----------------------------------------------- */

#outer-wrapper {
width: 800px;
margin:0 auto; padding:5px;
text-align:left;
font: $bodyfont;
background: #000000; }

5º Deixe o valor de width, de acordo com o novo valor do seu Header. Ex: se o seu Header for 800 px, então outer-wrapper também deverá ser 800 px.

P.S.: Se você aumentar o Header, poderá ficar sobrando um espaço entre o lado da sua sidebar e o canto da página, agora se você diminuir, uma parte da sua sidebar será cortada, ou seja, haverá uma bagunça nas colunas, então confira os posts sobre aumentar e diminuir sidebars.

Tabela de Cores

Uma das coisas mais importantes e que um blogueiro não vive sem : A TABELA DE CORES :)
É quase impossível uma pessoa conseguir decorar todos os códigos de cores (acho que nem o melhor web desingner do universo). Pra quem não sabe, muda-se o tom de um background, por exemplo, através do código da cor. É fato que o Blogspot disponibiliza a mudança de cores automaticamente (Layout> Fontes e cores), mas não é com todos os templates que funciona essa opção e o Blogspot não fornece todas as variedades de cores existentes, então utilize a tabela abaixo. Não sabe como usar? Acompanhe os tutoriais relacionados a cores.

CLIQUE PARA AMPLIAR:

Como tirar a navbar do Blogger

Pra quem não sabe, navbar é aquela faixinha azul, preta, ou cinza que fica lá em cima da página e que particularmente eu e muita gente não gosta, porque além de estar disponível somente nessas três cores cores que eu disse anteriormente, estraga qualquer template. É como se fosse um pequeno detalhe infeliz sabe...
Bom, e como eu sei que muitas pessoas procuram algum código que faça com que essa navbar desapareça, resolvi disponibilizá-lo, então faça o seguinte:

1º- Copie código a seguir:

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

2º- Vá na aba Layout> Editar HTML e no código do seu template procure o seguinte trecho:

]]><*/b:skin>
ATENÇÃO: ESTE TRECHO ]]><*/b:skin> SÓ ESTÁ COM UM ASTERISCO, POR PROBLEMAS DE PUBLICAÇÃO, ENTÃO, PARA ENCONTRÁ-LO, ESQUEÇA O ASTERISCO, OKAY?

Normalmente, o trecho acima se encontra antes da tag <*/head> (sem asterisco). Se necessário dê CTRL F para localizar

3º- Cole o código que você copiou antes do trecho ]]><*/b:skin>. Ficará da seguinte maneira:

#navbar-iframe { height: 0px; visibility: hidden; display: none; }
]]><*/b:skin>

4º Salve o Modelo

PRONTO! Agora você não terá aquela horrível navbar atrapalhando o seu layout ^^

P.S. : Se quiser colocá-la novamente é só repetir o procedimento, só que desta vez apagando o trecho colado: #navbar-iframe { height: 0px; visibility: hidden; display: none; }

Termos e elementos

Existem muitas palavras que podem soar até estranhas, mas que são essenciais em um documento HTML, então vamos conhecê-las:

P.S: Clique nos exemplos para ampliá-los.

Cabeçalho ou Header: é o topo da página, a porta de entrada do seu blog, o primeiro ponto onde o usuário irá olhar. É o local onde coloca-se uma imagem com o título da página, ou só imagem ou só título.

Coluna ou Sidebar: é a parte do lado do template, onde você colocará os seus widgets, lista de links e assim por diante. Alguns layouts podem apresentar uma, duas, três ou mais sidebars.

Widget ou Gadget: Antigamente chamava-se Widget, hoje chama-se Gadget, mas não deixam de ser a mesma coisa. Esses elementos são indispensáveis e todo mundo usa em sua web page. São nada mais que scripts, como relógis, calendários, imagens, ou qualquer outro elemento que você queira colocar no blog. Somente o Blogspot dispõe da adição de gadgets automaticamente, sem que o administrador tenha que interferir diretamente no HTML do seu template.
Para utilizar esse sistema, observe bem o layout de edição do seu template e encontrará a opção, tradicionalmente em cima da sidebar, no topo ou fim da página de edição. Ex:

Footer: é o fim da página do seu template, lá embaixo, onde alguns colocam os créditos do layout.

Tags

Em um documento HTML, o que mais se encontra, são tags. Primeiramente, tudo que
estiver entre os sinais de menor que e maior que ('<' e '>'), incluindo eles são chamadas
'tags'. As tags são partes importantes em documentos HTML, elas são as responsáveis por toda
a formatação do texto. Com elas você pode dividir o documento em área de cabeçalho e corpo,
colocar títulos, criar tabelas, divisões, formulários e ainda formatar trechos específicos do
texto.
Mas é bom lembrar, que atualmente, o Blogspot aceita apenas templates em formato XML, então em todo o conteúdo dos tutorias, o que vou ensinar são truques para personalisar um template e não produzir um propriamente dito.
Eis algumas que iremos utilizar muito:
<*head><*/head><*body><*/body><*b><*/b><*i><*/i>. Como você deve ter percebido, todas as tags possuem essa barra: /, na qual é o fechamento, o que significa que está encerrando o elemento. É claro que existem algumas exceções, como as tags <*br/>e<*hr/>, que possuem o fechamento (/), depois do elemento. A razão pela qual se coloca a barra no final dela é que elas são tags vazias, isto é, não precisam de uma tag para iniciá-las e outra para terminá-las. Os novos padrões da web determinam que toda e qualquer tag deve ser fechada, incluindo as tags vazias. Por isso
colocamos a barra no final, para indicar que ela se inicia e se fecha nela mesma.

P.S.: As tags como <*head>e <*/head>, só estão com asterisco por problemas na publicação do post, mas nenhuma tag possui asterisco, ok?

Início

Abri este blog no intuito de ajudar os blogueiros adeptos ao Blogspot. Sei que as dúvidas são imensas quando se monta uma página e todos, sem sombra de dúvida, querem personalizá-la, incrementando com mais coisas para a facilitação ou interação do leitor.
Então, como eu já tenho uma certa experiência no ramo, principalmente quando o assunto em questão é Blogspot, resolvi dar uma "mãozinha" para os iniciantes ou para aqueles que sonham em ter um blog super personalizado e simplesmente deixar de usar aqule templates Mínima exatamente da forma como Douglas Bowman disponibilizou como tema padrão para o Blogspot ^^
A partir daqui, você irá perceber que a linguagem HTML não tem nenhum segredo, mas que o maior artifício para o sucesso é a paciência e persistência.
Para você iniciante e leigo total no assunto, aconselho começar lendo o post sobre as tags, no qual você pode conferir em um dos links ao lado>>